HTML详解连载（8）

HTML详解连载（8）

• 专栏链接 [link](http://t.csdn.cn/xF0H3)
• • 下面进行专栏介绍
• 开始喽
• • 浮动-产品区域布局
  • • 场景
  • 解决方法
  • 清除浮动
  • • 方法一：额外标签发
    • 方法二：单伪元素法
    • 方法三：双伪元素法
    • 方法四：overflow
    • 浮动-总结
    • 特点
    • 清除浮动
    • 拓展
    • Flex-认识
    • Flex-组成
    • • 组成部分：
      • 主轴：默认在水平方向
      • 侧轴/交叉轴：默认在垂直方向
    • Flex布局
    • • 属性名
      • 属性值
    • 侧轴对齐方式
    • • 属性名
      • 属性值
    • 修改主轴方向
    • • 属性名
      • 属性值
    • 弹性伸缩比
    • • 作用
      • 属性名
      • 属性值
    • 弹性盒子换行
    • • 属性名
      • 属性值
    • 行对齐方式
    • • 属性名
      • 属性值
      • 注意

专栏链接 link

下面进行专栏介绍

本专栏是自己学前端的征程，纯手敲的代码，自己跟着黑马课程学习的，并加入一些自己的理解，对代码和笔记
进行适当修改。希望能对大家能有所帮助，同时也是请大家对我进行监督，对我写的代码进行建议，互相学习。

开始喽

浮动-产品区域布局

清除浮动

场景

浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度

解决方法

清除浮动（带来的影响）

清除浮动

方法一：额外标签发

在父元素内容的最后添加一个块级元素，设置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

浮动-总结

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

特点

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

清除浮动

子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果
双伪元素法

拓展

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

Flex-认识

flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。
flex模型不会产生浮动布局中脱标现象，布局网页更简单，更灵活

Flex-组成

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

组成部分：

弹性容器
弹性盒子

主轴：默认在水平方向

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

flex——沿着主轴方向排列

Flex布局

属性名

justify-content

属性值

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

侧轴对齐方式

属性名

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

属性值

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

修改主轴方向

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

属性名

flex-direction

属性值

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

弹性伸缩比

作用

控制弹性盒子的主轴方向的尺寸

属性名

flex

属性值

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

弹性盒子换行

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

属性名

flex-wrap

属性值

属性	效果
wrap	黄行
nowrap	不换行（默认）

行对齐方式

属性名

align-content

属性值

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

注意

行对其方式堆单行弹性盒子不生效