CSS布局总结

CSS

自己写的太少，参考了网上很多资料，尝试总结一下CSS的各种布局，让自己写的页面的时候能够快速找到思路。就这样 

一·水平居中

1.使用inline-block和text-align:center
.parent{text-align: center;}
.child{display: inline-block;}
2.使用margin:0 auto;(定宽或者display：table;)
.child{width:200px;margin:0 auto;}
.child{display:table;margin:0 auto;}
3.使用绝对定位

4.使用flex布局
/*第一种方法*/
.parent{display:flex;justify-content:center;}
/*第二种方法*/
.parent{display:flex;}
.child{margin:0 auto;}

二·垂直居中

1.使用vertical-align(元素必须是inline或inline-block，必须设置行高或者table-cell)
/*第一种方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}
2.使用绝对定位
.parent{position:relative;}
.child{positon:absolute;top:50%;transform:translate(0,-50%);}
3.使用flex布局
.parent{display:flex;align-items:center;}

三·水平垂直居中

1.利用vertical-align,text-align,inline-block实现
.parent{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;}
2.利用绝对定位实现
.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
3.利用flex实现
.parent{display:flex;justify-content:center;algn-items:center;}

左右布局

没想好咋写

左中右布局

待补充

小技巧

CSS布局用到的一般就几种：浮动，inline-block,display：table；，flex,还有框架。
<hr>
浮动与clearfix
.clearfix{
    content:‘‘;
    display:block;
    clear:both;
}
写css一般可以清除默认的margin和padding,标题的字重和列表的样式：
    * {
        margin: 0;
        padding: 0;
    }
    h1,h2,h3,h4,h5,h6{
        font-weight: normal;
    }
    ol,ul{
    list-style: none;
    }
注意，用display:inline-block 让非内联元素居中时，最好加上一句：vertical-align：top;