CSS3开发常用核心技能

基础网页布局

布局分类

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

一列布局:

二列布局:

三列布局:

<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
  • 负边距
  • 登高
  • 盒子模型
  • 清除浮动

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 11,574评论 1 91
  • 一、负边距在让元素产生偏移时和position: relative有什么区别? 负margin和position:...
    婷楼沐熙阅读 399评论 0 4
  • 三栏式布局 涉及浮动和清除浮动,主要讲解“圣杯”和“双飞翼”两种解决方法。这两种方法实现的都是三栏布局,两边的盒子...
    紫电倚青霜阅读 1,539评论 0 6
  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 6,687评论 3 30
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 2,141评论 0 58