前端計劃——面試題總結-CSS篇

時間 2019-12-05

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

原文原文鏈接

前端面試之CSS篇

一、三種基本引入方式

外部樣式表
<link rel="stylesheet" type="text/css" href="mystyle.css">css
內部樣式表html

<head>
<style>
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
</style>
</head>

內聯
<p style="color:sienna;margin-left:20px">這是一個段落。</p>前端

二、CSS的引入方式中link和@import的區別

link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。面試
link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。算法
link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。瀏覽器
link支持使用Javascript控制DOM去改變樣式；而@import不支持。佈局

三、CSS選擇器

選擇器優先級爲!important >內聯 > id > 僞類 = 類class > 屬性 > tag >通配測試

3.1 基本選擇器

類選擇器 .classNameflex
ID選擇器 #idNameurl
元素選擇器 elementName
通配選擇器 * (效率最低，不推薦用)
屬性選擇器 element[attr=value]

3.2 權重計算

內聯樣式表的權值最高 1000；
ID 選擇器的權值爲 100
Class 類選擇器的權值爲 10
HTML 標籤選擇器的權值爲 1

3.3 計算法則

選擇器都有一個權值，權值越大越優先；
當權值相等時，後出現的樣式表設置要優於先出現的樣式表設置；
創做者的規則高於瀏覽者：即網頁編寫者設置的CSS 樣式的優先權高於瀏覽器所設置的樣式；
繼承的CSS 樣式不如後來指定的CSS 樣式；
在同一組屬性設置中標有"!important"規則的優先級最大；示例以下：

3.4組合選擇符

後代選擇器（空格符）選取全部後代 A B
子元素選擇器（大於號）選擇某一類型 A>B
相鄰兄弟選擇器（加號）A+B
普通兄弟選擇器（波浪號）A~B

四、僞元素與僞類

4.1 僞類

CSS僞類匹配被用戶激活的元素,接僞類前後順序被稱爲LVHA順序:
:link
:visited
:hover
:active

4.2 僞元素

僞元素添加到選擇器，但不是描述特殊狀態，它們容許您爲元素的某些部分設置樣式（CSS3使用雙冒號）
::after
::before
::first-letter
::first-line
::selection

五、盒式模型

margin/border/padding/content
margin:a,b,c,d 上/右/下/左
margin:a,b,c 上/左右/下
margin:a,b 上下/左右
margin:a 上下左右

六、定位的幾種方式：absolute/relative/fixed/static/sticky

absolute
絕對定位的元素的位置相對於最近的已定位父元素（也就是非static定位），若是元素沒有已定位的父元素，那麼它的位置相對於<html>。absolute 定位使元素的位置與文檔流無關，所以不佔據空間。
relative
相對定位是相對其正常位置。相對於其在普通流中的位置進行定位。能夠移動的相對定位元素的內容和相互重疊的元素，它本來所佔的空間不會改變。常常被用來作絕對定位的容器塊。
fixed
元素的位置相對於瀏覽器窗口是固定位置。Fixed定位使元素的位置與文檔流無關，所以不佔據空間。
static
HTML元素的默認值，即沒有定位，元素出如今正常的流中。靜態定位的元素不會受到 top, bottom, left, right影響。
sticky
position屬性中最有意思的就是sticky了，設置了sticky的元素，在屏幕範圍（viewport）時該元素的位置並不受到定位影響（設置是top、left等屬性無效），當該元素的位置將要移出偏移範圍時，定位又會變成fixed，根據設置的left、top等屬性成固定位置的效果。

能夠知道sticky屬性有如下幾個特色：

該元素並不脫離文檔流，仍然保留元素本來在文檔流中的位置。
當元素在容器中被滾動超過指定的偏移值時，元素在容器內固定在指定位置。亦即若是你設置了top: 50px，那麼在sticky元素到達距離相對定位的元素頂部50px的位置時固定，再也不向上移動。
元素固定的相對偏移是相對於離它最近的具備滾動框的祖先元素，若是祖先元素都不能夠滾動，那麼是相對於viewport來計算元素的偏移量

七、清除浮動

浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

額外標籤
添加<div style="clear:both;"></div>
使用overflow
給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。
使用after僞對象

#parent:after{
    /*注意content要有內容*/
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

八、display: none;和visibility: hidden;的區別

都是隱藏元素，可是前者文檔佈局中不佔用空間，後者仍佔用空間
display：none隱藏產生reflow和repaint（迴流與重繪）
前者有株連性，即父元素設置display: none後子元素無論怎樣設置都不能顯示，然後者的子元素經過設置visibility: visible後仍是能顯示出來的

九、float和absolute的異同

相同點：都使元素脫離文檔流，能夠設置寬高
不一樣點：float仍然佔用空間，absolute能夠覆蓋

十、box-sizing

屬性做用：主要用來控制元素的盒模型的解析模式。默認值是content-box。

content-box
元素的寬度/高度由border + padding + content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高
border-box
讓元素維持IE傳統盒模型（IE6如下版本和IE6~7的怪異模式）。設置width/height屬性指的是border + padding + content
inherit
繼承父元素的box-sizing屬性

十一、左右佈局：左邊定寬、右邊自適應，很多於3種方法

//方法一（使用CSS3的flex佈局）
.container {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
}
.left {
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    flex: 1;
    height: 200px;
    background: red;
}
//方法二(使用CSS3的calc()，注意clac表達式中的減號先後有空格)
.left {
    float: left;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    float: left;
    width: calc(100% - 200px);
    height: 200px;
    background: red;
}
//方法三（不設置寬度，默認填充滿）
.left {
    float: left;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    margin-left: 200px;
    height: 200px;
    background: red;
}
//方法四（絕對定位，注意right部分）
.left {
    position: absolute;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    position: absolute;
    left: 200px;
    right: 0px;
    height: 200px;
    background: red;
}
//方法五(百分比width，這個方法不是很好使，百分比很差肯定)
.left {
    float: left;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    float: left;
    width: 85%;
    height: 200px;
    background: red;
}
//方法六（表格方式，不推薦使用）

十二、div水平垂直居中實現方式

/*方法一：使用flex佈局*/
/*加入邊框和寬高便於瀏覽器測試*/
.parent {
    border: 1px solid black;
    display:flex;
    justify-content: center;
    align-items: center;
}
.child {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
/*方法二：絕對定位，左右都是50%，margin-left和top分別爲自身一半值的負數*/
.parent {
    position: relative;
}
.child {
    border: 1px solid black;
    width: 400px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -100px;
}
/*方法三：仍是絕對定位，但使用transform*/
.parent{
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}