css布局总结

作者: agamgn | 来源:发表于2019-12-29 17:16 被阅读0次

  前端布局是页面框架搭建最基础的一环,其布局知识繁杂,实现方式也是多种多样。所谓布局,就是将元素设置为我们想要的大小,放置到我们想要的位置。其中位置尺寸是核心两要素。

一、单列布局

常见的单列布局有两种:

  • header,content和footer等宽的单列布局
  • header与footer等宽,content略窄的单列布局


    单列布局.png

    实现方式:
    第一种方式:对header,content,footer统一设置width:1000px;然后设置margin:auto实现居中即可得到


    单列布局.png
    第二种方式:header、footer的内容宽度不设置,块级元素充满整个屏幕,但header、content和footer的内容区设置同一个width,并通过margin:auto实现居中
    单列布局2.png

二、两列布局

2.1float+overflow:hidden

        .parent1 {
            margin-bottom: 10px;
        }
        .left1 {
            float: left;
            height: 300px;
            width: 200px;
            background-color: limegreen
        }
        .right1 {
            overflow: hidden;
            height: 300px;
            background-color: lightsalmon;
        }
 <div class="parent1">
        <div class="left1">左</div>
        <div class="right1">右</div>
    </div>
两列布局.png

2.2Flex布局实现

<div class="parent2">
        <div class="left2">左</div>
        <div class="right2">右</div>
    </div>
  .parent2 {
            display: flex;
            height: 300px;
            margin-bottom: 10px;
        }

        .left2 {
            width: 200px;
            background-color: lightseagreen;
        }

        .right2 {
            flex: 1;
            background-color: #ddd;
        }
两列布局2.png

三、三栏布局

特征:中间列自适应,两侧固定
其中最常见的为圣杯布局和双飞翼布局

3.1圣杯布局

缺点:
①center部分的最小宽度不能小于left部分的宽度,否则会left部分掉到下一行
②如果其中一列内容高度拉长(如下图),其他两列的背景并不会自动填充。


圣杯布局

实现步骤:

①三部分都需要设置浮动,否则左右元素上不去,然后设置中间列的宽度为100% 步骤一.png
②通过设置margin-left为负值让left和right部分和content同一行(关于负值margin参考本篇文章)
步骤二.png
③通过设置父容器的padding,让左右两边留出间隙
步骤三.png

④通过设置定位,让left和right移动到两边


步骤四.png

3.2圣杯布局

缺点:多加一层 dom 树节点,增加渲染树生成的计算量。
实现步骤:

  • center部分增加一个内层div,并设margin: 0 200px;


    双飞翼布局.png

3.3双飞翼布局和圣杯布局的对比

相同点:

  • 都是把主列放在文档流最前面,使主列优先加载。
  • 在实现上也有相同之处,都是让三列浮动,然后通过负外边距形成三列布局。
    不同点:
  • 不同之处在于如何处理中间主列的位置:
    圣杯布局是利用父容器的左、右内边距+两个从列相对定位;
    双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

四、等高布局

定义:等高布局是指子元素在父元素中高度相等的布局方式

4.1padding+margin属性实现等高布局

实现方法:设置一个大数值的 padding-bottom,再设置相同数值的负的 margin-bottom,并在所有列外面加上一个容器,并设置 overflow:hidden 把溢出背景切掉。可以使用该方法完善圣杯布局的不足。

       .parent1 {
            overflow: hidden;
        }
        .left1,
        .right1 {
            width: 300px;
            float: left;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
        .left1 {
            background-color: #cccccc;
        }
        .right1 {
            background-color: #c9394a;
        }
 <div class="parent1">
        <div class="left1">left</div>
        <div class="right1">等高布局,padding+margin属性实现等高布局</div>
    </div>
等高布局.png

4.2通过display的属性table实现等高布局

兼容性不好,在ie6-7无法正常运行

        .parent {
            display: table;
        }

        .left,
        .right {
            width: 300px;
            display: table-cell;
        }

        .left {
            background-color: #c9394a;
        }

        .right {
            background-color: #cccccc;
        }
 <div class="parent">
        <div class="left">left</div>
        <div class="right">通过display的属性table实现等高布局
            通过display的属性table实现等高布局
            通过display的属性table实现等高布局
            通过display的属性table实现等高布局
        </div>
    </div>
等高布局1.png

五、粘连布局

定义:

  • 有一块内容<main>,当<main>的高康足够长的时候,紧跟在<main>后面的元素<footer>会跟在<main>元素的后面。
  • 当<main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer>元素能够“粘连”在屏幕的底部


    图.png

    实现步骤:
    ①footer是一个独立的结构
    ②parent区域的高度通过min-height,变为视口高度
    ③footer要使用margin为负来确定自己的位置
    ④在main区域需要设置padding-bottom,防止负margin导致footer覆盖实际的内容


    粘连布局.png

六、全屏布局

全屏布局就是上下定高满屏布局,常用于管理平台


全屏布局

七、flex布局

八、grid布局:

九、总结

代码地址

相关文章

  • 小程序CSS知识点

    一、flex布局Flex 布局教程:语法篇Flex 布局教程:实例篇 二、CSS position 属性总结CSS...

  • CSS经典布局

    CSS经典布局 本文主要对一些常见的CSS布局问题进行总结,涉及三栏布局、负margin、清除浮动、居中布局、Fl...

  • CSS布局(不完全)总结

    CSS布局(不完全)总结 实现水平居中布局的几种方式 方法一: 通过以下CSS代码实现水平居中布局 方法二: 通过...

  • web前端教程:CSS 布局十八般武艺都在这里了

    CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中、垂直居中方法,以及单...

  • css布局

    最近在学习css相关的知识,本文主要总结一些css布局相关的知识。 一、左右布局和左中右布局 左右布局和左中右布局...

  • CSS布局技巧

    最近学习了CSS的一些知识,下面总结一下我学到的CSS布局技巧 1.左右布局 (1). 浮动左右布局也叫横向布局,...

  • Css布局总结

    text-align规定该容器内部的行内元素相对于父级如何对齐,只对行内以及行内块元素有效。 居中 居中:居中分为...

  • css布局总结

    居中布局 水平居中 1)使用inline-block+text-align(1)原理、用法 原理:先将子框由块级元...

  • CSS布局总结

    关于文档流 理解好文档流,有助于我们对css中定位和浮动的理解。什么是文档流呢,经过我看过的一些文章,加入自己的理...

  • css布局总结

    自己在使用css来美化页面时,总会不由自主的用到bootstrap的样式,总是会把css和bootstrap混着用...

网友评论

    本文标题:css布局总结

    本文链接:https://www.haomeiwen.com/subject/hdvyoctx.html