前端面試CSS

時間 2019-12-05

標籤前端面試 css 欄目快樂工作简体版

原文原文鏈接

選擇器的權重和優先級

選擇器的類型：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），這樣就比較符合咱們的實際要求了。code

浮動float

float被設計出來的初衷是用於文字環繞效果，即一個圖片一段文字，圖片float:left以後，文字會環繞圖片.
float 的破壞性 —— float 破壞了父標籤的本來結構，使得父標籤出現了坍塌現象。致使這一現象的最根本緣由在於：被設置了 float 的元素會脫離文檔流。其根本緣由在於 float 的設計初衷是解決文字環繞圖片的問題。你們要記住 float 的這個影響。orm

清除浮動

.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實現，可是必須知道寬度。animation

.item {
    width: 300px;
    height: 100px;
    position: absolute;
    left: 50%;
    margin: -150px;
}

如何實現垂直居中

inline 元素可設置line-height的值等於height值，如單行文字垂直居中：it

.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;
}

1. 前端面試——CSS相關
2. 前端面試之Css篇
3. 前端面試總結（css）
4. 前端 CSS 面試大綱
5. css前端面試題
6. 前端面試——css篇
7. 前端面試題 ----css篇
8. 前端面試題-CSS Hack
9. web前端—css面試題
10. 前端面試筆記 - css
更多相關文章...
• Lua 調試(Debug) - Lua 教程
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• Docker容器實戰(一) - 封神Server端技術

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。