CSS 第四天

目录

标准流(文档流)

浮动

清除浮动

方法一：额外标签法

方法二：单伪元素法

方法三：双伪元素法（推荐）

方法四：overflow

浮动 – 总结

Flex – 认识

Flex – 组成

主轴对齐方式

侧轴对齐方式

修改主轴方向

弹性伸缩比

弹性盒子换行

行对齐方式

---

标准流(文档流)

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

浮动

作用：让块级元素水平排列。

属性名： float

属性值

• left ：左对齐

• right ：右对齐

特点：

• 浮动后的盒子 顶 对齐

• 浮动后的盒子具备 行内块 特点

• 浮动后的盒子 脱标 ， 不占 用标准流的位置

清除浮动

场景：浮动元素会 脱标 ，如果 父级没有高度 ，子级 无法撑开父级高度 （可能导致页面布局错乱）

解决方法： 清除浮动 （清除浮动带来的影响）

方法一：额外标签法

• 在 父 元素 内容的最后 添加一个 空的块 级元素，设置 CSS 属性 clear: both

方法二：单伪元素法

.clearfix::after {
clear: both;
}

方法三：双伪元素法（推荐）

.clearfix::before,
.clearfix::after {
content: "";
display: table;
}

.clearfix::after {
content: "";
display: block;
clear: both;
}

方法四：overflow

• 父 元素添加 CSS 属性 overflow: hidden

浮动 – 总结

浮动属性 float ， left 表示 左 浮动， right 表示 右 浮动

特点

1.

浮动后的盒子 顶 对齐

2.

浮动后的盒子具备 行内块 特点

3.

父级 宽度 不够，浮动的 子级 会 换行

4.

浮动后的盒子 脱标

清除浮动：子级浮动， 父级没有高度 ，子级 无法 撑开 父级高度 ，影响布局效果

拓展：浮动本质作用是实现 图文混排 效果

Flex – 认识

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

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

Flex – 组成

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

组成部分：

• 弹性容器                  （爸爸）

• 弹性盒子                  （儿子，沿着主轴方向排列 ）

• 主轴：默认在 水平 方向

• 侧轴 / 交叉轴：默认在 垂直 方向

主轴对齐方式

属性名： justify-content

• center

• space-between 

弹性盒子之间的间距相等          

• space-around

间距出现在弹性盒子两侧 

视觉效果：弹性盒子之间的间距是两端间距的2倍

• space-evenly

各个间距都相等

侧轴对齐方式

属性名

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

• align-self ：单独控制 某个 弹性盒子的侧轴对齐方式（给 弹性盒子 设置）

弹性盒子在侧轴方向没有尺寸才能拉伸

修改主轴方向

主轴 默认在水平方向 ，侧轴默认在垂直方向

属性名： flex-direction

属性值

弹性伸缩比

作用：控制 弹性盒子 的 主轴 方向的 尺寸 。

属性名： flex

属性值： 整数数字 ，表示占用父级 剩余 尺寸的 份数 。

默认情况下，主轴方向尺寸是靠内容撑开；侧轴默认拉伸

弹性盒子换行

弹性盒子可以 自动挤压或拉伸 ，默认情况下，所有弹性盒子都 在一行显示 。

属性名： flex-wrap

属性值

• wrap ：换行

• nowrap：不换行（默认）

行对齐方式

属性名： align-content

属性值     跟 主轴对齐方式的 属性值  一模一样

注意：该属性对 单行 弹性盒子模型 无效 。