您好,登錄后才能下訂單哦!
小編給大家分享一下如何使用CSS3的box-sizing屬性解決div寬高被內(nèi)邊距撐開的問題,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
有時(shí)我們會(huì)給頁(yè)面的元素(比如div)設(shè)置個(gè)固定的高度或?qū)挾?。但如果給這個(gè)div又設(shè)置了內(nèi)邊距或者邊框的話,那么這個(gè)div就會(huì)被撐大。也就是其實(shí)際的尺寸變成了:設(shè)置的寬高尺寸+內(nèi)邊距+邊框。
這樣就有可能對(duì)我們的布局造成影響,如果不想讓內(nèi)邊距和邊框影響到我們?cè)O(shè)置的固定尺寸,可以借助 box-sizing 這個(gè)css屬性來實(shí)現(xiàn)。
1,box-sizing 屬性介紹
box-sizing 允許我們以特定的方式定義匹配某個(gè)區(qū)域的特定元素。
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 屬性的值。 |
2,設(shè)置元素內(nèi)容尺寸(box-sizing:content-box)
content-box 是 box-sizing 屬性的默認(rèn)值。當(dāng)元素的box-sizing是content-box的時(shí)候,我們給元素設(shè)置的寬度、高度實(shí)際上是設(shè)置這個(gè)元素內(nèi)容的寬度、高度。而元素的內(nèi)邊距和邊框會(huì)在寬度和高度之外繪制。
比如下面樣例,我們?cè)O(shè)置寬高尺寸為:200px * 34px
<style> .form-control { width: 200px; height: 34px; padding: 6px 12px; line-height: 1.42857143; color: #555555; border: 1px solid #cccccc; border-radius: 4px; } </style> <input class="form-control" type="text" placeholder="Email地址">
但加上內(nèi)邊距和邊框后,輸入框的實(shí)際尺寸變成:226px * 48px
3,設(shè)置元素邊框盒尺寸(box-sizing:border-box)
當(dāng)元素的 box-sizing 是 border-box 的時(shí)候,我們給元素設(shè)置的寬度、高度實(shí)際上是設(shè)置這個(gè)元素邊框盒的寬度、高度。也就是說內(nèi)邊距、邊框都是在這個(gè)內(nèi)部繪制,而不會(huì)把元素?fù)伍_。
還是同樣的樣例,設(shè)置為border-box后:
<style> .form-control { width: 200px; height: 34px; box-sizing: border-box; padding: 6px 12px; line-height: 1.42857143; color: #555555; border: 1px solid #cccccc; border-radius: 4px; } </style> <input class="form-control" type="text" placeholder="Email地址">
不管內(nèi)邊距和邊框設(shè)置是多少,輸入框尺寸固定是:200px * 34px
以上是“如何使用CSS3的box-sizing屬性解決div寬高被內(nèi)邊距撐開的問題”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(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)容。