✔️CSS基础++

✔️CSS基础++

标准流

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

打破标准：浮动 （了解） Flex布局

浮动

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

属性名：float

属性值： left / 左对齐 right / 右对齐

特点：

• 浮动后的盒子 顶 对齐

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

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

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

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

浮动本质是实现 图文混排 效果

清除浮动

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

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

额外标签法

额外标签法：在父元素内容的最后添加一个块级元素，设置CSS属性 clear：both

单伪元素法

1. 准备 after 伪元素

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

2. 父级使用 clearfix 类

<div class="father clearfix"></div>

双伪元素法（推荐）

1. 准备 after 和 before 伪元素

/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

/* after 清除浮动 */
.clearfix::after {
  clear: both;
}

2. 父级使用 clearfix 类

<div class="father clearfix"></div>

overfow法

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

.father {
    ......
    overrflow:hidden;
}

Flex布局（重点）

认识：

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

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

Flex组成

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

组成部分：

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

描述	属性
创建flex容器	display：flex
主轴对齐方式	justify-content
侧轴对齐方式	align-items
弹性盒子换行	flex-wrap
某个弹性盒子侧轴对齐方式	align-self
修改主轴方向	flex-direction
弹性伸缩比	flex
行对齐方式	align-content

主轴对齐方式

属性名：justify-content

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从 终点 开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空间间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空间间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

.gaoxv{
    display:flex;
    justify-content:space-between;
}

侧轴对齐方式

属性名：

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

属性值	效果
stretch	弹性盒子沿着侧轴线被 拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center	弹性盒子沿侧轴 居中 排列
flex-start	弹性盒子从 起点 开始依次排列
flex-end	弹性盒子从 终点 开始依次排列

盒子水平和垂直居中的写法

 <style>
    .father {
      /* 利用flex实现 */
      display: flex;
      /* 主轴水平居中 */
      justify-content: center;
      /* 侧轴水平居中 */
      align-items: center;
      width: 300px;
      height: 300px;
      background-color: pink;
    }

    .son {
      width: 200px;
      height: 200px;
      background-color: purple;
    }
</style>

<div class="father">
   <div class="son"></div>
</div>

弹性盒子换行

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

属性名：flex-wrap

属性值：

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

行对齐方式

align-items操纵单行 ， align-content操纵多行

属性名：align-content

属性值	效果
flex-start	默认值，弹性盒子从 起点 开始依次排列
flex-end	弹性盒子从 终点 开始依次排列
center	弹性盒子沿主轴 居中 排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

修改主轴方向

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

属性名： flex-direction

属性值	效果
row	水平方向，从左向右（默认）
column	垂直方向，从上向下
row-reverse	水平方向，从右向左
column-reverse	垂直方向，从下向上

弹性伸缩比

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

属性名：flex

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

wx🎇VueMaker