CSS布局-CSDN博客

左右布局

对两边侧栏分别设置宽度，并对左侧栏添加左浮动，对右侧栏添加有浮动。

    <style>
        .left{
            width:200px;
            height:auto;
            float: left;
        }
        .right{
            width: 200px;
            height: auto;
            float: right;
        }
    </style>

    <div class="left">我在左边</div>
    <div class="right">我在右边</div>
复制代码

浮动元素的父级记得要清除浮动

    .clearfix::after{content:'';display:block;clear:both;}
复制代码

左中右布局

在 .container 中设置 position:relative;，其作用是使得后面的绝对定位的基准为 .container 而不是以浏览器为其准。
左侧列 .left_side 和右侧 .right_side 列采用绝对定位，并且固定这两个 div的宽度，而中间列 .content 由于需要根据浏览器自动调整，因此不设置类似属性。
但由于另外两个块的 position 属性设置为 absolute，此时必须将它的 margin-left 和 margin-right 属性都设置为 190px。

    <style>
        .container{  
            position:relative;  
            margin:20px;  
            height:400px;  
        }  
        .left_side{  
            position:absolute;  
            top:0px;  
            left:0px;  
            background: red;  
            width:170px;  
            height:100%;  
        }  
        .content{  
            margin:0px 190px;  
            background: green;  
            height:100%;  
        }  
        .right_side{  
            position:absolute;  
            top:0px;  
            right:0px;  
            background: palevioletred;  
            width:170px;  
            height:100%;  
        }  
    </srtle>

    <div class="container">  
        <div class="left_side">left_side</div>  
        <div class="content">content</div>  
        <div class="right_side">right-side</div>  
    </div>   
复制代码

水平居中

水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式（注：small元素的对齐操作，small元素的父容器是 big元素）

使用 inline-block 和 text-align 实现

    .big{text-align: center;}
    .small{display: inline-block;}
复制代码

使用margin:0 auto来实现

    .small{width:200px;margin:0 auto;}
复制代码

使用绝对定位实现（然后margin-left的负值为盒子宽度的一半，不过这样就必须知道盒子的宽度）

    .big{position:relative;height:400px; background:blue;}
    .small{
        position:absolute;
        left:50%;
        width:200px;
        height:100%;  
        background: red;  
        margin-left: -100px;
      }
复制代码

垂直居中

垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。

父元素一定，子元素为单行内联文本：设置父元素的 height 等于行高 line-height;

    .big{height:60px;background: red;line-height: 60px;}
复制代码

父元素一定，子元素为多行内联文本：设置父元素的 display:table-cell 或 inline-block，再设置 vertical-align:middle;

    .big{
        display:inline-block;
        vertical-align:middle;
        line-height:60px;
        background: red;
    }
复制代码

利用绝对定位实现

    .big{position:relative;}
    .small{positon:absolute;top:25%;transform:translate(0,-50%);}
复制代码

通用方案: flex布局，给父元素设置 display:flex; align-items:center;

    .big{display:flex;align-items:center;height: 60px;background: red}
复制代码

多列等分布局

多列等分布局常出现在内容中，多数为功能的，同阶级内容的并排显示等。

    <style>
        .small{
            float:left;
            width:25%;
            box-sizing:border-box;
            border: 1px solid yellowgreen;
        }
    </style>

    <div class="big"> 
        <div class="small">苹果</div> 
        <div class="small">香蕉</div>
        <div class="small">西瓜</div>
        <div class="small">草莓</div> 
    </div>
复制代码

九宫格布局

HTML

    <div class="big">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul>
            <li></li>
            <li></>
            <li></>
        </ul>
    </div> 
复制代码

    <style>
        .big{
             display: flex; 
             flex-direction: column;
             width: 300px;
        }
        ul{
             height: 100px; 
             display: flex;
             list-style: none;
             padding: 0; 
             margin: 0;
        }
        li{
             width: 100px;
             background-color:greenyellow;
             border: 1px solid skyblue;
         }
    </style>
复制代码

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效，它的所有子元素自动成为容器成员；
flex-direction 容器内项目的排列方向(默认横向排列)；
column 主轴为垂直方向，起点在上沿；