美文网首页Web 前端开发
最全CSS各种布局详解

最全CSS各种布局详解

作者: 楚王爷家的小哪吒 | 来源:发表于2017-05-26 21:03 被阅读0次

一、单列布局的实现

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>

相关文章

  • 最全CSS各种布局详解

    一、单列布局的实现 1、单列布局中最常用的水平居中的四种方法 同时设置父元素和子元素的样式:父元素使用text-a...

  • css flex布局详解

    css flex布局详解 css flex布局详解1css flex布局详解2

  • web前端基础案例-鼠标悬停图文切换效果

    效果知识点: html/css布局思维,定位,浮动详解,css3动画详解,css3选择器详解, 通用样式与封装,企...

  • CSS布局技巧总结

    目录 详解 CSS 七种三栏布局技巧 16种方法实现水平居中垂直居中 详解 CSS 七种三栏布局技巧 三栏布局,顾...

  • 前端学习过程中觉得好的文章

    CSS全屏布局的6种方式 史上最全Html和CSS布局技巧 安装vue.js的方法 国内有哪些公司在用Vue.js...

  • css3动画高级应用开发唱吧首页图片飞入效果

    知识点: html/css布局思维,定位、浮动详解,css3动画高级应用,过渡属性解析,js应用,企业布局思维运用...

  • CSS各种布局

    左右布局 1.两个div都设为inline-block。2.两个元素都float。3.一个元素float,设置外边...

  • 大前端完整学习路线(详解)

    大前端完整学习路线(详解) 第一阶段: HTML+CSS: HTML进阶、CSS进阶、div+css布局、HTML...

  • 前端学习路线

    大前端完整学习路线(详解) 第一阶段: HTML+CSS: HTML进阶、CSS进阶、div+css布局、HTML...

  • 详解CSS布局

    CSS页面布局允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。主要对...

网友评论

    本文标题:最全CSS各种布局详解

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