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

布局

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

清除浮动

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

清除浮动的方式
在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

边偏移

top
bottom
left
right

定位模式

static: 默认的定位方式，不脱离文档流
relative: 相对定位，脱离文档流，但是占有位置
absolute: 绝对定位，脱离文档流，不占有位置
- 父级没有定位，以浏览器当前屏幕为准对齐(document文档)。
- 父级有定位，是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
- 子绝父相，因为子级是绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。父盒子布局时，需要占有位置，因此父亲只能是相对定位。
  如下，轮播图
fixed: 固定定位，脱离文档流，不占有位置
- 固定定位的元素跟父亲没有任何关系，只认浏览器。
- 固定定位完全脱标，不占有位置，不随着滚动条滚动。
- 兼容性，< ie6低版本浏览器不支持固定定位。
  如下，回到顶部图标以及淘宝电梯导航

z-index/叠放次序

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
如果取值相同，则根据书写顺序，后来居上。
后面数字一定不能加单位。
只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

定位模式转换

跟float一样，给块元素/行内元素添加了absolute和fixed之后，元素模式也会发生转换，都转换为行内块模式，

CSS基本选择器

权重等级关系(递增)

类型选择器(h1)和伪元素(::before)
类选择器(.example)，属性选择器([type="radio"])和伪类选择器(:hover)
ID选择器(#example)
行内样式(style="")
!important

权重计算

    无穷大        0           0           0
    !important   ID选择器    类选择器     类型选择器
    div.div1 #box2 p 112（权重最大）
    #box1 p          101（权重第二）
    .div1 .div2 p    021（权重最小）

CSS选择器

**' * ' 通配符选择器**

标志会指向页面上所有的元素, 一般用来清除margin和padding默认样式。虽然是一个快速的测试，但是不要将其应用在生产环境的代码中，它为浏览器带来太多负担，而且是完全没有必要。

    * {
        margin: 0;
        padding: 0;
    }
    /* 建议采用以下方法清除默认样式 */
    html, body, p, div, h1, h2, h3, h4, h5, h6, img, pre, form, fieldset { 
    margin: 0;
    padding: 0;
}

' #X ' id选择器

规则非常严格，因为是唯一的，不允许被再次使用。

    #container {
        width: 960px;
        margin: auto;
    }

' .X ' class/类选择器

id和class不同点就是class可以同时标记多个元素。

    .error {
        color: red;
    }

' X ' 类型选择器

一般可以应用在公共样式中

    a { color: red; }
    ul { margin-left: 0; }

' X: ' 伪类选择器

这里只列举可投入生产环境的伪类选择器

    :active :checked :default :defined :disabled :empty :enabled :first :first-child :first-of-type :focus :focus-within :host :host() :hover :indeterminate :in-range :invalid :lang() :last-child :last-of-type :left :link :not() :nth-child() :nth-last-child() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :read-only :read-write :required :right :root :scope :target :valid :visited

    a:hover { color: red; }
    li:first-child { color: purple; }

' X + Y '相邻兄弟选择器

    /* 选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素 */
    ul + p {
        color: red;
    }

' X ~ Y ' 一般兄弟组合器

    /* 选择所有的p元素，只要他們是在ul之後的 */
    ul ~ p {
        color: red;
    }

' X Y ' 子对象选择器

更明确的选择某个目标，如果你的选择器看起来像是 X Y Z A B.error,。那么你就做错了，是不是特别需要应用到这么精准的负担重的选择器

    li a {
        text-decoration: none;
    }

' X > Y ' 选择直接子对象

区分'X Y 子对象选择器'，选择所有Y子对象

    /* 选择id为container且为div选择器下的所有ul */
    div#container > ul {
            border: 1px solid black;
    }

' x[title] ' 属性选择器

    /* 仅仅选择所有包含有title属性的的锚点对象 */
    a[title] {
        color: green;
     }