[Java小工匠]CSS盒子模型-概述

1、盒子型简介

在HTML文档中任何元素，都可以看作是一个盒子，因此理解盒子模型非常重要。一个盒子包含 盒子的内容、盒子内边距、盒子的边框、盒子的外边距。

image.png

最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

2、浏览器兼容性

W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
  IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。
解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。

3、内联元素与块元素

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。如果让行内元素变成块元素，通过将 display 属性设置为 block。还可以通过把 display 设置为 none，隐藏元素，不在文档流中占据空间。

4、CSS3 box-sizing

属性值content-box
width=内容区宽度
height=内容区高度

 .test1{
     box-sizing:content-box; 
     width:200px;  
     padding:10px; 
     border:15px solid #eee; 
}

image.png

属性值border-box
width=内容宽度+左填充+右填充+左边框+右边框
height=高度+顶部填充+底部填充+上边框+下边框

.test2{ 
    box-sizing:border-box; 
    width:200px;
    padding:10px; 
    border:15px solid #eee; 
}

image.png

---

如果读完觉得有收获的话，欢迎点赞、关注、加公众号【小工匠技术圈】

个人公众号，欢迎关注，查阅更多精彩历史！

image