使用CSS实现三栏自适应布局

最新推荐文章于 2022-06-29 12:36:35 发布

1planet

最新推荐文章于 2022-06-29 12:36:35 发布

阅读量283

点赞数

文章标签： css3 html5 javascript

本文链接：https://blog.csdn.net/qq_42239440/article/details/107201219

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 所谓三列自适应布局指的是两边定宽，中间block宽度自适应
        一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。 */


        /* -------------------------------------------------------------------- */
        /* 方法一：1).绝对定位法
        绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，
        后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，
        既可以使中间元素自适应屏幕宽度。 */
        /* 该法布局的好处，三个div顺序可以任意改变。不足是 因为绝对定位，所以如果页面上还有其他内容，
        top的值需要小心处理，最好能够对css样式进行一个初始化，就像在上面例子中加了一个标题，
        如果不对样式进行初始化，则两边和中间的值会对不齐。 
        另外，随着浏览器窗口缩小，小于200px的时候，会发生压缩。 */
        
        * {
            margin: 0;
            padding: 0;
        }
        /* #left,
        #right {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            position: absolute;
        }
        
        #left {
            left: 0;
        }
        
        #right {
            right: 0;
        }
        
        #center {
            margin: 0 200px;
            background-color: pink;
            height: 200px;
        } */
        /* // */



        /* 2).使用自身浮动法
        自身浮动法的原理就是使用对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，
        中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。 */
        /* 该布局法的好处是受外界影响小，但是不足是 三个元素的顺序，center一定要放在最后，
           这是和绝对定位不一样的地方，center占据文档流位置，所以一定要放在最后，
           左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被击倒下一行。 */
        /* #left,
        #right {
            width: 200px;
            height: 200px;
        }
        
        #left {
            float: left;
            background-color: red;
        }
        
        #right {
            float: right;
            background-color: pink;
        }
        
        #center {
            background-color: bisque;
            margin: 0 200px;
            height: 200px;
        } */



        /*  3). 圣杯布局
        圣杯布局的原理是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div，
        包含div需要设置float属性使其形成一个BFC，并设置宽度，
        并且这个宽度要和left块的margin负值进行配合。 */
        /* 该方法在网站布局中非常常见，也是面试常考点，优点是三栏相互关联，有一定的抗性。
        需要注意的是，布局中间部分一定要放在前面，左右顺序不限制。
        对于left快的margin负值一定要等于wrap的宽度。 */
        
        .container {
            /* 清除浮动带来的高度塌陷问题 */
            overflow: hidden;
        }
        
        #wrap,
        #left_margin,
        #right_margin {
            /* 让三个盒子浮动 */
            float: left;
            height: 300px;
        }
        
        #wrap {
            background-color: red;
            width: 100%;
        }
        
        #left_margin {
            width: 100px;
            background-color: #fff000;
            /* margin值是相对于父盒子而言的,所以让左盒子为-100% */
            margin-left: -100%;
        }
        
        #right_margin {
            width: 200px;
            background-color: aqua;
            margin-left: -200px;
        }
        
        #center {
            /* 根据左右盒子的宽度设置中间盒子的margin值,避免中间的盒子被遮盖 */
            margin: 0 200px 0 100px;
            background-color: cadetblue;
            height: 300px;
        }
        /* // */




        /* 方法四 css3新特性 flex布局 */
        /* 在外围包裹一层div，设置为display：flex；中间盒子设置flex：1；左右盒子不用设置浮动或者定位
        但是盒模型默认紧紧挨着，可以使用margin控制外边距。 */
        /* 注意： center一定要放到中间。 */
        
        #box {
            /* width: 100%; */
            background-color: pink;
            height: 100px;
            display: flex;
        }
        
        #left_box,
        #right_box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        #center_box {
            flex: 1;
            background-color: #fff000;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <!-- <h3>两边宽度固定，中间自适应</h3>
    <div id="left">左边</div>
    <div id="right">右边</div>
    <div id="center">中间</div> -->

    <h3>使用margin负值法进行布局</h3>
    <div class="container">
        <div id="wrap">
            <div id="center">center</div>
        </div>
        <div id="left_margin">left</div>
        <div id="right_margin">right</div>
    </div>




    <h3>flex弹性布局</h3>
    <div id="box">
        <div id="left_box">left</div>
        <div id="center_box">center</div>
        <div id="right_box">right</div>
    </div>
</body>

</html>