（1）清除瀏覽器默認(rèn)樣式
（2）全局樣式定義

（1）項(xiàng)目開發(fā)初期就定義好
（2）reset.css 在引入的時(shí)候一定要放在第一位
（3）不同的產(chǎn)品reset.css不一樣

table {
  border-collapse: collapse; // 合并邊框
  border-spacing: 0; //邊框間距。當(dāng) `border-collapse` 值為 `seperate` 時(shí)生效

}

    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

要達(dá)到的效果是這樣：

主要代碼：

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

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

主要代碼：

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

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

動(dòng)動(dòng)小手看看栗子

主要代碼：

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

這種方法有一個(gè)問題是：parent設(shè)置了text-align: center;后， 因?yàn)檫@個(gè)屬性可繼承，會(huì)導(dǎo)致child中的文字也會(huì)居中，而這個(gè)效果是我們未必需要的，所以我們很多時(shí)候需要在.child中加一句 text-align: left;

自己看看栗子

主要代碼：

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

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

優(yōu)點(diǎn)：只設(shè)置子元素樣式就可以了，不需關(guān)心父元素。

看看栗子

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

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

意欲達(dá)到的效果：

.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是間距

因?yàn)榉椒?在低版本瀏覽器有兼容性問題，所以改進(jìn)一下。

// 首先在right外面加了right-fix這個(gè)div

  
left
  
 
    

      
right
      
right
    
  

CSS改動(dòng)：

STEP1：

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

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

STEP2：

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

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

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

效果如圖：

STEP3：

不幸的是，因?yàn)閔tml文檔中right-fix處于left后面，所以left被right-fix遮住了，實(shí)際應(yīng)用中right-fix雖然沒有背景色，但是我們還是不會(huì)希望它覆蓋在left上面。

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

.left{ position: relative; }

具體可以參考張?chǎng)涡駥懙囊黄v解position:relative;很詳細(xì)的文章：CSS 相對(duì)/絕對(duì)(relative/absolute)定位系列（四）

最終達(dá)到我們要的效果：

到j(luò)sfiddle中自己試試去

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

原理是：設(shè)置了overflow:hidden; 之后，會(huì)觸發(fā)BFC模式，而BFC模式內(nèi)部的布局不受外部影響，所以不會(huì)受浮動(dòng)影響，不會(huì)圍繞left而是跑到left右邊去了。

.parent{
  display: table;
  width: 100%;
  table-layout: fixed; //加速table渲染，實(shí)現(xiàn)了布局優(yōu)先
}
.left, .right {
  display: table-cell;
}
.left {
  width: 100px;
  padding-right: 20px;//因?yàn)閠able-cell不能設(shè)margin，所以設(shè)置padding來加間距
}

根據(jù)table的特性,left設(shè)置了100px后，right就占了剩余寬度。

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

So easy.

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

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

以下方法對(duì)應(yīng) [一列定寬+一列自適應(yīng)] 中的方法

方法1： float + margin ？

不好意思，做不到。

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

不好意思，也做不到。

方法3： float + overflow ？

闊以！right的樣式?jīng)]有依賴于width的寬度。代碼量也少，很棒棒哦！

方法4：table

闊以！right的樣式?jīng)]有依賴于width的寬度，即不關(guān)心width的寬度。

方法5：flex

強(qiáng)大的flex當(dāng)然可以~（傲嬌臉 ）

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

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

結(jié)構(gòu)：

  
1
  
2
  
3
  
4

方法1：float

.parent{ margin-left: -20px; }//就是上面公式中等號(hào)左邊的G
.column{
  float: left;
  width: 25%;
  padding-left: 20px;//這里要注意，因?yàn)槲覀冇胮adding來表示間距，所以如果你是給p元素設(shè)置了background-color，會(huì)發(fā)現(xiàn)沒有間距，p標(biāo)簽的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;//因?yàn)閱卧癫荒茉O(shè)置margin，所以間距只能用padding來做。
}

因?yàn)閠able的width默認(rèn)是隨內(nèi)容寬度變化的，所以需要手動(dòng)設(shè)置width: 100%;。又因?yàn)槊鞔_設(shè)置了寬度的元素就沒辦法用將margin設(shè)為負(fù)值的方式增加20px寬度了，所以需要在外面加一個(gè)父元素parent-fix。
這里大家可以自己試試比較一下給parent-fix設(shè)置width為100%與不設(shè)置width時(shí)parent-fix實(shí)際寬度（用調(diào)試工具里的查看元素看）的區(qū)別來理解。

吶，jsfiddle示例在這

方法3：flex

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

右側(cè)變高，左側(cè)高度隨之變化：

↓↓

方法1：table

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

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

方法2：flex

flex也是天然的等高 <(￣︶￣)> 因?yàn)樗J(rèn)的align-items為stretch，即在交叉軸上默認(rèn)拉伸占滿整個(gè)容器。

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

簡(jiǎn)單到不好意思給栗子

方法3：float

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

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

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

栗子

這是練習(xí)題，置幾試試吧。

  

    
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

一個(gè)栗子不一定對(duì)

只有主內(nèi)容區(qū) right 隨內(nèi)容滾動(dòng)。

方法1.position

top
left
right
bottom

html, body, .parent {height: 100%; overflow: hidden;}//為了讓整個(gè)頁面不滾動(dòng)
.top {
  position: absolute;
  top: 0; 
  left: 0; right: 0; //注意這個(gè)很棒的設(shè)置！可以自動(dòng)占滿整行 ヾ(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;//讓主內(nèi)容區(qū)可以滾動(dòng)
}
.help-right {//假裝有很多內(nèi)容
  width: 1000px;
  height: 1000px;
}
.bottom{
  position: absolute;
  bottom: 0; 
  left: 0; right: 0;
  height: 50px;
}

動(dòng)手寫寫才記得住

方法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寫的定寬改成百分比就可以了。是相對(duì)于body的高度和寬度來變化的。感覺top和bottom高度設(shè)置百分比不是很實(shí)用。

方法1.position

定寬的高度和寬度影響旁邊欄的布局，所以實(shí)現(xiàn)不了 - 。-

方法2.flex

闊以實(shí)現(xiàn)，而且相當(dāng)簡(jiǎn)單 ╮(╯▽╰)╭ 把剛剛設(shè)置了高度和寬度的地方去掉就可以了 ∑(っ °Д °;)っ

驚人的栗子

方法3.Grid

闊以實(shí)現(xiàn)，但是因?yàn)檫€是W3C的草案，所以會(huì)經(jīng)常變化，不穩(wěn)定，而且瀏覽器支持也不好。

只寫一個(gè)網(wǎng)站，在多個(gè)終端顯示，在小屏幕上會(huì)隱藏部分元素。

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

@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
便于代碼維護(hù)

（1）多個(gè)css文件合并成一個(gè)
（2）少量css樣式內(nèi)聯(lián)
（3）避免用import的方式引入css文件，因?yàn)槊總€(gè)import語句都會(huì)產(chǎn)生一個(gè)css請(qǐng)求，并且是同步的請(qǐng)求。

（1）減少圖片大小
選擇合適的圖片格式，小尺寸、半透明的用png，大尺寸、色彩絢麗用jpg（因?yàn)閖pg會(huì)對(duì)圖片進(jìn)行壓縮）
壓縮圖片

（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）文件壓縮
用工具對(duì)文件進(jìn)行自動(dòng)壓縮，去掉空格。

css通常放在head中，而js通常放在body底部，因?yàn)閖s會(huì)阻礙其他資源加載。

body .menu ul li a { ... } //太長(zhǎng)了
.menu a { ... } //更好

比如：

expression
filter
border-radius
box-shadow
gradients

（1）規(guī)范：縮進(jìn)，變量名等
（2）語義化：除了標(biāo)簽，css、id名最好也盡量有意義
（3）盡量避免Hack，一定要用也要統(tǒng)一的標(biāo)識(shí)，比如IE7用*
（4）模塊化：相關(guān)聯(lián)的結(jié)構(gòu)做成一個(gè)個(gè)模塊，復(fù)用性更強(qiáng)
（5）添加注釋

1.注釋的文字兩側(cè)需加空格，防止因編碼問題導(dǎo)致注釋失效

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

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

3.語義化命名

//結(jié)構(gòu)化命名
top { ... }

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

4.屬性的書寫順序

一系列相關(guān)聯(lián)的結(jié)構(gòu)組成的整體

帶有一定的語義，而非表現(xiàn)

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

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

以一個(gè)主選擇器開頭（模塊根節(jié)點(diǎn)）

使用以主選擇器開頭的后代選擇器（模塊子節(jié)點(diǎn)）

  

    
鏈接
    
鏈接
  

//根節(jié)點(diǎn)
.m-nav { ... }
//子節(jié)點(diǎn)
.m-nav ul{ ... }
.m-nav li{ ... }
.m-nav a{ ... }
.m-nav .z-crt a{ ... }/* 交互狀態(tài)變化 */

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

為根節(jié)點(diǎn)加一個(gè)class就好了，這里我們加一個(gè) m-nav-1。

  

    
鏈接
    
鏈接
  
  我是新加的a標(biāo)簽

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

規(guī)范頁：包含了CSS規(guī)范、HTML規(guī)范和工程師規(guī)范

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

——————
教是最好的學(xué)。