【前端】CSS盒子模型

盒子模型组成

盒子模型有以下四个成员：

content(内容)
padding(内边距)
border(边框)
margin(外边距)

盒子模型 border

边框会影响盒子实际大小

边框属性

border-width：宽度
border-style：样式
- solid(实线)
- dashed(虚线)
- dotted(点线)
border-color：颜色

边框简写：

border: border-widtgh border-style border-color，没有顺序要求

边框分开写法

border-top
border-bottom
border-left
border-right

合并相邻边框：border-collapse: collapse

盒子模型 padding

padding会影响盒子实际大小

内边距属性

padding-left
padding-top
padding-right
padding-bottom

内边距简写

值的个数	效果
padding: 5px;	1 个值，代表上下左右
padding: 5px 10px;	2 个值，上下 5px，左右 10px
padding: 5px 10px 20px;	3 个值，上边距 5px，左右边距 10px，下边距 20px
padding: 5px 10px 15px 20px;	4 个值，上边距 5px，右边距 10px，下边距 15px，左边距 20px

padding 不会影响盒子的情况

不设置width/height的情况下，不会影响盒子没有设置的属性。

盒子模型 margin

外边距属性

margin-top
margin-right
margin-bottom
margin-left

外边距简写

值的个数	效果
margin: 5px;	1 个值，代表上下左右
margin: 5px 10px;	2 个值，上下 5px，左右 10px
margin: 5px 10px 20px;	3 个值，上边距 5px，左右边距 10px，下边距 20px
margin: 5px 10px 15px 20px;	4 个值，上边距 5px，右边距 10px，下边距 15px，左边距 20px

外边距应用场景

块元素水平居中：margin: 0 auto;

行内元素/行内块元素水平居中，给其父亲添加：text-align: center;

外边距注意点

相邻垂直外边距合并：只给一个元素添加外边距
嵌套垂直外边距塌陷：
给父元素添加上边框
给父元素添加上内边距
给父元素添加overflow: hidden;

内外边距注意事项

清除内外边距

清除网页元素自带的内外边距

1
2
3
4


* {
  margin: 0;
  padding: 0;
}

开发建议

行内元素一般只设置左右内外边距
块元素之间使用外边距
块元素内部使用内边距
取消列表原点：lisr-style: none;

圆角边框

圆角边框的作用是可以把盒子变成圆形

语法格式

border-radius: length;
length既可以是单位/px，也可以是百分比.
可以设置4个值，从左上角开始顺时针变化
length越大，弧度越大

盒子阴影

使用box-shadow属性为盒子添加阴影

语法格式

box-shadow: h-shadow v-shadow blur spread color inset;

属性值

值	描述
h-shadow	必需。水平阴影。允许负值
v-shadow	必需。垂直阴影。允许负值
blur	可选。模糊距离
spread	可选。阴影尺寸
color	可选。阴影颜色
inset	可选。将外部阴影(outset)改为内部阴影

注意事项

阴影默认 outset，但是不可以书写，否则失效
阴影不占位置，不影响其他元素布局

文字阴影

text-shadow: h-shadow v-shadow blur color;

相关属性的意义与盒子阴影一样