摘要：將元素顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。我們知道內(nèi)聯(lián)元素是無(wú)法設(shè)置寬高的，所以一旦將元素的屬性設(shè)為，設(shè)置屬性和是沒有用的。這個(gè)屬性值融合了和的特性，即是它既是內(nèi)聯(lián)元素，又可以設(shè)置和。

行內(nèi)元素設(shè)置width,height無(wú)效。但是設(shè)置margin和padding是有效的。
行內(nèi)非替換元素的外邊距不會(huì)改變一個(gè)元素的行高

div, form, table, header, aside, section, article, figure, figcaption, h1~h6, nav, p, pre, blockqoute, canvas, ol, ul, dl


span, a, img, label, input, select, textarea, br, i, em, strong, small, button, sub, sup, code

允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素。
box-sizing: content-box|border-box|inherit;
一般在做自適應(yīng)的網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候用，用這個(gè)屬性網(wǎng)頁(yè)結(jié)構(gòu)才不會(huì)被破壞。
常用的值：
content-box，border和padding不計(jì)算入width之內(nèi)
padding-box，padding計(jì)算入width內(nèi)
border-box，border和padding計(jì)算入width之內(nèi)，其實(shí)就是怪異模式了~
兼容性
-webkit-box-sizing: 100px; // for ios-safari, android
-moz-box-sizing:100px; //for ff
box-sizing:100px; //for other

BFC(block formatting context)塊級(jí)格式化上下文。是一個(gè)html盒子，里面的元素左對(duì)齊
定義：
float的值不為none
position的值不為static或者relative
display的值為 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一個(gè)
overflow的值不為visible

毗鄰塊盒子的垂直外邊距折疊只有他們是在同一BFC時(shí)才會(huì)發(fā)生。如果他們屬于不同的BFC，他們之間的外邊距將不會(huì)折疊
BFC的作用
1、 清除內(nèi)部浮動(dòng)
我們?cè)诓季謺r(shí)經(jīng)常會(huì)遇到這個(gè)問題：對(duì)子元素設(shè)置浮動(dòng)后，父元素會(huì)發(fā)生高度塌陷，也就是父元素的高度變?yōu)?。解決這個(gè)問題，只需要把把父元素變成一個(gè)BFC就行了。常用的辦法是給父元素設(shè)置overflow:hidden。
2、 垂直margin合并
在CSS當(dāng)中，相鄰的兩個(gè)盒子的外邊距可以結(jié)合成一個(gè)多帶帶的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。
折疊的結(jié)果：
兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值。
兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值的較大值。
兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和。
這個(gè)同樣可以利用BFC解決。關(guān)于原理在前文已經(jīng)講過了。
3、 創(chuàng)建自適應(yīng)兩欄布局
在很多網(wǎng)站中，我們?？吹竭@樣的一種結(jié)構(gòu)，左圖片+右文字的兩欄結(jié)構(gòu)。
在圖片和文字的樣式中都加入overflow:hidden使他變?yōu)閴K級(jí)格式化上下文。
(我對(duì)BFC的理解)[https://www.jianshu.com/p/764...]

html5：語(yǔ)義化標(biāo)簽；增強(qiáng)型表單；視頻和音頻；canvas；svg繪圖；地理定位；拖放api；webworker；storage（sessionStorage和localStorage）；webSocket；
HTML5的十大新特性
css3:
（1） CSS3實(shí)現(xiàn)圓角（border-radius），陰影（box-shadow），邊框圖片border-image

（2） 對(duì)文字加特效（text-shadow、），強(qiáng)制文本換行（word-wrap），線性漸變（linear-gradient）

（3）旋轉(zhuǎn),縮放,定位,傾斜：transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);

（4） 增加了更多的CSS選擇器、多背景、rgba()；

（5）在CSS3中唯一引入的偽元素是 ::selection ；

（6） 媒體查詢(@media)，多欄布局（flex）

也就是防止元素高度塌陷
1、父元素變?yōu)锽FC塊級(jí)格式化上下文overflow:hidden;
缺點(diǎn)：元素溢出無(wú)法控制顯示，不要用
2、clear:{

clear:both;

}
3、偽元素after和before，clear:both
IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout

鑒于 IE/Mac的市場(chǎng)占有率極低,我們直接忽略掉,最后精簡(jiǎn)的代碼如下:

.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    visibility:hidden; 
    clear:both; 
    }
.clearfix { 
    *zoom:1; 
    }

1) display:block 使生成的元素以塊級(jí)元素顯示,占滿剩余空間;
2) height:0 避免生成內(nèi)容破壞原有布局的高度。
3) visibility:hidden 使生成的內(nèi)容不可見，并允許可能被生成內(nèi)容蓋住的內(nèi)容可以進(jìn)行點(diǎn)擊和交互;
4）通過 content:"."生成內(nèi)容作為最后一個(gè)元素，至于content里面是點(diǎn)還是其他都是可以的，,有些版本可能content 里面內(nèi)容為空,不推薦這樣做的,firefox直到7.0 content:”" 仍然會(huì)產(chǎn)生額外的空隙；after在元素之后插入content的內(nèi)容。
5）zoom：1 觸發(fā)IE hasLayout。
通過分析發(fā)現(xiàn)，除了clear：both用來(lái)閉合浮動(dòng)的，其他代碼無(wú)非都是為了隱藏掉content生成的內(nèi)容，這也就是其他版本的閉合浮動(dòng)為什么會(huì)有font-size：0，line-height：0。

CSS水平垂直居中常見方法總結(jié)
1、元素在文檔流里是緊密布局的，不能直接使用top left直接移動(dòng)元素，容易造成混亂。
使用position:relative;元素在文檔流中位置不浮動(dòng)來(lái)改變?cè)氐木又小?/p>

content{
    margin-top:-50% of height;<--偽代碼-->
    position:relative;
    top:50%;<--或者使用transform:translateY(50%);-->
}

2、彈性布局flex

body {
    display: flex;
    align-items: center; /*定義body的元素垂直居中*/
    justify-content: center; /*定義body的里的元素水平居中*/
}
.content {
    width: 300px;
    height: 300px;
    background: orange;        
}

3、將父容器設(shè)置為display:table
然后將子元素也就是要垂直居中顯示的元素設(shè)置為 display:table-cell 。
但是，這是不值得推薦的，因?yàn)闀?huì)破壞整體的布局

談?wù)凜SS預(yù)處理器
目前最主流的CSS預(yù)處理器是LESS、SASS和Stylus

添加一些選擇器的特殊效果。
格式是：選擇器：偽類
after 元素后插入內(nèi)容
before 元素之前插入內(nèi)容
empty 元素內(nèi)空的子元素

精華帖CSS選擇器優(yōu)先級(jí)總結(jié)
id > 類選擇器 > 標(biāo)簽選擇器>

圣杯布局、雙飛翼布局、Flex布局和絕對(duì)定位布局

display 屬性規(guī)定元素應(yīng)該生成的框的類型。
其中常用的的有none、inline、block、inline-block。分別的意思是：
1) none： 元素不會(huì)顯示，而且改元素現(xiàn)實(shí)的空間也不會(huì)保留。但有另外一個(gè) visibility: hidden， 是保留元素的空間的。
2) inline： display的默認(rèn)屬性。將元素顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。我們知道內(nèi)聯(lián)元素是無(wú)法設(shè)置寬高的，所以一旦將元素的display 屬性設(shè)為 inline， 設(shè)置屬性height和width是沒有用的。此時(shí)影響它的高度一般是內(nèi)部元素的高度（font-size）和padding。
3) block： 將元素將顯示為塊級(jí)元素，元素前后會(huì)帶有換行符。設(shè)置為block后，元素可以設(shè)置width和height了。元素獨(dú)占一行。
4) inline-block：行內(nèi)塊元素。這個(gè)屬性值融合了inline 和 block 的特性，即是它既是內(nèi)聯(lián)元素，又可以設(shè)置width和height。

px是固定的像素，一旦設(shè)置了就無(wú)法因?yàn)檫m應(yīng)頁(yè)面大小而改變。
em和rem相對(duì)于px更具有靈活性，他們是相對(duì)長(zhǎng)度單位，意思是長(zhǎng)度不是定死了的，更適用于響應(yīng)式布局。
對(duì)于em和rem的區(qū)別一句話概括：em相對(duì)于父元素，rem相對(duì)于根元素。

（1）有兩種， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border)；
（3）區(qū) 別： IE的content部分把 border 和 padding計(jì)算了進(jìn)去;