CSS3开发常用核心技能

2018-05-21 本文已影响3人 Junting

基础网页布局

布局分类

一列布局
两列布局
三列布局
多列布局

一列布局：

二列布局：

三列布局：

<div class="container">
    <div class="header">我是header</div>
    <div class="content">
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="middle">中间</div>
    </div>
    <div class="footer">我是footer</div>
</div>

        .content {
            min-height: 500px;
            height: auto;
            background-color: orange;
        }
        .content .left {
            float: left;
            width: 20%;
            height: 500px;
            background-color: orangered;
        }
        .container .right {
            float: right;
            width: 20%;
            height: 500px;
            background-color: yellow;
        }
        .container .middle {
            height: 500px;
            background-color: yellowgreen;
        }

⚠️ middle 写再最后，由于上面左右 div 是浮动的，所以 middle 就会浮上去；如果 middle 想先渲染出来，放到最开始，由于它是 block 块级元素，左右就会被挤下去；怎么办呢？下面就要使用到圣杯布局了。

将左右的背景颜色取消掉，你会发现左右是叠在 middle 上，这个时候middle 实际占比是100%，然后根据左右的的占比，自动计算出内容显示占比。

圣杯布局

圣杯布局的出现是为了解决：老套的布局必须按照源顺序（在 DOM 中表现为先写 Left，然后 Middle，最后，Right）等，它将可能导致代码不够灵活，尤其是从 DOM 的载入顺序上来说，中间的内容不能被首先加载。

圣杯布局实现套路

两边带有固定宽度中间可以流动（fluid）；
允许中间一栏最先出现；
允许任意一栏放在最上面；
仅需一个额外的 div 标签；（最外层加一个div 容器包裹）
仅需非常简单的 CSS，带上最少的兼容性补丁

利用上面的代码，将 Middle 放到第一位：

    <div class="content">
        <!-- 主要内容先渲染 -->
        <div class="middle">中间</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>

呈现效果：

想让左边的移动上来，也给 middle float 属性，然后再让left 左外边距 -100%;

    .content {
        min-height: 500px;
        height: auto;
        background-color: orange;
    }
    .content .left {
        float: left;
        width: 150px;
        height: 500px;
        background-color: orangered;
    }
    .container .right {
        float: right;
        width: 150px;
        height: 500px;
        background-color: yellow;
    }
    .container .middle {
        float: left;
        width: 100%;
        height: 500px;
        background-color: yellowgreen;
    }

理解下 margin-left ，设置与元素相关联的盒子模型的左外边距；

margin-left: 10px;  /* 绝对长度 */
margin-left: 1em;   /* 相对于字号的长度 */
margin-left: 5%;    /* 相对最近块元素的宽度 */

右也改造下

        .container .right {
            float: left;
            width: 150px;
            height: 500px;
            background-color: yellow;
            margin-left: -150px; 
        }

到这里是不是基本圣杯布局雏形就出来了，让人不省心的就是中间内容被被盖了，怎么办呢？

让最外部的父级容器承担左右栏的距离好让中间内容显示出来，这个就上面说的多加一个 div 的意思了。

image.png

通过 position 相对自己进行移动去填补预留空间

        .content .left {
            position: relative;
            left: -150px;
            float: left;
            width: 150px;
            height: 500px;
            margin-left: -100%;
            background-color: orangered;
        }
        .container .right {
            position: relative;
            left: 150px;
            float: left;
            width: 150px;
            height: 500px;
            background-color: yellow;
            margin-left: -150px;
        }

圣杯布局，你学会了没有～

双飞翼布局 + CSS HACK

双飞翼布局由早期圣杯布局演变而来，始创于淘宝UED，双飞翼布局由左中右三栏组合，如同一只鸟（左翼、身体、右翼）所以称为双飞翼布局。

圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。

不同在于解决"中间栏div内容不被遮挡"问题的思路不一样：

圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position:relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。多了1个div，少用大致4个css属性（圣杯布局中间div的padding-left和padding-right这2个属性，加上左右两个div用相对布局position:relative及对应的right和left共4个属性，一共6个：而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4）。

简单说起来就是双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了

其中使用

position
float
负边距
登高
盒子模型
清除浮动