CSS 布局和浮动

css中一共有三种手段，使一个元素脱离标准文档流：
（1）浮动
（2）绝对定位
（3）固定定位

布局

1. 静态布局（static）:默认，存在文档流中
2. 固定布局（fixed）：脱离文档流，相对于屏幕，不随着页面的滑动而改变位置
3. 绝对布局（absolute）：脱离文档流，不会对其他元素造成影响，相对的是父级最近的relative或absolute，若找不到，则相对于body元素进行定位
4. 相对布局（relative）：元素相对于自身原位置进行偏移
5. 弹性布局（flex）
   这是我自己写的关于flex的理解：Flex

定位元素层级 z-index

定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

块级元素和行内元素

块级元素：标题（H1~H6）,列表（ol,ul,li,dl,dd,dt）,div,hr,center,pre,p,table等

• 独占一行，不能与其他任何元素并列；
• 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。

行内元素：span、a、b、i、u、em

• 与其他行内元素并排；
• 不能设置宽、高。默认的宽度，就是文字的宽度。
  img，input: 替换元素，一般有自己的宽和高

块级元素和行内元素的相互转换

a{
   dispaly:block;
}
div{
   display:inline;
}

rem的使用

1 rem = 16px

浮动

1. 浮动的元素脱离标准流
2. 浮动的元素互相贴靠
3. 浮动的元素有“字围”效果

清除浮动（清除浮动与浮动之间的影响）

1. 给浮动元素的父级元素加高度
2. clear:both（会导致margin失效）
3. overflow:hidden（隐藏溢出）
   浮动参考：css浮动