圣杯布局

圣杯特点：左右两个元素设置了定位，并设置位置值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
        * {padding: 0; margin: 0;}

        .box {
            height: 300px;
            padding-left: 200px;
            padding-right: 200px;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            /*
            浮动元素的 margin-left 值是相对于其父元素设置的。
            对于 .box 元素里面的 .center/.left/.right元素来说，
            父元素 .box 够放置时，三个元素是水平排的，排不下的要换行，
            对于 .left，水平位置放不下了，会被挤到第二行，此时设置的 margin-left: -100%，
            可以看成 .center，.left 在水平一行，但 .left 看不见，设置 margin-left:-100% 时，
            .left 的最左边会往左走，走的距离是 .box 宽度，故也是为什么 margin-left能使得元素上移原因
            */
            margin-left: -100%;
            background: pink;
            position: relative;
            left: -200px;  /*因为父元素的padding-left:200px，不设置box-sizing时，浮动元素只在父元素conent能*/
        }

        .center {
            float: left;
            width: 100%;
            height: 300px;
            background: aquamarine;
        }

        .right {
            float: right;
            width: 200px;
            height: 300px;
            /*
            不设置这个会换行，因为水平位置已经没有.right元素位置了（.box已占满水平位置）
            float元素的位置只会在父元素的width范围下排布，在.box元素没有设置box-sizing时，
            .right元素会在.box下方，且在.box的padding-right前显示。
            也就是.right的活动范围是在父元素的width内.
            */
            /*margin-left: -200px; 相当于往右走200px*/
            background: skyblue;
            position: relative;
            right: -200px; /*因为父元素padding-right:200px*/
        }

    </style>
</head>
<body>
<div class="box">
    <div class="center">center</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
</body>
</html>

 

 

 

posted @ 2021-05-17 18:04  し7709  阅读(71)  评论(0)    收藏  举报