1.主流瀏覽器及其核心

• IE–trident
• Firefox–Gecko
• Google chrome–blink
• Safari–webkit
• Opera–presto

2.主流瀏覽器及其核心

• 偽類:hover–不佔DOM結構
• 偽元素:before, :after–佔DOM結構

3.垂直水平居中

1.塊級元素水平居中
margin: 0 auto;
2.塊級元素，行級塊元素垂直水平居中

• 子元素已知寬度:：父元素設定為：position: relative; 子元素設定為：position: absolute; 利用top50%，left50%，margin-left，margin-top
• 子元素未知寬度：父元素設定為：position: relative; 子元素設定為：position: absolute; 利用top50%，left50%，transform: translate(-50%,-50%);

3.所有元素垂直水平居中
flex佈局

display: flex;
justify-content: center;//使子專案水平居中
align-items: center;//使子專案垂直居中
4.兩欄佈局

• 絕對定位
  .left {position:absolute;left:0; width:200px;}
  .right {margin-left:200px;}
• 浮動佈局
  .left {width:300px; float:left;}
  .right { margin-left:300px;}
• flex佈局

5.解決margin塌陷

• 觸發一個盒子的 bfc//bfc=block format context 塊級格式化上下文
  position:absolute；display:inline；float:left/rightoverflow:hidden；

6.清楚浮動
clearfix::after{
content:””；
clear:both；
display:block；}
7.background簡寫
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];