CSS基础知识10-两种CSS布局

最新推荐文章于 2021-04-20 20:43:38 发布

「已注销」

最新推荐文章于 2021-04-20 20:43:38 发布

阅读量81

点赞数

分类专栏： CSS+html+jquery 文章标签： css

本文链接：https://blog.csdn.net/weixin_45799003/article/details/115838982

版权

CSS+html+jquery 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

撩科学院视频课NICE!!!希望学得明白！

圣杯布局/双飞翼布局

功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。圣杯布局来源于In Search of the Holy Grail，而双飞翼布局来源于淘宝UED。

特点：两侧宽度固定，中间宽度自适应；中间部分在DOM结构上优先，以便先行渲染；允许三列中的任意一列成为最高列；只需要使用一个额外的<div>标签。

1.圣杯布局
1）HTML代码。

<body>
    <!--容器-->
    <div class="container">
        <div class="main">中间栏</div>
        <div class="left">左边栏</div>
        <div class="right">右边栏</div>
    </div>
</body>

2）使三个区域都处于左浮动状态，并使main的宽度成父容器的100%。

        body{
            margin: 0;
            padding: 0;
        }

        .container{
            /*设置最小宽度，针对PC端*/
            min-width: 400px;
            height: 200px;

            background-color: green;
            /*预留出位置*/
            padding: 0 200px;
        }

        .container .left, .right{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .container .main{
            width: 100%;
            height: 200px;
            background-color:blue;
            float: left;
        }

3）为两侧侧边栏添加负margin，用以调整位置，其中摆在左边的left的margin-left为-100%。而右边right的margin-left则为负的其自身的宽度。（利用了浮动元素的负margin到一定值后会使其自身往上一行移动的原理）

4）为class='container'的主容器设置左右padding值，使其为以后的侧边栏定位空出位置，padding的值为侧边栏的宽。
5）对left和right添加position：relative，然后对它们进行定位，移动到两侧，圣杯布局就初步做完了。

        .container .left{
            /*外边距向左边*/
            margin-left: -100%;
            /*相对定位，向左边定位为自身宽度*/
            position: relative;
            left: -200px;
        }

        .container .right{
            /*外边距为负的其自身的宽度*/
            margin-left: -200px;
            /*相对定位，向右，观察其实左右两边其实都是负数*/
            position: relative;
            right: -200px;
        }

2.双飞翼布局（响应式）
不仅能满足main处于优先加载的地位，而且更好的解决了圣杯布局的错乱问题，且css代码更简单，缺点是增加了一个标签。
1）给main里面添加一个内容标签content，并且设置它的左右margin值为左右侧边栏的宽度；
2）去掉main的背景色和高度；（这个没看懂！）

<body>
<!--容器-->
<div class="container">
    <div class="main">
        <div class="main-content">
            中间栏
        </div>
    </div>
    <div class="left">左边栏</div>
    <div class="right">右边栏</div>
</div>
</body>

    body {
        margin: 0;
        padding: 0;
    }

    .container {
        min-width: 400px;
        height: 200px;
        background-color: green;
    }

    .container .left,
    .right {
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
    }
    .container .main {
        width: 100%;
        height: 200px;
        background-color: blue;
        float: left;
    }

    .container .main .main-content {
        margin: 0 200px;
        /*左右侧边栏的宽度*/
    }

    .container .left {
        margin-left: -100%;
    }

    .container .right {
        margin-left: -200px;
    }

双飞翼会把中间栏挤没了，圣杯会有滚动条。

希望自己能够记住吧！多练习就好了！

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识10-两种CSS布局

撩科学院视频课NICE!!!希望学得明白！圣杯布局/双飞翼布局功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。圣杯布局来源于In Search of the Holy Grail，而双飞翼布局来源于淘宝UED。特点：两侧宽度固定，中间宽度自适应；中间部分在DOM结构上优先，以便先行渲染；允许三列中的任意一列成为最高列；只需要使用一个额外的<div>标签。1.圣杯布局1）HTML代码。<body>  &lt
复制链接

扫一扫

专栏目录