HTML5前端第六章节

一.标准流，浮动，flex布局

1.标准流

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

2.浮动

（1）.作用：

让块元素水平排列

（2）.属性名：

float

（3）.属性值：

left（左对齐），right（右对齐）

  
div标签
  
div标签

（4）.特点：

①：顶部对齐

②：具备行内块显示模式的特点

③：浮动的盒子会脱离标准流的控制，具体还是要通过案例来理解这一特点

  
div标签
  
div标签

（5）.常用的布局模式：

（6）.浮动可能脱离标准流，这时我们就需要清除浮动

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

因此我们需要清除浮动，以消除浮动带来的影响

这是设置了高度，所以没有出现浮动脱标现象的案例：

以下是没有设置高度导致元素脱标的案例：

元素脱标后的解决方法：

①：额外标签法：

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

缺点：会增加额外的标签，页面结构变得更复杂

②：单伪元素法：

在父级元素中添加一个伪元素

③：双伪元素法（最推荐使用的方式）

在父级元素中添加两个伪元素

推荐的原因是：既解决了塌陷问题，又解决了元素脱标的问题

④：使用overflow

在父元素中添加CSS属性overflow:hidden

（7）.浮动总结：

①：浮动属性名为float，我们常用的属性值为left（左浮动），right（右浮动）

②：浮动后的盒子根据顶部对齐

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

④：父级宽度如果不够，那么浮动的子级会换行

⑤：浮动后的盒子会脱离标准流的控制

⑥：清除浮动有四种方法，分别为：双伪元素法（最推荐），单伪元素法，额外标签法和overflow法

⑦：浮动最初的作用是实现图文混排的效果

3.flex布局

概念：

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

优点：

flex模型不会产生浮动布局中脱离标准流的现象，布局网页更简单，更灵活

设置方式：

给父元素设置display:flex属性，之后子元素会自动挤压或者拉伸

在父级盒子中装入三个子级盒子：

  

    
1
    
2
    
3
  

使用浮动使得这三个盒子排列在同一行：

  

    
1
    
2
    
3
  

使用flex实现相同的效果：

  

    
1
    
2
    
3
  

flex相对于浮动的一个很明显的优点，不会脱离标准流的控制：

  

    
1
    
2
    
3
  

（1）.flex的各个属性：

①：display:flex：

创建flex容器

②：justify-content：

主轴对齐方式

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

③：align-items：

侧轴对齐方式

④：align-self：

单独控制某个弹性盒子的侧轴对齐方式（设置在弹性盒子中）

属性值：

stretch（弹性盒子沿着侧轴线被拉伸至铺满容器）

  

    
1
    
2
    
3
    
  

center（弹性盒子沿侧轴居中排列），flex-start（弹性盒子从起点开始依次排列），flex-end（弹性盒子从终点开始依次排列）

单独控制某子级盒子的侧轴对齐方式：

  

    
1
    
2
    
3
    
  

⑤：flex-direction：修改主轴方向

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

  

    
1
    
2
    
3
  

⑥：flex：

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸（按照比例分配父级盒子剩余空间）

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

  

    
1
    
2
    
3
  

⑦：flex-wrap：

弹性盒子换行

作用：因为弹性盒子可以自动挤压或拉伸，所以在默认情况下所有的弹性盒子都在一行显示，因此我们需要使用本属性控制弹性盒子中的子级元素换行

属性值：wrap（换行），nowrap（不换行）

  

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
  

⑧：align-content：

行对齐方式（对单行弹性盒子不会生效）

属性值：和主轴对齐方式的属性值的属性名以及效果都是相同的，flex-start，flex-end，center，space-between，space-around，space-evenly

（2）.flex的组成结构：

①：弹性容器

②：弹性盒子

弹性容器和弹性盒子的压缩与拉伸现象：

  

    
    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
  

③：主轴（默认在水平方向）

④：侧轴（又叫交叉轴，默认在垂直方向）