HTML详解连载（8）

客官°小女子只卖身不卖艺 2023-10-14 18:49 33阅读 0赞

#### HTML详解连载（8） ####

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

## 专栏链接 [link][] ##

### 下面进行专栏介绍 ###

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

## 开始喽 ##

![在这里插入图片描述][ac3db430eb26450fa0c088cd8dcee9d4.png]

### 浮动-产品区域布局 ###

清除浮动

#### 场景 ####

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

### 解决方法 ###

清除浮动（带来的影响）

### 清除浮动 ###

#### 方法一：额外标签发 ####

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

#### 特点 ####

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

#### 清除浮动 ####

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

#### 拓展 ####

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

![在这里插入图片描述][f60f2cc469b54c569e081bf9811ffe58.png]

#### Flex-认识 ####

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

#### Flex-组成 ####

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

##### 组成部分： #####

弹性容器  
弹性盒子

##### 主轴：默认在水平方向 #####

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

flex——沿着主轴方向排列

#### Flex布局 ####

##### 属性名 #####

justify-content

##### 属性值 #####

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

![在这里插入图片描述][69ee19c5dbfa4a72a30df7416d6a4d5c.png]

#### 侧轴对齐方式 ####

##### 属性名 #####

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

##### 属性值 #####

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

#### 修改主轴方向 ####

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

##### 属性名 #####

flex-direction

##### 属性值 #####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>效果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>row</td> 
   <td>水平方向，从左向右（默认）</td> 
  </tr> 
  <tr> 
   <td>column</td> 
   <td>垂直方向，从上到下</td> 
  </tr> 
  <tr> 
   <td>row-reverse</td> 
   <td>水平方向，从右向左</td> 
  </tr> 
  <tr> 
   <td>column-reverse</td> 
   <td>垂直方向，从下到上</td> 
  </tr> 
 </tbody> 
</table>

#### 弹性伸缩比 ####

##### 作用 #####

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

##### 属性名 #####

flex

##### 属性值 #####

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

#### 弹性盒子换行 ####

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

##### 属性名 #####

flex-wrap

##### 属性值 #####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>效果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>wrap</td> 
   <td>黄行</td> 
  </tr> 
  <tr> 
   <td>nowrap</td> 
   <td>不换行（默认）</td> 
  </tr> 
 </tbody> 
</table>

#### 行对齐方式 ####

##### 属性名 #####

align-content

##### 属性值 #####

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

##### 注意 #####

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

[link]: http://t.csdn.cn/xF0H3
[ac3db430eb26450fa0c088cd8dcee9d4.png]: https://img-blog.csdnimg.cn/ac3db430eb26450fa0c088cd8dcee9d4.png
[f60f2cc469b54c569e081bf9811ffe58.png]: https://img-blog.csdnimg.cn/f60f2cc469b54c569e081bf9811ffe58.png
[69ee19c5dbfa4a72a30df7416d6a4d5c.png]: https://img-blog.csdnimg.cn/69ee19c5dbfa4a72a30df7416d6a4d5c.png