【前端自学之路】CSS之盒子模型

盒子模型是CSS技术中的一种思维模式。

CSS在渲染HTML元素的时候,把每个元素当作现实生活中的一个盒子来处理,它具有内容、边框、内边距、外边距属性,所有的CSS盒子都具有这些属性。

下图就是chrome浏览器对盒子模型的一个图示:

CSS盒子模型

1
2
3
4
5
6
蓝色部分   标识内容宽度和高度
墨绿色部分 标识内边距 padding
米黄色部分 标识边框 border
淡红色部分 标识外边距 border

所以这个看起来就像一个矩形盒子一样

下面我们来看下这些属性:

1
2
3
4
5
6
7
w3c标准下:

width: 100px; 这个宽度标识 内容宽度+左内边距+右内边距+左边框+右边框
height: 100px; 这个高度标识 内容高度+上内边距+下内边距+上边框+下边框
padding: 10px;
border: 1px solid #f00;
margin: 10px;

我们来总结下:盒子模型就像一个盒子一样,CSS赋予每个元素盒子属性,包括内容、边框、内边距、外边距等

坚持原创技术分享,您的支持将鼓励我继续创作!