• 常见的布局方式实现


    单列布局
    HTML:
    <div class="parent">
    <div class="child"></div>
    </div>
     
    一.水平居中(常见的,那些什么table,导致性能不好的就不说了)
    实现效果:
    1.使用inline-block和text-align实现
    <style>
    .parent{
    text-align: center;
    border: 1px solid red;
    }
    .child{
    50px;
    height: 50px;
    border: 1px solid #667766;
    background-color: bisque;
    display: inline-block;
    }
    </style>
     
    原理:
    ①.text-align是指定元素文本的水平对齐方式,可继承,
    ②.inline-block行内块级元素,就是还是行内元素的排列方式不换行,但是支持块级元素有的宽高和上下padding
    多个inline-block子元素会怎样?
    多个inline-block的间隙解决办法:在父级元素中加入font-size:0;
    优点:兼容性好,
    缺点:需要同时设置子元素和父元素
     
    2.使用margin:0 auto实现
    .child{
    50px;
    height: 50px;
    border: 1px solid #667766;
    background-color: bisque;
    margin: 0 auto;
    }
    优点:兼容性好,
    缺点:需要指定宽度
     
    3.绝对定位(position)
    效果:
     
    .parent{
    border: 1px solid red;
    position: relative;
    }
    .child{
    50px;
    height: 50px;
    border: 1px solid #667766;
    background-color: bisque;
    position: absolute;
    left:50%;
    transform: translate(-50%);
    }
    原理:
    父元素设置了position:relative,子元素设置了position:absolute,于是就会向父级相对定位,并且脱离文档流(就是浮在上面),left:50%,向左边移动页面的50%像素,但是还是不会居中呀,所以要设置一个平移属性,transform:translate(-50%),就是向x轴,也就是横轴,平移自身元素的50%个像素,正50%是向右,那么-50%就是向左啦!自行想象啦~
    优点:不会影响其他元素
    缺点:兼容性差ie9级以上才能实现
     
    4.使用flex布局实现
    不知道flex,可以看看这个http://www.techug.com/post/flex-examples.html
    实现方法有两种
    效果都是:
     
    第一种:
    .parent{
    border: 1px solid red;
    display: flex;
    justify-content: center;
    }
    .child{
    50px;
    height: 50px;
    border: 1px solid #667766;
    background-color: bisque;
    }
    原理:在父级元素设置弹性布局,justify-content使得子元素水平居中排列;
    而且两个子元素的话,不会像displa:inline-block一样中间有间隙,如图:
     
    第二种:
    .parent{
    display: flex;
    border: 1px solid red;
    }
    .child{
    border: 1px solid #667766;
    background-color: bisque;
    margin: 0 auto;
    }
    效果如下:
    原理:在父级元素设置为弹性布局,然后子元素设置左右自适应,就可以实现没有宽度,也可以用margin:0 auto,居中
    优点:简单快捷,代码量少
    缺点:兼容性差,如果大面积的布局可能会影响效率
     
    二、垂直居中
    1.使用flex实现
    html,body{
    height: 100%;
    }
    .parent{
    border: 1px solid red;
    display: flex;
    align-items: center;
    height: 100%;
    }
    .child{
    50px;
    height: 50px;
    border: 1px solid #667766;
    background-color: bisque;
     
    }
    效果如下:
     
    flex原理不解释了,注意要给父级元素设置高度,如果设置为100%,那么也要给html,body设置高度为100%,
    一个div块级元素没有主动为其设置宽度和高度,浏览器会为其分配可使用的最大宽度(比如全屏宽度),但是不负责分配高度,块级元素的高度是由子元素堆砌撑起来的。那么,html和body标签的高度也都是由子级元素堆砌撑起来的。
    html{height:100%},那么HTML的上级是谁呢?
    那么浏览器本身是有宽度和高度的,设置html的height:100%,就可以获取浏览器的定高了,后面的body和div也就有了依赖。
     
    2.使用绝对定位
    .parent{
    border: 1px solid red;
    position: relative;
    }
    .child{
    50px;
    height: 50px;
    border: 1px solid #667766;
    background-color: bisque;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    }
    效果如下
    top:50%没有生效,为什么呢?同上,没有设置高度是不会生效的
    html,body{
    height: 100%;
    }
    .parent{
    border: 1px solid red;
    height: 100%;
    position: relative;
    }
    .child{
    50px;
    height: 50px;
    border: 1px solid #667766;
    background-color: bisque;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    }
     
    三.水平垂直都居中
    1.绝对定位
    html,body{
    height: 100%;
    }
    .parent{
    border: 1px solid red;
    height: 100%;
    position: relative;
    }
    .child{
    50px;
    height: 50px;
    border: 1px solid #667766;
    background-color: bisque;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    }
    效果如下:
    2.flex
    html,body{
    height: 100%;
    }
    .parent{
    border: 1px solid red;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .child{
    50px;
    height: 50px;
    border: 1px solid #667766;
    background-color: bisque;
     
    }
    效果如下:
     
     
    两列布局
    一.要实现的效果:左边固定宽度,右边自适应
    1.float浮动实现
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    html,body{
    height: 100%;
    }
    div{
    border: 1px solid #000000;
    }
    .box1{
    100px;
    float: left;
    background-color: red;
    }
    .box2{
    margin-left: 102px;
    background-color: green;
    }
    </style>
    </head>
    <body>
    <div class="box1">我们是兄弟啊,我的宽度是固定的</div>
    <div class="box2">我们是兄弟啊,我的宽度是自适应的</div>
    </body>
    效果如下:
    原理:左边兄弟设置浮动,右边设置margin-left空出位置.
     
    2.flex实现
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    html,body{
    height: 100%;
    }
    .parent{
    display: flex;
    }
    .box1{
    background-color: red;
    100px;
    }
    .box2{
    background-color: green;
    flex: 1;
    }
     
    </style>
    </head>
    <body>
    <div class="parent">
    <div class="box1">我们是兄弟啊,我的宽度是固定的</div>
    <div class="box2">
    我们是兄弟啊,我的宽度是自适应的
    </div>
    </div>
    </body>
     
    效果如下:
    原理:父级元素设置display:flex,设置右侧兄弟flex:1,剩余的宽度,由于align-items默认值未stretch,所以两者高度相等.
     
    二.一列不定宽,一列自适应
    1.float
    .box1{
    background-color: red;
    border:1px solid #000;
    float: left;
    }
     
    .box2{
    background-color: aqua;
    overflow: hidden;
    }
     
    </style>
    </head>
    <body>
    <div class="parent">
    <div class="box1">不固定的</div>
    <div class="box2">自适应的</div>
    </div>
    </body>
     
    2.flex
     
    三列布局
     
    一.两列定宽,一列自适应
     
    1.浮动实现
    .box1,.box2{
    background-color: red;
    border:1px solid #000;
    98px;
    float: left;
    }
    .box3{
    background-color: green;
    margin-left: 200px;
    }
     
    </style>
    </head>
    <body>
    <div class="parent">
    <div class="box1">固定的</div>
    <div class="box2">固定的</div>
    <div class="box3">
    自适应的
    </div>
    </div>
    </body>
     
    原理:同上
     
    2.flex实现
    .box1,.box2{
    background-color: red;
    border:1px solid #000;
    98px;
    float: left;
    }
    .box3{
    background-color: green;
    margin-left: 200px;
    }
     
    </style>
    </head>
    <body>
    <div class="parent">
    <div class="box1">固定的</div>
    <div class="box2">固定的</div>
    <div class="box3">
    自适应的
    </div>
    </div>
    </body>
     
     
    二.两侧定宽,中间自适应
    1.flex
    .parent{
    display: flex;
    }
    .box1,.box3{
    background-color: red;
    border:1px solid #000;
    98px;
     
    }
    .box2{
    background-color: green;
    flex: 1;
    }
     
    </style>
    </head>
    <body>
    <div class="parent">
    <div class="box1">固定的</div>
    <div class="box2">自适应的</div>
    <div class="box3">
    固定的
    </div>
    </div>
    </body>
     
    2.float
    .box1,.box3{
    background-color: red;
    border:1px solid #000;
    98px;
    }
    .box1{
    float: left;
    }
    .box2{
    float: left;
    background-color: green;
    margin-right: -200px;
    100%
    }
    .box3{
    float: right;
    }
     
    </style>
    </head>
    <body>
    <div class="parent">
    <div class="box1">左边固定的</div>
    <div class="box2">自适应的</div>
    <div class="box3">
    右边固定的
    </div>
    </div>
    </body>
    效果:
     
    总结常用的办法就是:
    1.float
    2.position
    3.flex
     
    建议尽量不要用float,会导致很多问题,其他两个随意用
  • 相关阅读:
    HTML5 中的Nav元素详解
    Gevent中信号量的使用
    MemCache缓存multiget hole详解
    MemCache中的内存管理详解
    Php中的强制转换详解
    Python中类的特殊方法详解
    MemCache的LRU删除机制详解
    AngularJS事件绑定的使用详解
    Php数据类型之整型详解
    HTML基础知识
  • 原文地址:https://www.cnblogs.com/echo-hui/p/9376162.html
走看看 - 开发者的网上家园