最全CSS各种布局详解

最新推荐文章于 2024-05-14 18:25:49 发布

luckyone906

最新推荐文章于 2024-05-14 18:25:49 发布

阅读量1.3k

点赞数

分类专栏：互联网

互联网专栏收录该内容

44 篇文章 1 订阅

订阅专栏

一、单列布局的实现

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>

luckyone906

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
最全CSS各种布局详解

一、单列布局的实现1、单列布局中最常用的水平居中的四种方法同时设置父元素和子元素的样式：父元素使用text-align实现，子元素使用inline-block。这里宽高背景只是为了展示。 .parent{ text-align: center; } .child{ display: inline-block; width: 10...
复制链接

扫一扫