您现在的位置是:首页 > 文章列表 > Html + CSS > 详细的CSS布局指南

详细的CSS布局指南

linds 2020-08-08 17:24 167人围观
简介 在我们前端开发过程中,写css(包括sass,less,stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而其中,关于页面布局的部分,又是书写样式代码时候的重点和难...

在开始正题之前,有一点要说明:css布局中遇到的一个绕不开的问题就是浏览器兼容性,下面方案会遇到类似transform, flex等的兼容性问题,且由于grid布局兼容性问题,暂不涉及grid布局内容,在不同场景,大家选择合适的布局实现方案即可。

1. 居中相关的布局

1.1 水平居中布局

效果图如下:

v2-2378119184addccdda8b79bca036b831_720w.jpg

方案一. inline-block + text-align

分析:display设置为inline-block的元素,具有文本元素的性质,其父元素可以通过设置文本对齐属性text-align来控制其在行内的对齐方式,text-align: center即为水平对齐

注意:text-align属性是具有继承性的,会导致自己元素内部的文本也是居中显示的,需要自身设置text-align覆盖

<style>
    .wrap {
        width: 100%;
        height: 200px;
        background-color: aqua;
        text-align: center;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        display: inline-block;
    }</style><body>
    <div class="wrap">
        <div class="content"></div>
    </div></body>

方案二. 定位 + transform

分析:父元素开启定位(relative,absolute,fixed都可以)后,子元素设置绝对定位absolute后,left设置为50%,再使用transform: translateX(-50%)将子元素往反方向移动自身宽度的50%,便完成水平居中。

注意:父级元素是否脱离文档流,不影响子元素水平居中效果,但是transformcss3属性,存在浏览器兼容问题

<style>
    .wrap {
        position: relative;
        width: 100%;
        height: 200px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }</style><body>
    <div class="wrap">
        <div class="content"></div>
    </div></body>


方案三. display: block + margin: 0 auto

分析:这个方法只需要对子元素进行设置就可以实现水平居中,margin设置auto表示浏览器会自动分配,实现来外边距等分效果。

注意:这里子元素设置displayblock或者table都是可以的,如果子元素脱离文档流(浮动,定位),会导致margin属性的值无效。

<style>
    .wrap {
        width: 100%;
        height: 200px;
        background-color: aqua;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        display: table;
        margin: 0 auto;
    }</style><body>
    <div class="wrap">
        <div class="content"></div>
    </div></body>

1.2 垂直居中布局

效果图如下:

v2-2378119184addccdda8b79bca036b831_720w.jpg

方案一. 定位 + transform

这种方案和之前水平居中布局的方案二是同样的原理,不在赘述

<style>
    .wrap {
        position: relative;
        width: 200px;
        height: 600px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }</style><body>
    <div class="wrap">
        <div class="content"></div>
    </div></body>

方案二. display: table-cell + vertical-align

分析:设置display: table-cell的元素具有td元素的行为,它的子元素布局方式类似文本元素,可以在父元素使用vertical-align: middle;实现子元素的垂直居中。

注意:vertical-align属性具有继承性,导致父元素内文本也是垂直居中显示的。

<style>
    .wrap {
        display: table-cell;
        vertical-align: middle;
        width: 200px;
        height: 600px;
        background-color: aqua;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }</style><body>
    <div class="wrap">
        <div class="content"></div>
    </div></body>


1.3 水平垂直居中布局

效果图如下:

v2-2378119184addccdda8b79bca036b831_720w.jpg

前面分别总结了一些水平居中和垂直居中的布局方式,那么进行水平垂直居中的布局,也就没什么特别要说的了,直接上代码:

方案一.定位 + transform

<style>
    .wrap {
        position: relative;
        width: 1200px;
        height: 800px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }</style><body>
    <div class="wrap">
        <div class="content"></div>
    </div></body>

方案二. 结合水平布局方案三,垂直布局方案二

<style>
    .wrap {
        display: table-cell;
        vertical-align: middle;
        width: 1200px;
        height: 800px;
        background-color: aqua;
    }
    .content {
        margin: 0 auto;
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }</style><body>
    <div class="wrap">
        <div class="content"></div>
    </div></body>

1.4 使用flex进行居中布局

分析:使用flex,水平垂直居中会变得非常容易,默认情况下,align-items: center垂直居中(交叉轴排列方式),justify-content: center水平居中(主轴排列方式) 注意:需要考虑浏览器兼容性问题。

<style>
     .wrap {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 1200px;
         height: 800px;
         background-color: aqua;
     }
     .content {
         width: 200px;
         height: 200px;
         background-color: blueviolet;
     }</style>
 <body>
     <div class="wrap">
         <div class="content"></div>
     </div>
 </body>

2. N列布局

2.1 两列布局

这里的两列布局指的是,其中一列是定宽元素,另一列元素宽度自适应。比如,我们实现做列定宽,右列自适应的布局。

效果图如下:

v2-2378119184addccdda8b79bca036b831_720w.jpg

方案一. 左边元素浮动,定宽,右边元素设置margin-left

分析:一个最简单的做法,左边元素设置浮动,定宽,右边元素的margin-left设置为左边元素宽度大小,可以实现效果。

注意:我们左边元素使用了浮动,但是右边元素没有浮动

<style>
    .l, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .r {
        background-color: blueviolet;
        margin-left: 400px;
    }</style><body>
    <div class="l">定宽</div>
    <div class="r">自适应</div></body>

方案二. 左边元素浮动,定宽,右边元素设置overflow:hidden

分析:右边元素由于设置overflow:hidden开启BFC,与外界隔离,所以能实现效果

注意:overflow:hidden的设置也使得右边元素内容超出隐藏。这里如果不设置overflow:hidden,右边元素的宽度是100%,有一部分被左边浮动元素盖住,不是我们要的结果,虽然看起来没什么区别。

<style>
    .l, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .r {
        background-color: blueviolet;
        overflow: hidden;
    }</style><body>
    <div class="l">定宽</div>
    <div class="r">自适应</div></body>

方案三.将左右元素用一个display:table的元素包裹,左右元素设置为display: table-cell

分析:这里主要是基于表格元素,在没有设置宽度时,会自动分配宽度来实现布局的。

注意:设置为表格后,在某些浏览器可能会受到表格本身特有行为的影响,比如表格边框等等。

<style>
    .w {
        display: table;
        table-layout: fixed;
        width: 100%;
    }
    .l, .r {
        display: table-cell;
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
    }
    .r {
        background-color: blueviolet;
    }</style><body>
    <div class="w">
        <div class="l">定宽</div>
        <div class="r">自适应</div>
    </div></body>

方案四. flex布局

分析:父容器采用flex布局,左边元素定宽之后,右边元素,因为只有一个,所以flex属性设置为不是0的正值(也就是设置flex-grow),都会占满剩余空间。

注意:依然是,注意兼容性问题。

 <style>
     .p {
         display: flex;
         height: 600px;
     }
     .l {
        background-color: aqua;
        width: 400px;
     }
     .r {
         flex: 1;
         background-color: blueviolet;
     }</style>
 <body>
     <div class="p">
         <div class="l">定宽</div>
         <div class="r">自适应</div>
     </div>
 </body>


阅读排行

本栏推荐

官方微信