关于CSS布局和居中的总结

CSS布局

一个元素在页面中一般有4种状态：

• 普通文档流（默认值）
• 使用了float的浮动
• relative或者absoult的定位, 相对于浏览器的flexd。

CSS定位只要依靠position属性实现，该属性有四个值:

float:

设置元素浮动， 该元素将脱离普通文档流。直到外边缘或者另一个浮动块的边缘。
注意，浮动对于普通流元素会形成一个挤压的状态， 比如<a></a><div></div> 这样一个布局，
如果设置div元素浮动，那么a元素就会被挤压到div元素的后面去。
同时，float元素的尺寸讲不会计入父元素的尺寸中， 所以， 这里就涉及到一个清除浮动的概念：
清楚浮动的几种做法：
1.父元素设置ovflow:hidden;
2.在需要清除浮动的底部加一个div标签， 同时，将这个标签clear:both;
3.使用伪类清楚浮动：在父元素上添加一个clear类 同时，讲该类设置成：

            {
              clear: both;
              content: " ";
              display: block;
              height: 0;
             visibility: hidden;
          }

ralative

相对定位原有位置不脱离普通文档流，相对自己原有的位置进行定位。

absolute

绝对定位， 脱离原有定位，相对于祖先中，已经定位的元素（相对和绝对）进行定位。

flexd

相对于浏览器定位， 不会随着滚动条滚动。
z-index: 对于relatvie absolute fixed 可以设置堆叠顺序。 值越大越在上面。

CSS中水平和垂直居中

水平居中：

1)行框： 只需要在父级元素中设置 text-align:center;
2)块级框：父级元素 margin:0 aoto;或者设置父级框 text-align:center;

垂直居中：

1. 单行框：一般设置子元素 height 和 line-height一致就可以实现。

2. 多级行框: 借助vertical-align: middle; 实现.

3. 块级框:
   a)知道height ：子元素设置为

    position: absolute;
    top: 50%; 
    height: 100px; 
    margin-top: -50px;
   

b)不知道height:子元素设置为：
position: absolute;
top: 50%;
transform: translateY(-50%);

3.于此同时， 设置合适的内边距也可以实现垂直和水平居中。
4.flex布局对于实现垂直居中更加简洁方便。