欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用CSS3的box-sizing屬性解決div寬高被內(nèi)邊距撐開(kāi)的問(wèn)題

航歌   發(fā)布時(shí)間:2016-06-28 11:19:25   作者:hangge   我要評(píng)論
div往往會(huì)因?yàn)閮?nèi)邊距的設(shè)置而使整個(gè)層寬度和高度超出預(yù)定范圍,而CSS3的box-sizing屬性可以簡(jiǎn)單解決這樣的現(xiàn)象,下面我們就來(lái)詳細(xì)解說(shuō)使用CSS3的box-sizing屬性解決div寬高被內(nèi)邊距撐開(kāi)的問(wèn)題

有時(shí)我們會(huì)給頁(yè)面的元素(比如div)設(shè)置個(gè)固定的高度或?qū)挾取5绻o這個(gè)div又設(shè)置了內(nèi)邊距或者邊框的話,那么這個(gè)div就會(huì)被撐大。也就是其實(shí)際的尺寸變成了:設(shè)置的寬高尺寸+內(nèi)邊距+邊框。
這樣就有可能對(duì)我們的布局造成影響,如果不想讓內(nèi)邊距和邊框影響到我們?cè)O(shè)置的固定尺寸,可以借助 box-sizing 這個(gè)css屬性來(lái)實(shí)現(xiàn)。

1,box-sizing 屬性介紹
box-sizing 允許我們以特定的方式定義匹配某個(gè)區(qū)域的特定元素。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. box-sizing: content-box|border-box|inherit;  

描述
content-box

這是由 CSS2.1 規(guī)定的寬度高度行為。

寬度和高度分別應(yīng)用到元素的內(nèi)容框。

在寬度和高度之外繪制元素的內(nèi)邊距和邊框。

border-box

為元素設(shè)定的寬度和高度決定了元素的邊框盒。

就是說(shuō),為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。

通過(guò)從已設(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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2.     .form-control {   
  3.           width200px;   
  4.           height34px;   
  5.           padding6px 12px;   
  6.           line-height: 1.42857143;   
  7.           color#555555;            
  8.           border1px solid #cccccc;   
  9.           border-radius: 4px;   
  10.     }   
  11. </style>   
  12. <input class="form-control" type="text" placeholder="Email地址">  

但加上內(nèi)邊距和邊框后,輸入框的實(shí)際尺寸變成:226px * 48px
2016628112623348.png (717×174)

3,設(shè)置元素邊框盒尺寸(box-sizing:border-box)
當(dāng)元素的 box-sizing 是 border-box 的時(shí)候,我們給元素設(shè)置的寬度、高度實(shí)際上是設(shè)置這個(gè)元素邊框盒的寬度、高度。也就是說(shuō)內(nèi)邊距、邊框都是在這個(gè)內(nèi)部繪制,而不會(huì)把元素?fù)伍_(kāi)。
還是同樣的樣例,設(shè)置為border-box后:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2.     .form-control {   
  3.           width200px;   
  4.           height34px;   
  5.           box-sizing: border-box;   
  6.           padding6px 12px;   
  7.           line-height: 1.42857143;   
  8.           color#555555;            
  9.           border1px solid #cccccc;   
  10.           border-radius: 4px;   
  11.     }   
  12. </style>   
  13. <input class="form-control" type="text" placeholder="Email地址">  

不管內(nèi)邊距和邊框設(shè)置是多少,輸入框尺寸固定是:200px * 34px
2016628112646877.png (710×172)

相關(guān)文章

  • 談?wù)剬?duì)css屬性box-sizing的了解

    本篇文章主要介紹了css屬性box-sizing,box-sizing屬性是CSS3中引入的,有人解釋為它可以指定用width屬性與height屬性分別指定的寬度值與高度值是否包含元素內(nèi)部的補(bǔ)白區(qū)域
    2017-01-04
  • CSS3 box-sizing屬性詳解

    隨著瀏覽器對(duì)HTML5及CSS3的支持,在移動(dòng)端及自適應(yīng)頁(yè)面中CSS3.0發(fā)揮著很大優(yōu)勢(shì),下面小編來(lái)給大家講下CSS3.0的屬性之box-sizing,感興趣的朋友們可以參考借鑒,下面來(lái)一起
    2016-11-15
  • css3 盒模型以及box-sizing屬性全面了解

    下面小編就為大家?guī)?lái)一篇css3 盒模型以及box-sizing屬性全面了解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-09-20
  • CSS3屬性box-sizing使用指南

    這篇文章主要介紹了CSS3屬性box-sizing使用指南,需要的朋友可以參考下
    2014-12-09
  • css3 box-sizing屬性使用參考指南

    CSS3 box-sizing屬性,在很多新手朋友來(lái)看是比較陌生的,接下來(lái)介紹CSS3 box-sizing使用及注意部分,感興趣的朋友可以了解下
    2013-01-08
  • CSS3 box-sizing屬性

    說(shuō)到 IE 的 bug,一個(gè)臭名昭著的例子是它對(duì)于“盒模型”的錯(cuò)誤解釋?zhuān)涸?IE5.x 以及 Quirks 模式的 IE6/7 中,將 border 與 padding 都包含在 width 之內(nèi)。這為前
    2009-04-17
  • 詳解CSS3中的box-sizing(content-box與border-box)

    這篇文章主要介紹了CSS3中的box-sizing(content-box與border-box)的相關(guān)資料,需要的朋友可以參考下
    2019-04-19

最新評(píng)論