您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“css屬性width默認(rèn)值width: auto與width: 100%有什么區(qū)別”,感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“css屬性width默認(rèn)值width: auto與width: 100%有什么區(qū)別”吧!
width: auto
子元素(包括content+padding+border+margin)撐滿整個(gè)父元素的content區(qū)域。
子元素有margin、border、padding時(shí),會(huì)減去子元素content區(qū)域相對(duì)應(yīng)的width值
父元素的content = 子元素(content + padding + border + margin )
width: 100%
強(qiáng)制將子元素的content區(qū)域 撐滿 父元素的content區(qū)域
子元素有margin、border、padding時(shí),不改變子元素content區(qū)域的width,而是溢出父盒子,保持原有值
父元素的content = 子元素的content
一例勝千言:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0;padding: 0; } body { background: #dcdcdc; } .box { width: 400px; border: 3px solid red; padding: 0 50px; } .box1 { width: auto; height: 100px; background: pink; padding: 0 50px; margin: 0 50px; border-width: 0 50px; border-style: solid; border-color: green; } .box2 { width: 100%; height: 100px; background: gold; padding: 0 50px; margin: 0 50px; border-width: 0 50px; border-style: solid; border-color: green; } .box3 { width: 100px;height: 100px;background: orange; } .box4 { float: left; width: 50px;height: 50px;background: pink; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
注: 圖片 子 width 改為 子 content
到此,相信大家對(duì)“css屬性width默認(rèn)值width: auto與width: 100%有什么區(qū)別”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。