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;