摘要：一內(nèi)聯(lián)元素與行元素的區(qū)別內(nèi)聯(lián)元素即行內(nèi)元素。絕對(duì)定位，相對(duì)于定位以外的第一個(gè)父元素進(jìn)行定位，元素脫離文檔流。

1、內(nèi)聯(lián)元素即行內(nèi)元素。
2、內(nèi)聯(lián)元素，在文檔流中擠在一行；不能設(shè)置寬高（即，即使設(shè)置了也不管用，例如a標(biāo)簽）、margin和padding的top和bottom
塊元素，獨(dú)占一行；可以設(shè)置寬高、margin、padding
3、可以使用display屬性進(jìn)行修改：display:block|inline-block|inline
4、inline-block
水平排列；有寬高、margin和padding
1）可置換元素——天生的行內(nèi)塊

  img input button select textarear label

2）行內(nèi)塊不同于行內(nèi)元素，可以設(shè)置寬高
3）包裹性

  讓元素inline-block化
  inline-block在添加寬高之前，緊緊包裹內(nèi)容，添加寬高之后就不是了
  block默認(rèn)寬度100%，設(shè)置absolute，變成包裹內(nèi)容
 

1、static
沒(méi)有定位，元素出現(xiàn)在正常的文檔流中，默認(rèn)屬性。
設(shè)置left、right、top、bottom、z-index屬性的設(shè)置不起作用
2、relative
相對(duì)于元素自己的正常位置進(jìn)行定位，元素在正常的文檔流中
LRTBZ屬性設(shè)置起作用
3、fixed
固定定位，相對(duì)于瀏覽器窗口定位，即瀏覽器滾動(dòng)也不會(huì)影響元素的位置，且與文檔流無(wú)關(guān)，因此不占空間，可能會(huì)與其他元素重疊。LRTBZ屬性設(shè)置起作用。
4、absolute
絕對(duì)定位，相對(duì)于static定位以外的第一個(gè)父元素進(jìn)行定位，元素脫離文檔流。
注意：body也是父元素

聯(lián)系：都能讓元素不可見(jiàn)

區(qū)別：

注意：讀屏器即為瀏覽器渲染

只要某個(gè)改動(dòng)會(huì)影響其他元素，就會(huì)造成回流。
回流：修改元素的布局樣式，例如width、height、top、margin等會(huì)影響整個(gè)頁(yè)面的布局，瀏覽器會(huì)重新執(zhí)行l(wèi)ayout過(guò)程，性能開(kāi)銷很大。（尺寸、位置、隱藏狀態(tài)等布局樣式）
重繪：修改元素的非布局樣式，例如，color、background等，不影響整個(gè)頁(yè)面的布局，瀏覽器只會(huì)對(duì)該元素重新繪制，開(kāi)銷相對(duì)較小。
注意：回流必將引起重繪，但是重繪不一定會(huì)引起回流。
性能優(yōu)化

使用visibility:hidden;，而不用display:none;隱藏元素

如果需要頻繁地修改DOM樣式，盡量使用預(yù)先定義好的CSS的class修改DOM的className.

為需要添加動(dòng)畫的HTML元素，添加position:absolute|fixed;屬性值，這樣修改該元素的CSS時(shí)不會(huì)引起回流（動(dòng)畫最好用CSS3動(dòng)畫，只會(huì)引起兩次重繪）——分析：這是因?yàn)榻^對(duì)定位和固定定位可以讓元素脫離文檔流。

不要使用table布局。因?yàn)榭赡芎苄〉母膭?dòng)，就會(huì)引起整個(gè)table的重新布局。

——分析：冗余度 table>div>flex
table元素的作用是顯示表格化的數(shù)據(jù)，不是作為布局工具設(shè)置的。
一般使用div+css實(shí)現(xiàn)布局。
為什么不用table布局呢？
1、table比其他HTML標(biāo)記占更多的字節(jié)，造成下載延遲，占用服務(wù)器更多流量資源。
2、阻擋瀏覽器渲染引擎的渲染順序，會(huì)延遲頁(yè)面的生成速度，讓用戶等待更久的時(shí)間。
如何最小化重繪和回流？
答：
1）對(duì)元素進(jìn)行復(fù)雜操作時(shí)，可以先用display:none;隱藏，操作完成后再顯示。
2）盡量避免使用table布局
3）避免使用CSS表達(dá)式，因?yàn)槊看握{(diào)用都會(huì)重新計(jì)算值
4）需創(chuàng)建多個(gè)DOM節(jié)點(diǎn)時(shí)，使用DocumentFragment創(chuàng)建完后一次性地加入document。例如，

var frag = document.createDocumentFragment()//文檔碎片節(jié)點(diǎn)
//將element通過(guò)appendChild添加到frag中，再講frag一次性加入document

1、解析HTML標(biāo)簽，構(gòu)建DOM樹(shù)
2、解析CSS文件，構(gòu)建CSS Rule Tree
3、根據(jù)DOM樹(shù)和CSS規(guī)則書，構(gòu)建render tree。DOM Tree中一些節(jié)點(diǎn)不會(huì)被放入到Render Tree中。例如，header、display為none的節(jié)點(diǎn)。
4、構(gòu)建出render tree后，瀏覽器已經(jīng)知道頁(yè)面中有哪些節(jié)點(diǎn)以及對(duì)應(yīng)的樣式、從屬關(guān)系等。在layout過(guò)程中計(jì)算每個(gè)節(jié)點(diǎn)在頁(yè)面中的位置，最后繪制到頁(yè)面上。

圖片來(lái)源

可以通過(guò)box-sizing:border-box|content-box;來(lái)設(shè)置盒模型。
HTML文檔中各元素被渲染描述成矩形盒子。
盒模型表示每個(gè)元素盒子所占空間大小的模型。
分類：

W3C標(biāo)準(zhǔn)盒模型（IE6及以上版本）content-box:width=content

IE怪異盒模型（IE6以下版本）border-box：width=content+padding——不能用padding撐開(kāi)盒子

1、先遍歷內(nèi)嵌樣式，接著頭部樣式，最后外鏈樣式（外鏈樣式放在頭部樣式之后，對(duì)于同一元素而言，外鏈樣式則會(huì)覆蓋頭部樣式）
2、CSS優(yōu)先級(jí)（!important>內(nèi)嵌樣式>頭部樣式）
3、同一優(yōu)先級(jí)文件內(nèi)，ID>class、屬性選擇器、偽類>div、偽元素
4、同一優(yōu)先級(jí)內(nèi)，后面樣式覆蓋前面樣式

4個(gè)基礎(chǔ)選擇器，5個(gè)復(fù)合選擇器
選擇器是一種模式，用于選擇需要添加樣式的元素。
（1）4種基礎(chǔ)選擇器
類選擇器；ID選擇器；通配符選擇器（*）；元素選擇器
（2）5種復(fù)合選擇器
交集選擇器：標(biāo)簽+類/id選擇器{屬性:值;}
并集選擇器：例如：h1,h2,p（也叫選擇器分組）
后代選擇器：選擇器+空格+選擇器（兩個(gè)選擇器必須滿足嵌套關(guān)系，父元素在前，子元素在后，無(wú)限制隔代）
子代選擇器：選擇器>選擇器（選中直接下一代元素，也叫子選擇器，子元素選擇器）
相鄰兄弟選擇器：例如：h1+p（兩者具有相同父元素）
補(bǔ)充：屬性選擇器：ahref{color:red;}
CSS偽類：向某些選擇器添加特殊效果。例如a:link|visited|hover|active;:focus（擁有鍵盤輸入焦點(diǎn)，無(wú)法再IE中工作）;:first-child（元素的第一個(gè)子元素）;:lang（帶有指定lang屬性）
CSS偽元素：向某些選擇器設(shè)置特殊效果。例如，p:first-line|first-letter;h1:before|after。在CSS3中變成了::，增加了::selection

具體見(jiàn)淺談CSS布局

簡(jiǎn)單來(lái)講，CSS Hack就是針對(duì)不同的瀏覽器或同一瀏覽器的不同版本編寫特定的CSS樣式，以獲得統(tǒng)一的頁(yè)面效果。
CSS Hack包括：

屬性Hack
IE6能識(shí)別下劃線“_”和星號(hào)“*”
IE7能識(shí)別星號(hào)“*”，但不能識(shí)別下劃線“_”

選擇器Hack
IE6能識(shí)別*html .class{}
IE7能識(shí)別*+html .class