---

提示：以下是本篇文章正文内容，下面案例可供参考

一、熟记

1.结构伪类选择器

:nth-child(公式)

2.伪元素选择器

div::before {content: "before 伪元素";
}
div::after {content: "after 伪元素";
}

必须设置 content: ””属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可

3.盒子模型

• 内容区域 – width & height
• 内边距 – padding（出现在内容与盒子边缘之间）
• 边框线 – border
• 外边距 – margin（出现在盒子外面）

div {margin: 50px;border: 5px solid brown;padding: 20px;width: 200px;height: 200px;background-color: pink;
}

4.居中对齐（重中之重！！！）

1. 行内和行内块元素水平居中对齐，给块级的父元素添加 tac (text-aline:center)
2. 块级元素水平居中对齐： 让盒子的左右外边距设置为 auto 就可以了。 margin: auto;

5.清除默认样式

/* 清除默认内外边距 */
* {margin: 0;padding: 0;box-sizing: border-box;
}
/* 清除列表项目符号 */
li {list-style: none;
}

6.元素溢出（滚动条）

作用：控制溢出元素的内容的显示方式。

属性名：overflow

7.行内元素 – 内外边距问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置
解决方法：给行内元素添加 line-height 可以改变垂直位置

span {/* margin 和 padding 属性，无法改变垂直位置 */margin: 50px;padding: 20px;/* 行高可以改变垂直位置 */line-height: 100px;
}

8.圆角

正圆形状：

img {width: 200px;height: 200px;border-radius: 100px;border-radius: 50%;
}

胶囊形状：

div {width: 200px;height: 80px;background-color: orange;border-radius: 40px;
}

9 .盒子阴影（拓展）

div {width: 200px;height: 80px;background-color: orange;属性值：X 轴偏移量  Y 轴偏移量  模糊半径  扩散半径  颜色  内外阴影box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}

二、页面布局

1.标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

2.flex布局

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

1）设置方式

给父元素设置 display: flex，子元素可以自动挤压或拉伸

2）组成部分

• 弹性容器
• 弹性盒子
• 主轴：默认在水平方向
• 侧轴 / 交叉轴：默认在垂直方向

3）主轴对齐方式 justify-content

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

justify-content: center;

4）测轴对齐方式

• align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
• align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

5）.flex布局 弹性盒子换行flex-wrap

属性名：flex-wrap

属性值

• wrap：换行
• nowrap：不换行（默认）

6）多行对齐方式

如果有多行侧轴对齐，则去找align-content如果是单行侧轴对齐，则去找 align-items

7） 修改主轴方向

属性名：flex-direction

---

总结

累shu我嘞~~~