最全CSS各种布局详解

2023-05-16

一、单列布局的实现

1、单列布局中最常用的水平居中的四种方法

同时设置父元素和子元素的样式：父元素使用text-align实现，子元素使用inline-block。这里宽高背景只是为了展示。

 .parent{
        text-align: center;
    }
 .child{
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: aqua;
    }

使用margin:0 auto来实现，必须要设置一个width.

.child{
        margin: 0 auto;
        width: 100px;
        height: 100px;
        background-color: aqua;
    }

使用绝对定位，父元素使用相对，子元素绝对。

.parent{
        position: relative;
    }
.child{
        position: absolute;
        left: 50%;
    }

使用弹性盒flex布局实现
弹性盒是专为不同尺寸和不同设备的元素排布而设计的。父元素中使用block:flex设置一个弹性盒，子元素中flex:number设置该子元素占一行中的几份。

<style>
   .header{
       display: flex;
     }
   a{
       margin: 0 auto;
   }
    .A,.C{
        flex: 1;
    }
    .B{
        flex: 2;
    }
</style>
<body>
<div class="header">
    <a href="##" class="A">AA</a>
    <a href="##" class="B">BB</a>
    <a href="##" class="C">CC</a>
</div>
</body>

弹性盒几乎能实现目前存在的所有布局，它还有很多的内容在这里也详细说一下。

 flex-direction:定义了排布是按行还是列。
 justify-content:对于弹性项没有填满弹性容器的时候，它定义弹性项是怎么对齐的。

二、多列布局

1、多列布局的“双飞翼布局”，即左右固定，中间自适应，他可以利用margin-left为负数来实现，它的实现原理就是margin为负值可以改变float元素的排列位置。

<div class="main">
    <div class="main-content">main content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>


*{
        margin:0;
        padding: 0
    }
    .main{
        float: left;
        width: 100%;

    }
    .main .main-content{
        margin: 0 210px;
        background-color: rgba(33, 114, 214, 0.8);
        height: 500px
    }
    .left{
        width: 200px;
        float: left;
        background-color: rgba(255, 82, 0, 0.8);
        margin-left: -100%;
        height: 200px

    }
    .right{
        width: 200px;
        height: 200px;
        margin-left: -200px;
        float: left;
        background-color: rgba(90, 243, 151, 0.8);
    }

多列布局的“双飞翼布局”，也可以利用弹性盒实现，同样父元素设置display:flex, 子元素中左右固定栏设置为固定宽度，中间自适应部分设置flex:1.

<style>
    .parent{display:flex;}
    .left{
        width:100px;
        background-color: aqua;
    }
    .main{
        flex:1;
        background-color: red;
    }
    .right{
        width:100px;
        background-color: greenyellow;
    }
</style>
<div class="parent">
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</div>

2、真正的多列布局
借助margin为负值可以增加宽度的方式来进行多列布局。

<style>
.parent{
        margin:0 auto;
        width: 500px;
        border: 1px #ccc solid;
        margin-bottom: 20px;
}

.column{
    width:92px;
    height: 92px;
    background-color: #ccc;
    margin-bottom: 20px;
    float: left;
    margin-right: 10px;
}
</style>

<div class="parent">
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
</div>

同样我们也可以使用弹性盒布局

<style>
    .parent{display:flex;}
    .column{flex:1;}
    .column +.column{margin-left:20px;}
</style>
<body>
<div class="parent">
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
</div>
</body>

三、响应式布局

响应式布局在不同的大小的屏幕上如何做出不同的布局，视口指的是浏览器窗口的可视区域，视口大小决定了页面布局的可用宽度，我们可以使用meta标签设置设置布局宽度等于设备宽度,布局viewport等于度量viewport.

<meta name="viewport" content="width=device-width,initial-scale=1">

此时，页面布局的宽度就是你的设配的宽度。

使用媒体查询来实现响应设计（CSS3 media queries）

CSS3的media queries的模块扩展了@media的应用，不仅可以识别不同烦人媒体类型，还能识别媒体的特征——比如屏幕宽度，像素等参数。media queries语法：@media 媒体类型媒体识别条件表达式。

@media handheld, (min-width:700px) and (orientation:landscape){
    
}

当使用有显示屏的设备的时候：当最小宽度<700px,或者是横屏的时候执行代码。

在三栏布局中使用响应设计

.row{
        width: 960px;
    }
    .row:after{
        clear: left;
        content: '';
        /*清除浮动*/
        display: table;
    }
    [class^='col']{
        float: left;
    }
    .col1{
        width: 25%;
    }
    .col2{
        width: 50%;
    }
    .col3{
        width: 75%;
    }
    /** 屏幕设备宽度大于1200的时候，row宽度固定为1170px**/
    @media (min-width: 1200px) {
        .row{
            width:1170px
        }
    }
    /** 平板电脑的设置**/
    @media (min-width: 768px) and (max-width: 979px){
        .row{
            width:724px
        }
    }
    /** 横屏手机或者竖屏平板的所有列按行排列**/
    @media  (max-width:767px){
        [class^='col']{
            float:none;
            width: 100%;
        }
        .row{
            width: 100%;
        }
    }
    /** 竖屏手机**/
    @media (max-width: 480px){

    }
</style>
<body>
<div class="container">
    <div class="row">
        <div class="header">header</div>
    </div>
    <div class="row">
        <div class="col1">q</div>
        <div class="col2">w</div>
        <div class="col1">e</div>
    </div>
    <div class="row">
        <div class="footer">footer</div>
    </div>
</div>
</body>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)