前端笔记-盒子模型

盒子模型（CSS重点）

width 元素宽度

用来给元素设置宽度

注意：只有块元素（block）或者行内块（inline-block）元素才能设置

width: 100px;

height 元素高度

用来给元素设置高度

注意：只有块元素（block）或者行内块（inline-block）元素才能设置

height: 100px;

盒子边框（border）

边框就是外皮。例如：橘子皮，柚子皮

border : border-width || border-style || border-color

边框属性-设置边框样式（border-style）

none：没有边框及忽略所有边框的宽度（默认值）

solid：边框为单实线（最常用）

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线

上边框：border-top；下边框：border-bottom；

padding（内边距）

设置内边距，是指边框与内容之间的距离。

上内边距：padding-top；下内边距：padding-bottom；

1个参数：四个方向

2个参数：第一个为上下内边距；第二个为左右内边距

3个参数：上；左右；下

4个参数：上；右；下；左

应用：调整文本位置

margin（外边距）

可以让一个盒子实现水平居中，需要满足2个条件：

1.必须是块元素

2.盒子必须制定了宽度

同级盒子：

两个盒子位置为上下：距离取最大值

两个盒子位置为左右：距离相加

应用：调整位置，居中（盒子在父