【无标题】css盒模型

开发工具与关键技术：DW

作者：李煜昇

撰写时间：2022/4/8

盒模型里包含内容区、边框、内边距、外边距；内容区：盒子的内容，显示文本和图像

边框：边框周围的填充和内容。边框是受到盒子的背景颜色影响内边距：清除内容周围的区域。会受到框中填充的背景颜色影响外边距：清除边框区域。Margin 没有背景颜色，它是完全透明

 

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内

边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

内边距会撑大元素框的大小；

外边距拉开元素与元素之间的距离；

存在问题：margin上下叠压问题；

解决技巧：可以将某一元素方向设置成预想值，margin叠压会取最大的margin值；

当指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度。要知道，完

全大小的元素，还必须添加填充，边框和边距。

例如：给元素设置为宽度与高度100px，背景颜色为红色，边框5px、实线、黑色，内边距分别为上内边距50px、右内边距20px、下内边距10px、左内边距30px，外边距分别为上外边距50px，右外边距20px、下外边距10px、左外边距30px width: 100px; height: 100px;

background-color: red;

border: 5px solid black;

padding:50px 20px 10px 30px; margin: 50px 20px 10px 30px; 浏览器呈现的效果：

 

浏览器盒模型：

 

最终这个元素的宽和高不是100px，而是宽为160px，高为170px