盒子模型就是吧HTML页面中的布局元素看作是一个矩形盒子,也就是一个承装内容的容器。
CSS盒子模型的本质就是一个盒子,封装周围的HTML元素,它包括:边距(border)、外边距(margin)、内边距(padding)和实际内容(content)。
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细、边框样式、边框颜色。
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框样式 |
border-color | 边框颜色 |
border | 复合写法,没有固定顺序 |
border-top | 上边框复合写法 |
border-bottom | 下边框复合写法 |
border-right | 右边框复合写法 |
border-left | 左边框复合写法 |
border-collapse | 合并相邻的边框 |
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
- 定义隐藏边框边框会影响盒子的实际大小
边框会额外增加盒子的实际大小。因此我们有两种解决方案:
padding 用于设置内边距,即边框与内容之间的距离。
属性 | 作用 |
---|---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
padding:5px | 一个值,上下左右内边距都有5像素 |
padding:5px 10px | 两个值,上下内边距是5像素,左右内边距是10像素 |
padding:5px 10px 20px | 三个值,上内边距5像素,左右内边距10像素 下内边距20像素 |
padding:5px 10px 20px 30px | 四个值,上5像素 右10像素 下20像素 左30像素 顺时针 |
内边距会影响盒子的实际大小
当我们给盒子指定 padding 值后,发生了两件事:
也就是说,如果盒子已经有了宽度和高度,此时再指定内边距,会撑大盒子。
解决方案
如果保证盒子跟效果图大小保持一致,则让 width/height 减去多出来的内边距大小即可
如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小
margin 属性用于设置外边距,即控制盒子和盒子之间的距离。
属性 | 作用 |
---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
maigin 的复合写法和 padding 完全一致。