在开始之前，我们有必要简单了解一下 css 中那些容易导致 bug 的属性：
- "width:100%;" , 如果有 margin / padding 存在，内容常常会超过界面；
- 设置固定 height, 缺点就是当内容太多的时候，显示不完全；
- "display:inline-block;" , 会经常出现一些间隔问题，所以每当用到这个的时候我们都会响应的加上："vertical-align:top";
进入正题
一、水平布局
水平布局中，我们最常用到的属性是 float，效果是让 element 脱离文档流。
1.left & right
一般我们让两个元素水平左右布局的话，可以设置一个元素 float: left; 另一个 float: right;
2.百分比
我们也可以考虑相同方向上的 float，然后设置 element 的宽为百分比，只要保证水平上的 elements width 之和不大于一就可以实现水平布局。
这种方式在多个元素水平布局上就更适合。
3.position
在父级元素设置 postion: relative;，然后分别设置子元素：
.left {
position: absolute;
left: 0;
top: 0;
}
.right {
postion: absolute;
right: 0;
top: 0;
}
注意
1）默认情况下，我们设置的 width 只是针对 element 的 content 部分，也就是说，当有 padding / margin 存在的时候，element 的实际占用宽度会大于设定值，这会导致 element 无法挤到一起水平布局，解决的方法就是：
设置 box-sizing: border-box，或者把 padding / margin 设为 0；
2）因为 float 会让元素脱离文档流，就会出现子元素跑到父元素外部的结果：
float1
解决的方法：利用 clear 属性（可以理解为克制 float 属性）给父元素加上有 clear 属性的空白内容；
.clearfix::after {
content: "";
display: block;
clear: both;
}
clearfix
3）还有一个比较麻烦的问题，如图：
对齐1
本来我们想要的是整齐的 float，但是因为左边元素的字体比右边的大，整个元素的方框就比右边大一点点，导致下一列的元素卡在了奇怪的位置 ……
解决的办法就是给每个元素设定一样的 height 或 line-height;
但是，这又会导致另一个问题，我们前面说了设置固定高度容易导致 bug 就提现在这里，如果我们的内容比较多，就可能会出现显示问题。
固定 height
当然，我们也可以考虑给每一行的元素套上一个 div 作为一个整体，再加上一个上面提到的 .clearfix class.
其实还有更好的解决方法，用上 flexbox ，这个以后在讨论。
二、居中
1.水平居中
1）block elements
对于 block 元素自身，设置左右两边 margin 为 auto margin-left: auto; margin-right: auto 可以在父元素内水平居中；
2）inline elements
a. 在父级元素中设置 text-align: center; 可以让内部的 inline 元素水平居中；
b. 内联元素设置左右 padding 为相同值，可以让内部内容居中；
内联元素这种的居中也有它的优点：可以自动随着内容长度的变化而变化
2.垂直居中
1）设置相同的上下 padding；
2）设置 line-height 等于 父元素的 height；
这两种方式的缺点非常明显，父元素里面无法同时存在其它内容。更为高级的用法在下面；
3.水平、垂直居中
利用，position 和 transform (translate);
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
对于 block 和 inline 元素都有效！爱怎么调就怎么调
4.背景居中
用这个：
background-position: center center;
如果还需要背景的自动放缩：
background-size: cover;
（待补充……）
网友评论