CSS-样式属性

布局

1. 标准文档流组成

   1. 块级元素（block level）

      …

      、

      、

      、列表 独占一行，可设置宽高，宽度默认和父级元素相同

   2. 内联元素（inline）

      、、、…
      水平排列，不可设置宽高，宽度根据内容而定

2. display 用于块级元素和行内元素的转化

   1. 隐藏元素：(none/block)

      display:none; 所在的位置被清空

      opacity: 0; 透明度为0，位置还在
      visibility: hidden; 同上

   2. 行内和块级元素转化

      display:block;
      display:inline;

      行内元素水平间距（margin）不会重叠

3. float

   1. float会脱离文档流
   2. float:left/right;
   3. margin不会折叠
   4. 高度塌陷：容器子元素浮动导致容器高度变为零
   5. float可以实现文字环绕的效果

   总结

   1. 浮动元素脱离标准文档流

      1. 浮动元素的位置空出来，由非浮动元素占据
      2. 浮动元素不论是块级还是行级元素，都可以水平排列，同时设置宽度和高度

   2. 浮动元素具有相互贴靠特点

   3. 浮动元素具有文字围绕特点

   4. 浮动元素不设置宽度时具有收缩特点

   5. 父级元素的宽度是所有浮动子元素的宽度之和

   6. 清除浮动的方法

      1. clear:both

         .seperator{

              clear: both;
          }
         

         1

         2

         3

         4

在塌陷的容器中加入overflow: hidden;

overflow:visible/hidden/scroll/auto
只要值不是visible就可以清除浮动

postion

1. static 默认，元素处于标准文档流中

2. relative

   1. 居中

      margin:0 auto;
      left: 50%;
      margin-left: -自身宽度的一半;

   2. 参考点是元素自己原来位置

   3. 偏移设置：top、left、right、bottom

3. absolute

   1. 偏移设置： left、right、top、bottom

   2. 居中不可以用margin:auto

   3. 参考点是非static父元素的左上角,一般会把父元素设置为relative

   4. 当position: absolute;但是没有指定left或者top时，元素不动

4. fixed

   1. 固定定位的参考点是浏览器窗口
   2. 固定定位元素脱离标准文档流
   3. Ie低版本不支持

会脱离文档流的是：float,position:absolute,postition:fixed

dd