在W3C模型中: 總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
在IE模型中: 總寬度 = margin-left + width + margin-right
在CSS3中引入了box-sizing屬性, 它可以允許改變預設的CSS盒模型對元素寬高的計算方式.
共包括兩個選項：
content-box：標準盒模型，CSS定義的寬高只包含content的寬高。（預設）
border-box：IE盒模型，CSS定義的寬高包括了content，padding和border
執行個體：
(con1設定為box-sizing：border-box，con為預設的content-box)
<head lang="en"> <meta charset="UTF-8"> <title></title> <style> .con{width: 100px; height: 100px;background-color:royalblue; border:1px solid red; padding: 10px;} .con1{box-sizing: border-box;} </style> </head> <body> <p class="con"></p> <p class="con con1"></p> </body>
在控制台可以一目瞭然的看出兩個盒子的區別
第一個p的盒子模型如下：content-box
第二個p的盒子模型如下：border-box
以上就是小編為大家帶來的css3 盒模型以及box-sizing屬性全面瞭解的全部內容了，希望對大家有所協助，多多支援topic.alibabacloud.com~
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
