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

css3 盒模型以及box-sizing屬性全面了解

  發(fā)布時(shí)間：2016-09-20 17:10:19   作者：佚名   我要評(píng)論
下面小編就為大家?guī)?lái)一篇css3 盒模型以及box-sizing屬性全面了解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

文檔中的每個(gè)元素被描繪為矩形盒子。渲染引擎的目的就是判定大小，屬性——比如它的顏色、背景、邊框方面——及這些盒子的位置。在CSS中，這些矩形盒子用標(biāo)準(zhǔn)盒模型來(lái)描述。這個(gè)模型描述了一個(gè)元素所占用的空間。每一個(gè)盒子有四條邊界：外邊距邊界margin, 邊框邊界border, 內(nèi)邊距邊界padding與內(nèi)容邊界content。

在W3C模型中: 總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

在IE模型中: 總寬度 = margin-left + width + margin-right

在CSS3中引入了box-sizing屬性, 它可以允許改變默認(rèn)的CSS盒模型對(duì)元素寬高的計(jì)算方式.

共包括兩個(gè)選項(xiàng)：

content-box：標(biāo)準(zhǔn)盒模型，CSS定義的寬高只包含content的寬高。（默認(rèn)）

border-box：IE盒模型，CSS定義的寬高包括了content，padding和border

實(shí)例：

(con1設(shè)置為box-sizing：border-box，con為默認(rèn)的content-box)

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <head lang="en">     
  2.     <meta charset="UTF-8">     
  3.     <title></title>     
  4.     <style>     
  5.         .con{width: 100px; height: 100px;background-color:royalblue;     
  6.              border:1px solid red; padding: 10px;}     
  7.         .con1{box-sizing: border-box;}     
  8.     </style>     
  9. </head>     
  10. <body>     
  11.     <div class="con"></div>     
  12.     <div class="con con1"></div>     
  13. </body>  

在控制臺(tái)可以一目了然的看出兩個(gè)盒子的區(qū)別

第一個(gè)div的盒子模型如下：content-box

第二個(gè)div的盒子模型如下：border-box

以上就是小編為大家?guī)?lái)的css3 盒模型以及box-sizing屬性全面了解的全部?jī)?nèi)容了，希望對(duì)大家有所幫助，多多支持腳本之家~

相關(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屬性解決div寬高被內(nèi)邊距撐開(kāi)的問(wèn)題

    div往往會(huì)因?yàn)閮?nèi)邊距的設(shè)置而使整個(gè)層寬度和高度超出預(yù)定范圍,而CSS3的box-sizing屬性可以簡(jiǎn)單解決這樣的現(xiàn)象,下面我們就來(lái)詳細(xì)解說(shuō)使用CSS3的box-sizing屬性解決div寬高被
    2016-06-28

  • 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)論