（1）清除瀏覽器默認樣式
（2）全局樣式定義

（1）項目開發初期就定義好
（2）reset.css 在引入的時候一定要放在第一位
（3）不同的產品reset.css不一樣

table {
  border-collapse: collapse; // 合并邊框
  border-spacing: 0; //邊框間距。當 `border-collapse` 值為 `seperate` 時生效

}

    html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
    header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
    table{border-collapse:collapse;border-spacing:0;}
    caption,th{text-align:left;font-weight:normal;}
    html,body,fieldset,img,iframe,abbr{border:0;}
    i,cite,em,var,address,dfn{font-style:normal;}
    [hidefocus],summary{outline:0;}
    li{list-style:none;}
    h1,h2,h3,h4,h5,h6,small{font-size:100%;}
    sup,sub{font-size:83%;}
    pre,code,kbd,samp{font-family:inherit;}
    q:before,q:after{content:none;}
    textarea{overflow:auto;resize:none;}
    label,summary{cursor:default;}
    a,button{cursor:pointer;}
    h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal;}
    del,ins,u,s,a,a:hover{text-decoration:none;}
    body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,simsun;color:#333;outline:0;}
    body{background:#fff;}
    a,a:hover{color:#333;}

父元素和子元素寬度未知。

  
child

要達到的效果是這樣：

主要代碼：

.parent { 
  display: flex;
  justify-content: center;
}

沒啥好解釋，直接看 神奇的flex實現栗子 吧 (~￣▽￣)~

主要代碼：

.parent { position: relative; }
.child { 
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

原理是：left: 50%;在子元素的左側添加了一段距離，這段距離是父元素寬度的50%，接著因為translateX(50%) 設置百分比時的參照物是自身寬度，所以向左偏移了自身寬度的50%，就居中啦 ╮(‵▽′)╭

動動小手看看栗子

主要代碼：

.parent { text-align: center; }
.child { display: inline-block; }

這種方法有一個問題是：parent設置了text-align: center;后， 因為這個屬性可繼承，會導致child中的文字也會居中，而這個效果是我們未必需要的，所以我們很多時候需要在.child中加一句 text-align: left;

自己看看栗子

主要代碼：

.child { display: table; margin: 0 auto; }

table的特點：寬度為內容寬度 的塊狀元素，所以也可以用margin: 0 auto;居中。

優點：只設置子元素樣式就可以了，不需關心父元素。

看看栗子

不喜歡這第四個方案，table是辣么有語義的一個樣式，為什么隨便把人家變成table (￣.￣)

父元素和子元素高度未知。

意欲達到的效果：

.parent {
  display: flex;
  align-items: center;
}

同水平居中的方法一

栗子

.parent { position: relative; }
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

同水平居中的方法二

栗子

.parent {
  display: table-cell;
  vertical-align: middle;
}

vertical-align 可以作用在 inline元素，inline-table元素，以及table-cell元素上。

栗子

父元素和子元素寬高都未知。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

綜合了水平居中和垂直居中的方法一

栗子

.parent { position: relative; }
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

綜合了水平居中和垂直居中的方法二

栗子

.parent { position: relative; }
.child {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

栗子

.parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.child {
  display: inline-block;
}

栗子

  
left
  

    
right
    
right
  

.left {float: left; width: 100px;}
.right { margin-left: 120px;} //有20px是間距

因為方法1在低版本瀏覽器有兼容性問題，所以改進一下。

// 首先在right外面加了right-fix這個div

  
left
  
 
    

      
right
      
right
    
  

CSS改動：

STEP1：

// .left 和 .right 設置暫時不變
.right-fix {float: right; width: 100%;}

效果為：（注意：我們把right-fix設置為白色背景，只是為了方便觀察。）

STEP2：

可以看到，由于right-fix寬度為100%，所以跑到了left下面一行。想要回到同一行，需要給right-fix設置一個負的margin-left值-100px。

.right-fix { margin-left: -100px; }

關于為什么設置了margin-left: 100px;就可以使得回到同一行呢？是因為設置了負的margin-left值之后，瀏覽器計算right-fix元素的寬度后，會加上-100px，也就是減掉100px，這也就是left的寬度，所以left 與 right-fix 加起來沒有超過整行的寬度。
想要進一步了解負的margin值可以參考這篇文章：CSS布局奇淫巧計之-強大的負邊距

效果如圖：

STEP3：

不幸的是，因為html文檔中right-fix處于left后面，所以left被right-fix遮住了，實際應用中right-fix雖然沒有背景色，但是我們還是不會希望它覆蓋在left上面。

所以，我們需要提高 left 的層級。如何提高呢？由于設置了position: relative;的元素層級要高于普通元素，所以加上這樣一條：

.left{ position: relative; }

具體可以參考張鑫旭寫的一篇講解position:relative;很詳細的文章：CSS 相對/絕對(relative/absolute)定位系列（四）

最終達到我們要的效果：

到jsfiddle中自己試試去

.left{
  width: 100px;
  margin-right: 20px;
}
.right {
  overflow: hidden;
}

原理是：設置了overflow:hidden; 之后，會觸發BFC模式，而BFC模式內部的布局不受外部影響，所以不會受浮動影響，不會圍繞left而是跑到left右邊去了。

.parent{
  display: table;
  width: 100%;
  table-layout: fixed; //加速table渲染，實現了布局優先
}
.left, .right {
  display: table-cell;
}
.left {
  width: 100px;
  padding-right: 20px;//因為table-cell不能設margin，所以設置padding來加間距
}

根據table的特性,left設置了100px后，right就占了剩余寬度。

.parent{ display: flex; }
.left{ width: 100px; margin-right: 20px; }
.right{ flex: 1; }

So easy.

再加一列定寬就行啦 o(≧v≦)o

不定寬意思是：
1.可以隨意更改寬度：比如改為100px，200px，同時不需要更改其他樣式也可以做到兩列自適應布局。
2.或不設置寬度而是由里面子元素的寬度決定。

以下方法對應 [一列定寬+一列自適應] 中的方法

方法1： float + margin ？

不好意思，做不到。

方法2： float + margin +（fix） ？

不好意思，也做不到。

方法3： float + overflow ？

闊以！right的樣式沒有依賴于width的寬度。代碼量也少，很棒棒哦！

方法4：table

闊以！right的樣式沒有依賴于width的寬度，即不關心width的寬度。

方法5：flex

強大的flex當然可以~（傲嬌臉 ）

沒錯，跟你想的一樣，加一列不定寬的就行了，樣式都一樣 ㄟ( ▔, ▔ )ㄏ

C + G = 4*（W + G）
以下例子假設間距G = 20px

結構：

  
1
  
2
  
3
  
4

方法1：float

.parent{ margin-left: -20px; }//就是上面公式中等號左邊的G
.column{
  float: left;
  width: 25%;
  padding-left: 20px;//這里要注意，因為我們用padding來表示間距，所以如果你是給p元素設置了background-color，會發現沒有間距，p標簽的width才是上圖中的W
  box-sizing: border-box;
}

方法2：table

    

      
1
      
2
      
3
      
4
    

.parent-fix{
  margin-left: -20px;
}
.parent {
  display: table;
  width: 100%;
}
.column {
  display: table-cell;
  padding-left: 20px;//因為單元格不能設置margin，所以間距只能用padding來做。
}

因為table的width默認是隨內容寬度變化的，所以需要手動設置width: 100%;。又因為明確設置了寬度的元素就沒辦法用將margin設為負值的方式增加20px寬度了，所以需要在外面加一個父元素parent-fix。
這里大家可以自己試試比較一下給parent-fix設置width為100%與不設置width時parent-fix實際寬度（用調試工具里的查看元素看）的區別來理解。

吶，jsfiddle示例在這

方法3：flex

.parent { display: flex; }
.column { flex: 1; } 
.column + .column { margin-left: 20px; }//好用的兄弟選擇器 (??`ω′?)

右側變高，左側高度隨之變化：

↓↓

方法1：table

table的列之間有天然等高的特性。

就是上面 1.一列定寬 + 一列自適應中的方法4：table。

方法2：flex

flex也是天然的等高 <(￣︶￣)> 因為它默認的align-items為stretch，即在交叉軸上默認拉伸占滿整個容器。

仍舊是上面1.一列定寬 + 一列自適應中的方法5：flex。

簡單到不好意思給栗子

方法3：float

仍舊是參照上面1.一列定寬 + 一列自適應中的方法3：float + overflow，float并沒有天然等高，所以要在這個基礎上做改動。

.left{
  width: 100px;
  margin-right: 20px;
}
.right {
  overflow: hidden;
}
//增加部分
.left, .right{
  padding-bottom: 9999px;//使得有背景色的部分變的很高
  margin-bottom: -9999px;//用負的margin抵消掉很高的padding，讓高度變回left和right中較高的那部分的內容高度，以便parent用overflow: hidden;去隱藏掉超出部分
}
.parent {
  overflow: hidden;//隱藏掉超出邊界的部分 
}

其實left的實際高度并沒有變，是一種偽等高，只是背景變高。

栗子

這是練習題，置幾試試吧。

  

    
1
    
2
  
  

    
3
    
4
  

方法1：flex

.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.outer {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}

一顆僅供參考的栗子

方法2：float

我的栗子

方法3：table

一個栗子不一定對

只有主內容區 right 隨內容滾動。

方法1.position

top
left
right
bottom

html, body, .parent {height: 100%; overflow: hidden;}//為了讓整個頁面不滾動
.top {
  position: absolute;
  top: 0; 
  left: 0; right: 0; //注意這個很棒的設置！可以自動占滿整行 ヾ(o???)? 
  height: 100px;
}
.left {
  position: absolute;
  left: 0;
  top: 100px; bottom: 50px;
  width:200px;
}
.right {
  position: absolute;
  left: 200px; right: 0;
  top: 100px; bottom: 50px; //這也是上下占滿除了top和bottom之外的所有高度
  overflow: auto;//讓主內容區可以滾動
}
.help-right {//假裝有很多內容
  width: 1000px;
  height: 1000px;
}
.bottom{
  position: absolute;
  bottom: 0; 
  left: 0; right: 0;
  height: 50px;
}

動手寫寫才記得住

方法2.flex

top

left
right

bottom

html, body, .parent {height: 100%; overflow: hidden;}
.parent {display: flex; flex-direction: column;}
.top { height: 100px; }
.middle {flex: 1; display: flex;}
.left { width:200px; }
.right { flex: 1; overflow: auto; }
.help-right { width: 1000px; height: 1000px; }
.bottom{ height: 50px; }

栗子

方法1.position ， 方法2.flex ：

把原來的用px寫的定寬改成百分比就可以了。是相對于body的高度和寬度來變化的。感覺top和bottom高度設置百分比不是很實用。

方法1.position

定寬的高度和寬度影響旁邊欄的布局，所以實現不了 - 。-

方法2.flex

闊以實現，而且相當簡單 ╮(╯▽╰)╭ 把剛剛設置了高度和寬度的地方去掉就可以了 ∑(っ °Д °;)っ

驚人的栗子

方法3.Grid

闊以實現，但是因為還是W3C的草案，所以會經常變化，不穩定，而且瀏覽器支持也不好。

只寫一個網站，在多個終端顯示，在小屏幕上會隱藏部分元素。

在PC端瀏覽器中可以正常訪問的網站，到了手機上之后，內容就會變得特別小。
原因：所有的移動設備都有一個viewport（視窗），這個視窗不是手機屏幕大小，而是一個虛擬的窗口，比如iPhone4的viewport寬度為980px（如下圖所示）。顯示的時候再按照比例將這980px的內容壓縮顯示到實際的屏幕寬度中。

@media screen and (max-width: 320px) {
  //最大寬度為320px，即視窗寬度小于等于320px
  div{..}
  .class-name{...}
}

@media screen and (min-width: 320px) and (max-width: 769px){
  //最小寬度為320px，最大寬度為769px，即視窗寬度大于320px，小于769px
}

減少卡頓
利于SEO
便于代碼維護

（1）多個css文件合并成一個
（2）少量css樣式內聯
（3）避免用import的方式引入css文件，因為每個import語句都會產生一個css請求，并且是同步的請求。

（1）減少圖片大小
選擇合適的圖片格式，小尺寸、半透明的用png，大尺寸、色彩絢麗用jpg（因為jpg會對圖片進行壓縮）
壓縮圖片

（2）css值縮寫
margin，padding，border，font，border-radius等屬性

（3）省略值為0 的單位

margin: 0 10px;
line-height: .5;
background-position: 50% 0;

（4）顏色值最短表示

red
rgb(0,0,0)
rgba(0,0,0,0)
#000000
#000

（5）css選擇器合并

.left, .right {...}

（6）文件壓縮
用工具對文件進行自動壓縮，去掉空格。

css通常放在head中，而js通常放在body底部，因為js會阻礙其他資源加載。

body .menu ul li a { ... } //太長了
.menu a { ... } //更好

比如：

expression
filter
border-radius
box-shadow
gradients

（1）規范：縮進，變量名等
（2）語義化：除了標簽，css、id名最好也盡量有意義
（3）盡量避免Hack，一定要用也要統一的標識，比如IE7用*
（4）模塊化：相關聯的結構做成一個個模塊，復用性更強
（5）添加注釋

1.注釋的文字兩側需加空格，防止因編碼問題導致注釋失效

2.為避免命名污染，可以給class加前綴，比如：

g- 布局命名
m- 模塊命名

3.語義化命名

//結構化命名
top { ... }

//改用語義化命名
nav { ... }

4.屬性的書寫順序

一系列相關聯的結構組成的整體

帶有一定的語義，而非表現

比如，翻頁器（或叫分頁器paging）、輪播圖。

為模塊分類命名（如.m-, .md-）

以一個主選擇器開頭（模塊根節點）

使用以主選擇器開頭的后代選擇器（模塊子節點）

  

    
鏈接
    
鏈接
  

//根節點
.m-nav { ... }
//子節點
.m-nav ul{ ... }
.m-nav li{ ... }
.m-nav a{ ... }
.m-nav .z-crt a{ ... }/* 交互狀態變化 */

若有一個模塊只是比上述模塊多了一個按鈕，其余部分完全相同，怎么辦？

為根節點加一個class就好了，這里我們加一個 m-nav-1。

  

    
鏈接
    
鏈接
  
  我是新加的a標簽

//變化的部分在 .m-nav-1 這個新class中寫
.m-nav-1 { ... }
.m-nav-1 a{ ... }
.m-nav-1 .btn{ ... }

規范頁：包含了CSS規范、HTML規范和工程師規范

代碼庫：包含了常用的布局方式、常見模塊和元件的實現以及一些bug、技巧等

——————
教是最好的學。