左右布局
<div class="father clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
子元素上加float:left;，同时在父元素加上清除浮动,代码如下:
.left{
float: left;
}
.right{
float: right;
}
.clearfix{
content: '';
display: block;
clear: both;
}
左中右布局
父元素下由3个子元素，把3个子元素都浮动起来，中间元素用margin调整左右间距即可
水平居中
- 如果是一个有宽度块级元素，如
div，则用margin: 0 auto;即可水平居中 - 如果是一个内联元素如
<a>，让它里面的文字水平居中，用`text-align: center; - 如果有多个元素，也可以用float+clearfix，再用margin来调整左右间距
垂直居中
- 让文字垂直居中padding+line-weight，这样的好处是不用固定宽高。用内
容来撑起高度 - 块级元素用相对定位
.parent{
height: 200px;
position: relative;
}
.a{
heihght: 1000px;
margin-top: -50px;
position: absolute;
top: 50%;
}
水平垂直居中
- 爸爸relative，儿子absolute，儿子的上下左右都为0，再加个margin:auto
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
2.用flex简单粗暴
display: flex;
justify-content: center;
align-items:center;
其他小技巧
- 制作导航栏用
positon: fixed，相对屏幕定位 - 宽度最好用max-width
- 制作两列多行内容时，可以用
width: 50%，来实现换行 - 给一个有内容的div加padding时通常会变胖，可以加多一层div，在新加的div上使用padding，那么原来的div不会增加宽度
- 使用
display: inline-block会发现下面会有空隙，那么加一句vertical-align: top
