HTML详解连载（8）

HTML详解连载（8）

下面进行专栏介绍

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

开始喽

在这里插入图片描述

浮动-产品区域布局

清除浮动

场景

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

解决方法

清除浮动（带来的影响）

清除浮动

方法一：额外标签发

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

属性值

弹性伸缩比

作用

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

属性名

flex

属性值

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

弹性盒子换行

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

属性名

flex-wrap

属性值

行对齐方式

属性名

align-content

属性值

注意

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