CSS中的几个小技巧

1. 左右布局
   我已经被方方洗脑了：子元素加上float：left ，父元素加上clearfix。

   
   1549537521(1).jpg
   1549537468(1).jpg

2.左中右布局
2.1 float+margin

1549539705(1).jpg

2.2 float+绝对定位

1549540174(1).jpg

3. 水平居中
   

   3.1 在给定宽度情况下 1549540493(1).png
   3.2 在块级父容器中给行内元素居中：给父容器加上text-align: center; 。这种方法可以让 inline/inline-block/inline-table/inline/flex 等类型的元素实现居中。 

4. 垂直居中
   4.1 对于单行行内或者是文本元素，只需要赋予等值的padding-top值和padding-bottom值。
   4.2 如果不能使用padding，但是又知道文本不换行，那么可以设置line-height和对象的height
   相等就可实现居中。
   4.3 绝对定位。
   

   4.3.1负边距法 ：这种方法利用绝对定位先将元素的上边界和左边界移动到50%的位置，再根据元素的尺寸调整负边距以达到居中的效果。这种方法适用于所有浏览器，但是由于需要预先设定元素高度，因此可能出现内容超出容器的情况。 1549616600(1).jpg 4.3.2拉伸法：这个方法的原理是使子元素有拉伸到容器边界的“趋势”，但由于子元素设置了高宽，因此无法拉伸。同时因为设置了 margin: auto，意味着相对方向的外边距相等，因此元素被“挤”到了容器的中央。 1549616527(1).jpg

5. CSS画各种图案