CSS实用篇之布局秘籍

css

一、垂直居中

方法1、table-cell

<div class="box">
    <span>垂直居中</span>
</div>

.box{
    display: table-cell;
    vertical-align: middle;
}

方法二：display:flex
兼容性：ie10+ 需加-ms-

.box{
    display: flex;
    align-items:center;
}

方法三：子元素绝对定位和margin复值。子元素需要有明确的高度
方法四：子元素绝对定位 0边距 margin：auto 。子元素需要有一定明确的高度
方法五：transform:translate -50%
方法六：inline-block

.box{foont-size:0;}
.box span{
    display:inline-block;
    vertical-align:middle;
}
.box span:after{
    content:'';
    display:inline-block;
    width:0;
    height:100%;
    vertical-align:middle;
}

二：圣杯布局（双飞翼布局）

三：新时代的宠儿 —— flex布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

四：padding-bottom实现等高图片墙

案例：http://www.janeoo.com/
http://www.fzmould.com/en/

五：响应式栅格原理

1.方式一

存在1%*1%的误差，肉眼不可见。书写固定，适用于框架ui

ul.row{width: 101%;}
.row>.span-3{width:24%; margin-right:1%;}

2.方式二

不存在误差，书写自由，适用于定制开发

ul{margin-right:-1%;}
li{width:24%; margin-right:1%;}