css基礎知識整理篇

轉自某個大神整理的面試題

盒子模型

標準盒子模型

內容（content）+ 填充（padding）+ 邊界（margin）+ 邊框（border）;

低版本IE盒子模型

content部分把border和padding算進去了

CSS選擇符

一、id選擇器  #myid
二、類選擇器  .myClassName
三、標籤選擇器  div,h1,p
四、相鄰選擇器  h1+p
五、子選擇器  ul>li
六、後代選擇器  li a
七、通配符選擇器  *
八、屬性選擇器  a[rel = "external"]
九、僞類選擇器  a:hover,li:nth-child

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

CSS3新增僞類

p:first-of-type  選擇屬於父元素的首個P元素的每一個p元素
p:last-of-type  選擇屬於父元素的最後一個p元素的每一個p元素
p:only-of-type  選擇屬於父元素的惟一的p元素的每一個p元素
p:only-cild  選擇屬於父元素的惟一子元素的每一個p元素
p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個p元素
:after  在元素以後添加內容
:before  在元素以前添加內容
:enabled  控制表單控件的禁用狀態
:disabled  同上
:checked  單選框或複選框被選中

垂直居中

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

display有哪些值

block  像塊類型元素同樣顯示
inline  像行內元素同樣顯示
inline-block  像行內元素同樣顯示，但其內容像塊類型元素同樣顯示
list-item  像塊類型元素同樣顯示，並添加樣式列表標記
table  次元素會做爲塊級表格來顯示
inherit  規定應該從父元素繼承

position:relative/absolute

absolute:生成絕對定位的元素，相對於值不爲static的第一個父元素進行定位
fixed:生成絕對定位的元素，相對於瀏覽器窗口進行定位
relative:生成相對定位的元素，相對於其正常位置進行定位
static:默認值，沒有定位，元素出如今正常的流中，忽略top,bottom,left,right,z-index聲明 
inherit:規定從父元素繼承

CSS3有哪些新特性

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

用純CSS建立一個三角形

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

滿屏 品 字佈局

html:
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
css:
#div {
    width:100%;
    height:50%;
}
#div2,#div3{
    width:50%;
    height:50%;
}
#div2{
    float:left;
}

li與li之間的空白間隔

行框的排列會受到中間空白（回車、空格）等影響，由於空格也屬於字符，這些空白也會被應用樣式，佔據空間，因此會有間隔，把字符大小設爲0，就沒有空格了

初始化CSS樣式

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別

visibility:collapse;

CSS裏的visibility屬性有個collapse屬性值是幹嗎用的？在不一樣瀏覽器下之後什麼區別？

當一個元素的visibility屬性被設置成collapse值後，對於通常的元素，它的表現跟hidden是同樣的。
但例外的是，若是這個元素是table相關的元素，例如table行，table group，table列，table column group，
它的表現卻跟display: none同樣，也就是說，它們佔用的空間也會釋放。   
在谷歌瀏覽器裏，使用collapse值和使用hidden值沒有什麼區別;
在火狐瀏覽器、Opera和IE11裏，使用collapse值的效果就至關於display:none;

position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

position跟display和float相互疊加的結果：

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

display不是none,當position:absolute或fixed的時候，float的計算值都爲none,且display的計算方法爲
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
其餘 ——> 同設定值

display不是none,position不是absolute或fixed,
當float不是none，即有設定值，則display按照上述計算方法計算；

當float是none，即沒有設定值：
若元素時根元素，display按照上述計算方法計算，
若是不是，則應用設定值

margin collapse

1.兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會摺疊。

摺疊後 margin 的計算:
1). 參與摺疊的 margin 都是正值:
在 margin 都是正數的狀況下，取其中 margin 較大的值爲最終 margin 值。   
2). 參與摺疊的 margin 都是負值:
當 margin 都是負值的時候，取的是其中絕對值較大的，而後，從 0 位置，負向位移。
3). 參與摺疊的 margin 中有正值，有負值
有正有負，先取出負 margin 中絕對值中最大的，而後，和正 margin 值中最大的 margin 相加。
4). 相鄰的 margin 要一塊兒參與計算，不得分步計算

2. 浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其餘元素的 margin 摺疊

3.建立了塊級格式化上下文的元素，不和它的子元素髮生 margin 摺疊 

4.元素自身的 margin-bottom 和 margin-top 相鄰時也會摺疊

BFC

造成BFC的條件：
一、浮動元素，float 除 none 之外的值； 
二、絕對定位元素，position（absolute，fixed）； 
三、display 爲如下其中之一的值 inline-block，table-cell，table-captions； 
四、overflow 除了 visible 之外的值（hidden，auto，scroll）

CSS優化、提升性能的方法有哪些？

一、避免使用多類選擇符
二、移除空的css規則
三、正確使用display屬性
四、不濫用浮動
五、不濫用web字體
六、不聲明過多的font-size
七、不在選擇符中使用id標示符
八、不重複定義h1~h6元素
九、值爲0的時候不須要任何單位
十、標準化各類瀏覽器前綴
十一、使用CSS漸變等高級特性，須要指定多有瀏覽器前綴
十二、遵照盒模型規則

瀏覽器是怎樣解析CSS選擇器的？從右向左

在網頁中的應該使用奇數仍是偶數的字體？爲何呢？

偶數用得比較多，多是由於便於計算吧

margin和padding分別適合什麼場景使用？

什麼時候當用margin:
須要再border外側添加空白時；
空白處不須要背景時；
上下相連的兩個盒子之間的空白，須要相互抵消時。

什麼時候當用padding:
須要在border內側添加空白時；
空白處須要背景時；
上下相連的兩個盒子之間的空白，但願能與 二者之和時

若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？

多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60＊1000ms ＝ 16.7ms

::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個僞元素的做用。

單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素。