前端面試CSS
選擇器的權重和優先順序
-
選擇器的型別：
- id選擇器(#myid)
- 類選擇器(.myclassname)
- 標籤選擇器(div, h1, p)
- 相鄰選擇器(h1 + p)
- 子選擇器（ul > li）
- 後代選擇器（li a）
- 萬用字元選擇器（*）
- 屬性選擇器（a[rel="external"]）
- 偽類選擇器（a:hover, li:nth-child）
權重分為四級：
代表內聯樣式，如style="xxx"，權值為 1000；
代表 ID 選擇器，如#content，權值為 100；
代表類、偽類和屬性選擇器，如.content、:hover、[attribute]，權值為 10；
代表元素選擇器和偽元素選擇器，如div、p，權值為 1。
需要注意的是：通用選擇器（*）、子選擇器（>）和相鄰同胞選擇器（+）並不在這四個等級中，所以他們的權值都為 0。 權重值大的選擇器其優先順序也高，相同權重的優先順序又遵循後定義覆蓋前面定義的情況。
盒模型
- 標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin
- 低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin
box-sizing屬性：
- content-box：一個標準模式下的盒模型的計算方式
- border-box：一個怪異模式下的盒模型的計算方式
div設定了box-sizing:border-box之後，width的寬度是內容 + padding + 邊框的寬度（不包括margin），這樣就比較符合我們的實際要求了。
浮動float
float被設計出來的初衷是用於文字環繞效果，即一個圖片一段文字，圖片float:left之後，文字會環繞圖片.
float 的破壞性 —— float 破壞了父標籤的原本結構，使得父標籤出現了坍塌現象。導致這一現象的最根本原因在於：被設定了 float 的元素會脫離文件流。其根本原因在於 float 的設計初衷是解決文字環繞圖片的問題。大家要記住 float 的這個影響。
清除浮動
.clearfix:after {
content: '';
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* 相容 IE 低版本 */
}
<div class="clearfix">
<img src="image/1.png" style="float: left"/>
<img src="image/2.png" style="float: left"/>
</div>
如何實現水平居中
inline元素使用
text-align: center
block元素使用
margin: auto
絕對定位元素可結合left和margin實現，但是必須知道寬度。
.item {
width: 300px;
height: 100px;
position: absolute;
left: 50%;
margin: -150px;
}
如何實現垂直居中
inline 元素可設定line-height的值等於height值，如單行文字垂直居中：
.container {
height: 50px;
line-height: 50px;
}
絕對定位元素，可結合left和margin實現，但是必須知道尺寸。
- 優點：相容性好
- 缺點：需要提前知道尺寸
.container {
position: relative;
height: 200px;
}
.item {
width: 80px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -40px;
}
絕對定位可結合transform實現居中。
- 優點：不需要提前知道尺寸
- 缺點：相容性不好
.container {
position: relative;
height: 200px;
}
.item {
width: 80px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: blue;
}
絕對定位結合margin: auto，不需要提前知道尺寸，相容性好
.container {
position: relative;
height: 300px;
}
.item {
width: 100px;
height: 50px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
移動端的佈局用過媒體查詢嗎?
- <head>裡邊<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">
- CSS : @media only screen and (max-device-width:480px) {/css樣式/}
css動畫
首先，使用@keyframes定義一個動畫，名稱為testAnimation，如下程式碼，通過百分比來設定不同的 CSS 樣式，規定動畫的變化。所有的動畫變化都可以這麼定義出來。
@keyframes myfirst
{
0%{background: red; left:0; top:0;}
25%{background: yellow; left:200px; top:0;}
50%{background: blue; left:200px; top:200px;}
75%{background: green; left:0; top:200px;}
100% {background: red; left:0; top:0;}
}
然後，針對一個 CSS 選擇器來設定動畫，例如針對div元素設定動畫，如下：
div {
width: 100px;
height: 50px;
position: absolute;
animation-name: myfirst;
animation-duration: 5s;
}