2-css-4

一 标准流

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

二 浮动

1 认识

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

属性名：float

属性值

• left：左对齐
• right：右对齐

特点：

• 浮动后的盒子顶对齐
• 浮动后的盒子具备行内块特点
• 浮动后的盒子脱标，不占用标准流的位置

2 清除浮动

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

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

方法一：额外标签法

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

方法二：单伪元素法

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

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

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

方法四：overflow

父元素添加 CSS 属性 overflow: hidden

3 总结

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

• 特点

  1. 浮动后的盒子顶对齐
  2. 浮动后的盒子具备行内块特点
  3. 父级宽度不够，浮动的子级会换行
  4. 浮动后的盒子脱标

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

  1. 双伪元素法

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

三 Flex 布局

1 什么是弹性布局

主要解决某个元素中内部子元素的布局方式，为布局提供的非常大的灵活性和操控性
设置了display：flex的元素本身不是弹性布局
它的儿子们是弹性布局

2 弹性布局的专业术语

1. 弹性容器
   当一个元素设置了display:flex
   这个元素内部的子元素就按照弹性布局方式排列
   这个元素叫做弹性容器
2. 弹性项目
   当一个元素设置了display:flex
   这个元素内部的子元素就按照弹性布局方式排列
   这些子元素，叫做弹性项目
3. 主轴
   项目的排列方向，称为主轴
   x轴，主轴起点在左侧，主轴终点在右侧
   x轴，主轴起点在右侧，主轴终点在左侧
   y轴，主轴起点在顶部，主轴终点在底部
   y轴，主轴起点在底部，主轴终点在顶部
4. 交叉轴
   永远与主轴垂直相交的一根轴
   主轴可以设置，交叉轴不能设置，只会自动根据主轴方向改变

3 语法

display:
flex 经常用于让块级元素变为弹性容器
inline-flex; 经常用于让行内元素变为弹性容器
特点：

1. 当元素变为弹性容器之后，这个容器的text-align失效，内部项目不会执行水平对齐
2. 弹性项目，可以设置宽高
3. 项目的浮动，clear：both都失效
4. 总结：之前所有学习过的对齐方式，对于弹性项目都失效。弹性项目的对齐，取决于主轴、交叉轴

4 样式属性

容器的样式

所有项目都要用

1. 主轴方向（4根主轴）
   flex-direction:row; 默认值，主轴为x轴，主轴起点在左侧
   row-reverse 主轴为x，主轴起点在右侧
   column 主轴为y轴，主轴起点在顶部
   column-reverse 主轴为y轴，主轴起点在底部
2. 项目换行
   flex-wrap:nowrap;默认值，主轴方向空间不够也不换行，项目压缩
   wrap 主轴方向空间不够时，项目自动换行
   wrap-reverse; 交叉轴终点对齐，主轴方向空间不够时，反方向换行
3. 上面两个属性的缩写方式
   flex-flow:direction wrap;
4. 定义项目在主轴上的对齐方式
   justify-content:
   flex-start 默认值，主轴起点对齐
   center; 主轴的中心对齐
   flex-end 主轴的终点对齐
   space-around 每个项目的间隙相同
   space-between 两端对齐
5. 交叉轴上对齐方式 （2根）
   align-items
   flex-start 默认值。在交叉轴起点对齐
   center 交叉轴中间对齐
   flex-end 交叉轴终点对齐
   baseline 每个项目中的文本，基线要对齐
   stretch 项目在交叉轴方向上没有定义尺寸，项目将充满交叉轴

项目的样式

某一个项目使用

1. 给某个项目单独设置交叉轴上的对齐方式
   align-self
   flex-start 默认值。在交叉轴起点对齐
   center 交叉轴中间对齐
   flex-end 交叉轴终点对齐
   baseline 每个项目中的文本，基线要对齐
   stretch 项目在交叉轴方向上没有定义尺寸，项目将充满交叉轴
   auto 使用容器定义的align-items的值
2. 项目在主轴上的排列顺序 order
   取值为无单位整数
   定义项目的排列顺序，值越小，越靠近主轴起点，默认值为0
3. flex-grow
   当主轴有多余的区域，项目是否放大，放大比例是多少
   默认值为0，不放大
   把多余的区域，按照比例分配，加上原始的尺寸，就是每个项目的实际尺寸
4. flex-shrink
   当弹性布局设置主轴不可换行，当主轴空间不够，项目们会自动收缩主轴方向上的尺寸
   flex-shrink用来设置项目收缩时的大小
   把整个主轴方向压缩的尺寸分为n份，设置每个项目具体被压缩几份
   flex-shrink：取值为数字，默认值为1，取值为0是不许压缩
5. flex-basis
   设置某个项目在主轴上占据的基本尺寸，通常取值为%
   flex-basis优先级大于项目自己定义的尺寸
   一般不给图片设置此尺寸
6. flex-grow flex-shrink flex-basis的缩写
   项目具体被压缩几份
   flex-shrink：取值为数字，默认值为1，取值为0是不许压缩
7. flex-basis
   设置某个项目在主轴上占据的基本尺寸，通常取值为%
   flex-basis优先级大于项目自己定义的尺寸
   一般不给图片设置此尺寸
8. flex-grow flex-shrink flex-basis的缩写
   flex:0 0 20%;