CSS盒子模型

本文主要是介绍CSS盒子模型，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

• 盒子模型组成
• 边框（border）
• 内边距（padding）
• 外边距（margin）

盒子模型组成

盒子模型就是吧HTML页面中的布局元素看作是一个矩形盒子，也就是一个承装内容的容器。

CSS盒子模型的本质就是一个盒子，封装周围的HTML元素，它包括：边距(border)、外边距(margin)、内边距(padding)和实际内容(content)。

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

边框（border）

border可以设置元素的边框。边框有三部分组成：边框宽度（粗细、边框样式、边框颜色。

border-style

• dotted - 定义点线边框
• dashed - 定义虚线边框
• solid - 定义实线边框
• double - 定义双边框
• groove - 定义 3D 坡口边框。效果取决于 border-color 值
• ridge - 定义 3D 脊线边框。效果取决于 border-color 值
• inset - 定义 3D inset 边框。效果取决于 border-color 值
• outset - 定义 3D outset 边框。效果取决于 border-color 值
• none - 定义无边框
• hidden - 定义隐藏边框

边框会影响盒子的实际大小

边框会额外增加盒子的实际大小。因此我们有两种解决方案：

1. 测量盒子的大小的时候，不测量边框。
2. 如果测量的时候包含了边框，则需要width/height减去边框宽度。

内边距（padding）

padding 用于设置内边距，即边框与内容之间的距离。

内边距会影响盒子的实际大小

当我们给盒子指定 padding 值后，发生了两件事：

1. 内容和边框有了距离，添加了内边距。
2. padding 影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子。

解决方案

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

外边距（margin）

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

maigin 的复合写法和 padding 完全一致。

这篇关于CSS盒子模型的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！