您好,登錄后才能下訂單哦!
小編給大家分享一下box-sizing屬性的使用方法,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
css3中的box-sizing屬性允許以特定的方式定義匹配某個區(qū)域的特定元素。
CSS3 box-sizing屬性
作用:允許您以確切的方式定義適應(yīng)某個區(qū)域的具體內(nèi)容。
說明:Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 屬性。Firefox 需要前綴 -moz-。
語法:
box-sizing: content-box|border-box|inherit;
值 | 描述 |
content-box | 這是由 CSS2.1 規(guī)定的寬度高度行為。 寬度和高度分別應(yīng)用到元素的內(nèi)容框。 在寬度和高度之外繪制元素的內(nèi)邊距和邊框。 |
border-box | 為元素設(shè)定的寬度和高度決定了元素的邊框盒。 就是說,為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。 通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。 |
inherit | 規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。 |
CSS3 box-sizing屬性的使用示例
<!DOCTYPE html> <html> <head> <style> div.container { width:30em; border:1em solid; margin: 100px auto; } div.box { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; border:1em solid red; float:left; } </style> </head> <body> <div class="container"> <div class="box">這個 div 占據(jù)左半部分。</div> <div class="box">這個 div 占據(jù)右半部分。</div> </div> </body> </html>
效果圖:
看完了這篇文章,相信你對box-sizing屬性的使用方法有了一定的了解,想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。