css基礎知識整理篇

**某個大神整理的面試題

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

content部分把border和padding算進去了

1、id選擇器 #myid 2、類選擇器 .myclassname 3、標籤選擇器 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 選擇屬於父元素的首個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 單選框或核取方塊被選中

block 像塊型別元素一樣顯示 inline 像行內元素一樣顯示 inline-block 像行內元素一樣顯示，但其內容像塊型別元素一樣顯示 list-item 像塊型別元素一樣顯示，並新增樣式列表標記 table 次元素會作為塊級**來顯示

inherit 規定應該從父元素繼承

absolute:生成絕對定位的元素，相對於值不為static的第乙個父元素進行定位 fixed:生成絕對定位的元素，相對於瀏覽器視窗進行定位 relative:生成相對定位的元素，相對於其正常位置進行定位 static:預設值，沒有定位，元素出現在正常的流中，忽略top,bottom,left,right,z-index宣告

inherit:規定從父元素繼承

#demo

html: css: #div #div2,#div3

#div2

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

因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對css初始化往往會出現瀏覽器之間的頁面顯示差異

css裡的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？

當乙個元素的visibility屬性被設定成collapse值後，對於一般的元素，它的表現跟hidden是一樣的。但例外的是，如果這個元素是table相關的元素，例如table行，table group，table列，table column group，它的表現卻跟display: none一樣，也就是說，它們占用的空間也會釋放。在谷歌瀏覽器裡，使用collapse值和使用hidden值沒有什麼區別;

在火狐瀏覽器、opera和ie11裡，使用collapse值的效果就相當於display:none;

若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按照上述計算方法計算，

如果不是，則應用設定值

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的條件： 1、浮動元素，float 除 none 以外的值； 2、絕對定位元素，position（absolute，fixed）； 3、display 為以下其中之一的值 inline-block，table-cell，table-captions；

4、overflow 除了 visible 以外的值（hidden，auto，scroll）

1、避免使用多類選擇符 2、移除空的css規則 3、正確使用display屬性 4、不濫用浮動 5、不濫用web字型 6、不宣告過多的font-size 7、不在選擇符中使用id標示符 8、不重複定義h1~h6元素 9、值為0的時候不需要任何單位 10、標準化各種瀏覽器字首 11、使用css漸變等高階特性，需要指定多有瀏覽器字首

12、遵守盒模型規則

偶數用得比較多，可能是因為便於計算吧

何時當用margin: 需要再border外側新增空白時；空白處不需要背景時；上下相連的兩個盒子之間的空白，需要相互抵消時。何時當用padding: 需要在border內側新增空白時；空白處需要背景時；

上下相連的兩個盒子之間的空白，希望能與兩者之和時

多數顯示器預設頻率是60hz，即1秒重新整理60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms

單冒號(:)用於css3偽類，雙冒號(::)用於css3偽元素。

css基礎知識整理篇

Web前端基礎知識整理 CSS篇

css基礎知識整理

css基礎知識整理

相關推薦