zoukankan      html  css  js  c++  java
  • 页面布局

      1、三列布局,中间自适应

    <div class="container">  
            <div class="left"></div>   
            <div class="right"></div>
            <div class="center"></div>
        </div>
    *{
    margin:0;
    padding:0;
    }
    .container{
    min- 650px;
    80%;
    height: 1200px;
    margin:0 auto; //此处设置让包裹器自适应剧中
    background-color: aqua;
    position: relative;//此处设置让该容器作为触发bfc元素的父级,使子类始终在该包裹器内
    }
    .left{
    top:0;
    position: absolute;//触发bfc,脱离文档流,通过left或者right定位
    200px;
    height:100%;
    left:0;
    background-color: red;
    }
    .right{
    top:0;
    right:0;
    position: absolute;
    200px;
    height:100%;
    float: right;
    background-color: black;
    }
    .center{
    min- 200px;
    margin:0 210px;
    background-color: yellow;
    height:500px;
    }

       不足:如果顶部还有自适应高度的东西,如导航,则top的值难以确定.

      好处:三个div的位置可以随意替换.  这样可以实现优先展示中间区域的内容:先写中间区域的内容

      2、使用浮动

    <div class="container">  
                
            <div class="left"></div>   
            <div class="right"></div>
            <div class="center"></div>
        </div>
    *{
        margin:0;
        padding:0;
    }
    .container{
        min- 650px;
         80%;
        height: 1200px;
        margin:0 auto;    //此处设置让包裹器自适应剧中      
        background-color: aqua;
    }
    .left{
        float:left;
        200px;
        height:100%;
        left:0;
        background-color: red;
    }
    .right{
        float:right;
        200px;
        height:100%;
        float: right;
        background-color: black;
    }
    .center{
        min- 200px;
        margin:0 210px;
        background-color: yellow;
        height:500px;
    }

      不足:center必须写在最后

      3、圣杯模式

    圣杯布局的原理是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div,包含div需要设置float属性使其形成一个BFC,并设置宽度,并且这个宽度要和left块的margin负值进行配合

    <div class="container">  
            <div class="wrapper">
                <div class="center"></div>
            </div>
            <div class="left"></div>  
            <div class="right"></div>
        </div>
    *{
        margin:0;
        padding:0;
    }
    .container{
        min- 650px;
         80%;
        height: 1200px;
        margin:0 auto;    //此处设置让包裹器自适应剧中      
        background-color: aqua;
    }
    .wrapper{
         100%;
        height:100%;
        float:left;
    }
    .center{
        margin:0 210px;
        background-color: black;
        height: 100%;
    }
    .left{
        float:left;
        background-color: yellow;
        200px;
        height:100%;
        margin-left: -100%;
    }
    .right{
        float:left;
        background-color: yellow;
        200px;
        height:100%;
        margin-left: -200px;
    }

      center必须先写,然后left和right利用margin的负值实现布局;

      要点:对于left快的margin负值一定要等于wrap的宽度。

      4、css3新特性

    在外围包裹一层div,设置为display:flex;中间设置flex:1;但是盒模型默认紧紧挨着,可以使用margin控制外边距。

    <div id = "box">
             <div id = "left_box"></div>
             <div id = "center_box"></div>
             <div id = "right_box"></div>
    </div>
    #box{100%;display: flex; height: 100px;margin: 10px;}
    #left_box,#right_box{ 200px;height: 100px; margin: 10px; background-color: lightpink}
    #center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}

    注意: center一定要放到中间。

  • 相关阅读:
    Android上传文件到服务器(转)
    Android -- 利用Broadcast开启Service(转)
    【转】实践最有效的提高Android Studio运行、编译速度方案
    Android Studio3.x新的依赖方式(implementation、api、compileOnly)
    Drawable子类之——StateListDrawable (选择器)
    解决android studio引用远程仓库下载慢(JCenter下载慢)
    跳槽季,面试官:能接受加班吗?
    PHP 底层的运行机制与原理
    PHP程序员如何突破成长瓶颈
    VirtualBox启动虚拟机报错0x80004005
  • 原文地址:https://www.cnblogs.com/Ashton-ldb/p/11469973.html
Copyright © 2011-2022 走看看