等分布局-CSDN博客

本文链接：https://blog.csdn.net/qq_43218276/article/details/114607812

等分布局

含义：等分布局就是指一行被分为若干行，每一列的宽度是相同的值；

利用float
利用table
利用flex

1.利用float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        /* clearfix进行清浮动的封装 => 公用代码*/
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }

        #parent {
            border: 10px solid red;
            padding:30px;
            /*经典问题之，子元素浮动导致父元素高度塌陷*/
            /*解决：1.手动给父元素加一个高度，但是固定是死的/
            /*解决：2.overflow：hidden = > BFC 特点：那浮动高度计算拿进去 缺点：overflow：hidden是溢出隐藏的意思 如果内容里有下拉框，则会把下拉框一起隐藏*/
            /*解决：3.clearboth 清除浮动 = > 在所有浮动子元素的末尾添加块级元素 <div style="clear：both"> </div>  有点：比较简单 缺点：页面上有很多空的div，增加了太多无意义的标签*/
            /*解决：4.利用伪元素::after   => clearfix 公用类名 = 直接在HTML中进行调用（最常用） 有点：随处调用  缺点：为元素添加可能导致兼容性问题ie: 6;
                    .clearfix::after{
                    content: '';
                    display: block;
                    clear: both;
                    三个条件缺一不可
                    }*/
            
        }

        .col1,
        .col2,
        .col3,
        .col4 {
        height: 300px; 
        /*等分 = float 100%/4*/
        width: 25%;
        float: left;
        }

        .col1{background-color:hotpink}
        .col2{background-color:rgb(105, 220, 255)}
        .col3{background-color:rgb(21, 255, 33)}
        .col4{background-color:rgb(203, 255, 13)}

    </style>
</head>
<body>
    <!-- 作为父级容器 -->
    <div id="parent" class="clearfix">
        <div class="col1"></div>
        <div class="col2"></div>
        <div class="col3"></div>
        <div class="col4"></div>
    </div>
</body>
</html>

经典问题之，子元素浮动导致父元素高度塌陷：

解决：1.手动给父元素加一个高度，但是固定是死的
解决：2.overflow：hidden = > BFC 特点：那浮动高度计算拿进去缺点：overflow：hidden是溢出隐藏的意思如果内容里有下拉框，则会把下拉框一起隐藏
解决：3.clearboth 清除浮动 = > 在所有浮动子元素的末尾添加块级元素

有点：比较简单缺点：页面上有很多空的div，增加了太多无意义的标签
解决：4.利用伪元素::after => clearfix 公用类名 = 直接在HTML中进行调用（最常用）有点：随处调用缺点：为元素添加可能导致兼容性问题ie: 6;
```
          .clearfix::after{
              content: '';
              display: block;
              clear: both;
              三个条件缺一不可
          }
```

2.利用table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        /* clearfix进行清浮动的封装 => 公用代码*/
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }

        #parent {
            border: 10px solid red;
            padding:30px;
            /*经典问题之，子元素浮动导致父元素高度塌陷*/
            /*解决：1.手动给父元素加一个高度，但是固定是死的/
            /*解决：2.overflow：hidden = > BFC 特点：那浮动高度计算拿进去 缺点：overflow：hidden是溢出隐藏的意思 如果内容里有下拉框，则会把下拉框一起隐藏*/
            /*解决：3.clearboth 清除浮动 = > 在所有浮动子元素的末尾添加块级元素 <div style="clear：both"> </div>  有点：比较简单 缺点：页面上有很多空的div，增加了太多无意义的标签*/
            /*解决：4.利用伪元素::after   => clearfix 公用类名 = 直接在HTML中进行调用（最常用） 有点：随处调用  缺点：为元素添加可能导致兼容性问题ie: 6;
                    .clearfix::after{
                    content: '';
                    display: block;
                    clear: both;
                    三个条件缺一不可
                    }*/
            
        }

        .col1,
        .col2,
        .col3,
        .col4 {
        /*问题：*/
        height: 300px; 
        /*等分 = float 100%/4*/
        width: 25%;
        float: left;
        }

        .col1{background-color:hotpink}
        .col2{background-color:rgb(105, 220, 255)}
        .col3{background-color:rgb(21, 255, 33)}
        .col4{background-color:rgb(203, 255, 13)}

    </style>
</head>
<body>
    <!-- 作为父级容器 -->
    <div id="parent" class="clearfix">
        <div class="col1"></div>
        <div class="col2"></div>
        <div class="col3"></div>
        <div class="col4"></div>
    </div>
</body>
</html>

3.利用flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>等分布局解决方法二table+table-cell</title>
    <style>
        /*优点：移动端用的比较广泛 缺点：pc端有的会出现不兼容的问题*/
        *{margin: 0;padding: 0;}
        /* clearfix进行清浮动的封装 => 公用代码*/

        #parent {
            /*   给父元素加flex子元素排列 = 水平排列  */
            display: flex;
            width: 100%;
        }

        .col1,
        .col2,
        .col3,
        .col4 {            

            height: 300px; 
            flex: 1;/*四个容器每个容器占一等分前面也有用到的，表示意思是自动计算应该站多大空*/
        }

        .col1{background-color:hotpink}
        .col2{background-color:rgb(105, 220, 255)}
        .col3{background-color:rgb(21, 255, 33)}
        .col4{background-color:rgb(203, 255, 13)}

    </style>
</head>
<body>
    <!-- 作为父级容器 -->
    <div id="parent">
        <div class="col1"></div>
        <div class="col2"></div>
        <div class="col3"></div>
        <div class="col4"></div>
    </div>
</body>
</html>

利用float出现的问题

增加了块间距后的代码段：

.col1,
.col2,
.col3,
.col4 {
/*问题：如果给子块加上间距的话则会导致一行不够分而导致有的块被挤掉*/
height: 300px; 
/*等分 = float 100%/4*/
width: 25%;
float: left;
margin-left: 10px;
}

效果：
在这里插入图片描述

之前的代码：

.col1,
.col2,
.col3,
.col4 {
height: 300px; 
/*等分 = float 100%/4*/
width: 25%;
float: left;
}

之前的效果：
在这里插入图片描述