Front-end 之 CSS

普通流/normal-flow(文档流/document-flow)

• W3C规范中没有文档流/document-flow这个概念，只有普通流/normal-flow, 文档流的叫法主要还是多数中文译者的翻译方式问题。
• 什么是普通流？
  就是元素（块/block元素，内联/inline元素）按照其在HTML中的位置顺序（从上至下，从左至右）排布的过程

• 四种方式调节普通流元素位置

  • margin: 隔开元素与元素的间距，控制块级元素之间的距离
  • padding: 隔开元素与内容的间距，控制块级元素内部
  • float(具体见 "浮动/Float"篇章)
  • position定位方式布局(具体见 "定位/Position"篇章)

盒子模型/Box-model

• 盒模型主要定义四个区域
  

  • 内容(content)
  • 内边距(padding)
  • 边框(border)
  • 外边距(margin)

• 注意

  • background-color/background-image是在padding+content区域内定义
  • 盒子宽度 = border(right+left) + padding(right+left) + width
  • 盒子高度 = boder(top+bottom) + padding(top+bottom) + height
  • padding会撑开盒子，计算盒子宽度时，需要留意padding

浮动/Float + 定位/Position

浮动/Float

布局

1. 使块级元素能够在一行排布，只能置于盒子左侧或者右侧，设置float属性。注意：float使块级/block元素转换为行内块/inline-block元素；浮动的内容在内容区域（在padding以及border内）。
   
   
2. 使文字环绕元素，如果想要元素与文件有间距，设置元素margin。
   
3. 不完全脱离文档流，对于内联元素(img,a,input,纯文字...)内容不脱离文档流，如果完全脱离文档流，那文字"no float"及图片就会随着蓝色盒子置于左上角，但是都排布粉红色区域外，说明内容是占据文档流的。
   

清除浮动

1. 为什么清除浮动？
   浮动会让父级元素造成高度塌陷，如果对布局有影响的，需要清除浮动。
   

2. 清除浮动的方式
   在CSS中，clear属性用于清除浮动

       选择器 { clear:属性值;}
       /*  属性值
           left：清除左侧浮动
           right：清除右侧浮动
           both：同时清除左右两侧浮动的影响
       */

   • 额外添加法：给最后一个浮动元素后面新添加空块级元素(div/br...)，且添加'clear:both'属性。
     缺点：增添多余的节点。不推荐使用！
     

   • 父元素overflow：给父元素添加overflow属性

         ul {
             overflow: hidden;
             *zoom: 1;  /* 兼容IE7以下版本，触发 hasLayout */
         }

     缺点：内容增多时候，无法显示需要溢出的元素。不推荐使用！
     
     添加overflow后效果：
     

   • :after伪类：在父级元素末尾空块级元素，推荐使用！

         .clearfix:after { 
             content: ""; /*  content:"."，尽量不带点 */
             display: block; /* after是行内元素，必须转块级元素，否则父级高度将无法被子级撑开 */
             height: 0; /* 清除布局上产生的间隙 */
             clear: both; 
             visibility: hidden; /* 隐藏该元素的所有样式内容，而不是隐藏dom元素*/
         }   
         .clearfix {
             *zoom: 1; /* 兼容IE7以下版本，触发 hasLayout */
          } 

   • :before + :after双伪类：代码更简洁，推荐使用！

         .clearfix:before,.clearfix:after { 
           content:"";
           display:table;
         }
         .clearfix:after {
          clear:both;
         }
         .clearfix {
           *zoom:1; /* 兼容IE7以下版本，触发 hasLayout */
         }

定位/Position

1. static: 默认的定位方式
2. relative: 相对定位，不脱离文档流
   
3. absolute: 绝对定位，脱离文档流
   
4. fixed: 固定定位，脱离文档流