使用CSS3的box-sizing屬性解決div寬高被內邊距撐開的問題
航歌 發(fā)布時間：2016-06-28 11:19:25 作者：hangge 
我要評論
我要評論div往往會因為內邊距的設置而使整個層寬度和高度超出預定范圍,而CSS3的box-sizing屬性可以簡單解決這樣的現(xiàn)象,下面我們就來詳細解說使用CSS3的box-sizing屬性解決div寬高被內邊距撐開的問題
有時我們會給頁面的元素（比如div）設置個固定的高度或寬度。但如果給這個div又設置了內邊距或者邊框的話，那么這個div就會被撐大。也就是其實際的尺寸變成了：設置的寬高尺寸+內邊距+邊框。
這樣就有可能對我們的布局造成影響，如果不想讓內邊距和邊框影響到我們設置的固定尺寸，可以借助 box-sizing 這個css屬性來實現(xiàn)。
1，box-sizing 屬性介紹
box-sizing 允許我們以特定的方式定義匹配某個區(qū)域的特定元素。
CSS Code復制內容到剪貼板
- box-sizing: content-box|border-box|inherit;
| 值 | 描述 |
|---|---|
| content-box |
這是由 CSS2.1 規(guī)定的寬度高度行為。 寬度和高度分別應用到元素的內容框。 在寬度和高度之外繪制元素的內邊距和邊框。 |
| border-box |
為元素設定的寬度和高度決定了元素的邊框盒。 就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。 通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。 |
| inherit | 規(guī)定應從父元素繼承 box-sizing 屬性的值。 |
2，設置元素內容尺寸（box-sizing:content-box）
content-box 是 box-sizing 屬性的默認值。當元素的box-sizing是content-box的時候，我們給元素設置的寬度、高度實際上是設置這個元素內容的寬度、高度。而元素的內邊距和邊框會在寬度和高度之外繪制。
比如下面樣例，我們設置寬高尺寸為：200px * 34px
CSS Code復制內容到剪貼板
- <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地址">
但加上內邊距和邊框后，輸入框的實際尺寸變成：226px * 48px
3，設置元素邊框盒尺寸（box-sizing:border-box）
當元素的 box-sizing 是 border-box 的時候，我們給元素設置的寬度、高度實際上是設置這個元素邊框盒的寬度、高度。也就是說內邊距、邊框都是在這個內部繪制，而不會把元素撐開。
還是同樣的樣例，設置為border-box后：
CSS Code復制內容到剪貼板
- <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地址">
不管內邊距和邊框設置是多少，輸入框尺寸固定是：200px * 34px 
相關文章
- 本篇文章主要介紹了css屬性box-sizing，box-sizing屬性是CSS3中引入的，有人解釋為它可以指定用width屬性與height屬性分別指定的寬度值與高度值是否包含元素內部的補白區(qū)域2017-01-04
- 隨著瀏覽器對HTML5及CSS3的支持，在移動端及自適應頁面中CSS3.0發(fā)揮著很大優(yōu)勢，下面小編來給大家講下CSS3.0的屬性之box-sizing，感興趣的朋友們可以參考借鑒，下面來一起2016-11-15
- 下面小編就為大家?guī)硪黄猚ss3 盒模型以及box-sizing屬性全面了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-20
- 這篇文章主要介紹了CSS3屬性box-sizing使用指南,需要的朋友可以參考下2014-12-09
- CSS3 box-sizing屬性，在很多新手朋友來看是比較陌生的,接下來介紹CSS3 box-sizing使用及注意部分，感興趣的朋友可以了解下2013-01-08
- 說到 IE 的 bug，一個臭名昭著的例子是它對于“盒模型”的錯誤解釋：在 IE5.x 以及 Quirks 模式的 IE6/7 中，將 border 與 padding 都包含在 width 之內。這為前2009-04-17
詳解CSS3中的box-sizing（content-box與border-box）
這篇文章主要介紹了CSS3中的box-sizing（content-box與border-box）的相關資料,需要的朋友可以參考下2019-04-19