摘要：折疊后的計(jì)算參與折疊的都是正值在都是正數(shù)的情況下，取其中較大的值為最終值。參與折疊的中有正值，有負(fù)值有正有負(fù)，先取出負(fù)中絕對(duì)值中最大的，然后，和正值中最大的相加。單冒號(hào)用于偽類，雙冒號(hào)用于偽元素。

轉(zhuǎn)自某個(gè)大神整理的面試題

內(nèi)容（content）+ 填充（padding）+ 邊界（margin）+ 邊框（border）;

content部分把border和padding算進(jìn)去了

1、id選擇器  #myid
2、類選擇器  .myClassName
3、標(biāo)簽選擇器  div,h1,p
4、相鄰選擇器  h1+p
5、子選擇器  ul>li
6、后代選擇器  li a
7、通配符選擇器  *
8、屬性選擇器  a[rel = "external"]
9、偽類選擇器  a:hover,li:nth-child

可繼承的樣式：font-size  font-family  color  ul  li  dl  dd  dt;
不可繼承的樣式：border  padding  margin  wdith  height

p:first-of-type  選擇屬于父元素的首個(gè)P元素的每個(gè)p元素
p:last-of-type  選擇屬于父元素的最后一個(gè)p元素的每個(gè)p元素
p:only-of-type  選擇屬于父元素的唯一的p元素的每個(gè)p元素
p:only-cild  選擇屬于父元素的唯一子元素的每個(gè)p元素
p:nth-child(2)  選擇屬于其父元素的第二個(gè)子元素的每個(gè)p元素
:after  在元素之后添加內(nèi)容
:before  在元素之前添加內(nèi)容
:enabled  控制表單控件的禁用狀態(tài)
:disabled  同上
:checked  單選框或復(fù)選框被選中

https://segmentfault.com/a/11...

block  像塊類型元素一樣顯示
inline  像行內(nèi)元素一樣顯示
inline-block  像行內(nèi)元素一樣顯示，但其內(nèi)容像塊類型元素一樣顯示
list-item  像塊類型元素一樣顯示，并添加樣式列表標(biāo)記
table  次元素會(huì)作為塊級(jí)表格來顯示
inherit  規(guī)定應(yīng)該從父元素繼承

absolute:生成絕對(duì)定位的元素，相對(duì)于值不為static的第一個(gè)父元素進(jìn)行定位
fixed:生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位
relative:生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位
static:默認(rèn)值，沒有定位，元素出現(xiàn)在正常的流中，忽略top,bottom,left,right,z-index聲明 
inherit:規(guī)定從父元素繼承

https://segmentfault.com/a/11...

#demo {
    width:0;
    height:0;
    border-width:20px;
    border-style:solid;
    border-color:transparent transparent red transparent;
}

html:



css:
#div {
    width:100%;
    height:50%;
}
#div2,#div3{
    width:50%;
    height:50%;
}
#div2{
    float:left;
}

行框的排列會(huì)受到中間空白（回車、空格）等影響，因?yàn)榭崭褚矊儆谧址@些空白也會(huì)被應(yīng)用樣式，占據(jù)空間，所以會(huì)有間隔，把字符大小設(shè)為0，就沒有空格了

因?yàn)闉g覽器的兼容問題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異

CSS里的visibility屬性有個(gè)collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區(qū)別？

當(dāng)一個(gè)元素的visibility屬性被設(shè)置成collapse值后，對(duì)于一般的元素，它的表現(xiàn)跟hidden是一樣的。
但例外的是，如果這個(gè)元素是table相關(guān)的元素，例如table行，table group，table列，table column group，
它的表現(xiàn)卻跟display: none一樣，也就是說，它們占用的空間也會(huì)釋放。   
在谷歌瀏覽器里，使用collapse值和使用hidden值沒有什么區(qū)別;
在火狐瀏覽器、Opera和IE11里，使用collapse值的效果就相當(dāng)于display:none;

若display:none,則position和float都不起作用；

display不是none,當(dāng)position:absolute或fixed的時(shí)候，float的計(jì)算值都為none,且display的計(jì)算方法為
inline-table ——> table
inline,run-in,table-row-group,table-column,table-column-group,table-eader-group,table-footer-group,table-row,table-cell,table-caption,inline-block ——> block
其他 ——> 同設(shè)定值

display不是none,position不是absolute或fixed,
當(dāng)float不是none，即有設(shè)定值，則display按照上述計(jì)算方法計(jì)算；

當(dāng)float是none，即沒有設(shè)定值：
若元素時(shí)根元素，display按照上述計(jì)算方法計(jì)算，
如果不是，則應(yīng)用設(shè)定值

1.兩個(gè)或多個(gè)毗鄰的普通流中的塊元素垂直方向上的 margin 會(huì)折疊。

折疊后 margin 的計(jì)算:
1). 參與折疊的 margin 都是正值:
在 margin 都是正數(shù)的情況下，取其中 margin 較大的值為最終 margin 值。   
2). 參與折疊的 margin 都是負(fù)值:
當(dāng) margin 都是負(fù)值的時(shí)候，取的是其中絕對(duì)值較大的，然后，從 0 位置，負(fù)向位移。
3). 參與折疊的 margin 中有正值，有負(fù)值
有正有負(fù)，先取出負(fù) margin 中絕對(duì)值中最大的，然后，和正 margin 值中最大的 margin 相加。
4). 相鄰的 margin 要一起參與計(jì)算，不得分步計(jì)算

2. 浮動(dòng)元素、inline-block 元素、絕對(duì)定位元素的 margin 不會(huì)和垂直方向上其他元素的 margin 折疊

3.創(chuàng)建了塊級(jí)格式化上下文的元素，不和它的子元素發(fā)生 margin 折疊 

4.元素自身的 margin-bottom 和 margin-top 相鄰時(shí)也會(huì)折疊        

形成BFC的條件：
1、浮動(dòng)元素，float 除 none 以外的值； 
2、絕對(duì)定位元素，position（absolute，fixed）； 
3、display 為以下其中之一的值 inline-block，table-cell，table-captions； 
4、overflow 除了 visible 以外的值（hidden，auto，scroll）

1、避免使用多類選擇符
2、移除空的css規(guī)則
3、正確使用display屬性
4、不濫用浮動(dòng)
5、不濫用web字體
6、不聲明過多的font-size
7、不在選擇符中使用id標(biāo)示符
8、不重復(fù)定義h1~h6元素
9、值為0的時(shí)候不需要任何單位
10、標(biāo)準(zhǔn)化各種瀏覽器前綴
11、使用CSS漸變等高級(jí)特性，需要指定多有瀏覽器前綴
12、遵守盒模型規(guī)則

偶數(shù)用得比較多，可能是因?yàn)楸阌谟?jì)算吧

何時(shí)當(dāng)用margin:
需要再border外側(cè)添加空白時(shí)；
空白處不需要背景時(shí)；
上下相連的兩個(gè)盒子之間的空白，需要相互抵消時(shí)。

何時(shí)當(dāng)用padding:
需要在border內(nèi)側(cè)添加空白時(shí)；
空白處需要背景時(shí)；
上下相連的兩個(gè)盒子之間的空白，希望能與 兩者之和時(shí)

多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms

單冒號(hào)(:)用于CSS3偽類，雙冒號(hào)(::)用于CSS3偽元素。