专栏链接 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文章来源：https://www.toymoban.com/news/detail-666495.html
属性值
| 属性 | 效果 |
|---|---|
| flex-start | 默认值，弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
| center | 弹性盒子沿主轴剧中排列 |
| space-between | 弹性盒子沿主轴均匀排列，空白间距均匀分布在弹性盒子之间 |
| space-around | 弹性盒子沿主轴均匀排列，空白间距均匀分布在弹性盒子两侧 |
| space-evenly | 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 |
注意
行对其方式堆单行弹性盒子不生效文章来源地址https://www.toymoban.com/news/detail-666495.html
到了这里，关于HTML详解连载（8）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
