float、table、flex解决等分布局出现的问题及解决方案

最新推荐文章于 2024-01-29 14:42:49 发布

lochcol

最新推荐文章于 2024-01-29 14:42:49 发布

阅读量425

点赞数 1

文章标签： css html html5 css3

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

版权

float、table、flex解决等分布局出现的问题及解决方案

- 解决出现的问题

解决出现的问题

解决float出现的问题

问题一：如果给子块加上间距的话则会导致一行不够分而导致有的块被挤掉

盒子模型：box-sizing：
        content-box:盒子模型 width宽度 = width + padding-left/right + border-left/right
        border-box:怪异盒模型 width宽度 =width（padding+border已经计算进去了）
        margin 不影响盒子模型的大小 => 间距 / 位置移动

对问题一的解决.解决边框线方法一：添加box-sizing: border-box

问题二用盒子模型做出来了边距后出现了第一个模块的左边距有空隙

错误做法：这样虽然可以在视觉上欺骗自己，但是实际上最左边的模块要比其他的要大一点

 .col1:first-child{
        border: 0px;
    }

对问题二的解决：
解决方法一：整体往左边移动 - 间距隐藏起来

#parent{
    height: 300px;
    /*对问题二的解决：整体往左边移动 - 间距隐藏起来*/
    margin-left: -10px;
}

解决方法二：padding已经计算进了25%，padding是内容的一部分
解决后的代码块：

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

height: 300px; 
/*等分 = float 100%/4*/
width: 25%;
float: left;
/*解决方法二：padding已经计算进了25%，padding是内容的一部分*/
padding-left: 10px;
box-sizing: border-box;

}

解决后的代码块：

<!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>5.1等分布局利用float+盒子模型用padding解决（解决方法二）</title>
    <style>
        *{margin: 0;padding: 0;}

        /* clearfix进行清浮动的封装 => 公用代码*/
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }
        .parent-fix {
            overflow: hidden;
        }

        #parent{
            height: 300px;
            margin-left: -10px;

        }

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

        height: 300px; 
        /*等分 = float 100%/4*/
        width: 25%;
        float: left;
        /*解决方法二：padding已经计算进了25%，padding是内容的一部分*/
        padding-left: 10px;
        box-sizing: border-box;

        }


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

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

解决table出现的问题

问题 margin-left: -10px;导致右边不对齐了

问题：第一个模块如果去掉padding-left: 10px;会导致第一个模块直接消失了

解决方案：

/*解决右边又不对齐*/
        .parent-wrap {
            margin-left:-10px;
        }

解决的代码：
<!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>5.1等分布局利用float+盒子模型用padding解决（解决方法二）</title>
    <style>
        *{margin: 0;padding: 0;}


        /*解决右边又不对齐*/
        .parent-wrap {
            margin-left:-10px;
        }

        #parent{
            width: 100%;
            /*问题 margin-left: -10px;导致右边不对齐了 */
            /*table*/
            display:table;

        }


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

        /*td*/
        display:table-cell;

        height: 300px; 


        padding-left: 10px;
        /*内部计算 padding-left*/
        
        }
        /*问题：第一个模块如果去掉padding-left: 10px;会导致第一个模块直接消失了*/
        /* .col1{
            padding-left: 0px;
        } */

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

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

解决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>5.1等分布局利用float+盒子模型用padding解决（解决方法二）</title>
    <style>
        *{margin: 0;padding: 0;}


        /*解决右边又不对齐*/
        .parent-wrap {
            margin-left:-10px;
        }

        #parent{
            width: 100%;
            /*问题 margin-left: -10px;导致右边不对齐了 */
            /*table*/
            display:table;

        }


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

        /*td*/
        display:table-cell;

        height: 300px; 


        padding-left: 10px;
        /*内部计算 padding-left*/
        
        }
        /*问题：第一个模块如果去掉padding-left: 10px;会导致第一个模块直接消失了*/
        /* .col1{
            padding-left: 0px;
        } */

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

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