前端計(jì)劃——面試題總結(jié)-CSS篇

馬永翠發(fā)布于2019-08-29 13:09 / 3402人閱讀

摘要：定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。可以知道屬性有以下幾個(gè)特點(diǎn)該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。

前端面試之CSS篇 1、三種基本引入方式

外部樣式表

內(nèi)部樣式表

內(nèi)聯(lián)

這是一個(gè)段落。

2、CSS的引入方式中l(wèi)ink和@import的區(qū)別

link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。

link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

link引用CSS時(shí)，在頁(yè)面載入時(shí)同時(shí)加載；@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。

link支持使用Javascript控制DOM去改變樣式；而@import不支持。

3、CSS選擇器

選擇器優(yōu)先級(jí)為!important >內(nèi)聯(lián) > id > 偽類(lèi) = 類(lèi)class > 屬性 > tag >通配

3.1 基本選擇器

類(lèi)選擇器 .className

ID選擇器 #idName

元素選擇器 elementName

通配選擇器 * (效率最低，不推薦用)

屬性選擇器 element[attr=value]

3.2 權(quán)重計(jì)算

內(nèi)聯(lián)樣式表的權(quán)值最高 1000；

ID 選擇器的權(quán)值為 100

Class 類(lèi)選擇器的權(quán)值為 10

HTML 標(biāo)簽選擇器的權(quán)值為 1

3.3 計(jì)算法則

選擇器都有一個(gè)權(quán)值，權(quán)值越大越優(yōu)先；

當(dāng)權(quán)值相等時(shí)，后出現(xiàn)的樣式表設(shè)置要優(yōu)于先出現(xiàn)的樣式表設(shè)置；

創(chuàng)作者的規(guī)則高于瀏覽者：即網(wǎng)頁(yè)編寫(xiě)者設(shè)置的CSS 樣式的優(yōu)先權(quán)高于瀏覽器所設(shè)置的樣式；

繼承的CSS 樣式不如后來(lái)指定的CSS 樣式；

在同一組屬性設(shè)置中標(biāo)有"!important"規(guī)則的優(yōu)先級(jí)最大；示例如下：

3.4組合選擇符

后代選擇器（空格符）選取所有后代 A B

子元素選擇器（大于號(hào)）選擇某一類(lèi)型 A>B

相鄰兄弟選擇器（加號(hào)）A+B

普通兄弟選擇器（波浪號(hào)）A~B

4、偽元素與偽類(lèi) 4.1 偽類(lèi)

CSS偽類(lèi)匹配被用戶激活的元素,接偽類(lèi)先后順序被稱(chēng)為L(zhǎng)VHA順序:
:link
:visited
:hover
:active

4.2 偽元素

偽元素添加到選擇器，但不是描述特殊狀態(tài)，它們?cè)试S您為元素的某些部分設(shè)置樣式（CSS3使用雙冒號(hào)）
::after
::before
::first-letter
::first-line
::selection

5、盒式模型

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

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

absolute
絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素（也就是非static定位），如果元素沒(méi)有已定位的父元素，那么它的位置相對(duì)于。absolute 定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。

relative
相對(duì)定位是相對(duì)其正常位置。相對(duì)于其在普通流中的位置進(jìn)行定位。可以移動(dòng)的相對(duì)定位元素的內(nèi)容和相互重疊的元素，它原本所占的空間不會(huì)改變。經(jīng)常被用來(lái)做絕對(duì)定位的容器塊。

fixed
元素的位置相對(duì)于瀏覽器窗口是固定位置。Fixed定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。

static
HTML元素的默認(rèn)值，即沒(méi)有定位，元素出現(xiàn)在正常的流中。靜態(tài)定位的元素不會(huì)受到 top, bottom, left, right影響。

sticky
position屬性中最有意思的就是sticky了，設(shè)置了sticky的元素，在屏幕范圍（viewport）時(shí)該元素的位置并不受到定位影響（設(shè)置是top、left等屬性無(wú)效），當(dāng)該元素的位置將要移出偏移范圍時(shí)，定位又會(huì)變成fixed，根據(jù)設(shè)置的left、top等屬性成固定位置的效果。

可以知道sticky屬性有以下幾個(gè)特點(diǎn)：

該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。
當(dāng)元素在容器中被滾動(dòng)超過(guò)指定的偏移值時(shí)，元素在容器內(nèi)固定在指定位置。亦即如果你設(shè)置了top: 50px，那么在sticky元素到達(dá)距離相對(duì)定位的元素頂部50px的位置時(shí)固定，不再向上移動(dòng)。
元素固定的相對(duì)偏移是相對(duì)于離它最近的具有滾動(dòng)框的祖先元素，如果祖先元素都不可以滾動(dòng)，那么是相對(duì)于viewport來(lái)計(jì)算元素的偏移量

7、清除浮動(dòng)

浮動(dòng)元素脫離文檔流，不占據(jù)空間。浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留。

額外標(biāo)簽
添加

使用overflow
給包含浮動(dòng)元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

使用after偽對(duì)象

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

8、display: none;和visibility: hidden;的區(qū)別

都是隱藏元素，但是前者文檔布局中不占用空間，后者仍占用空間

display：none隱藏產(chǎn)生reflow和repaint（回流與重繪）

前者有株連性，即父元素設(shè)置display: none后子元素不管怎樣設(shè)置都不能顯示，而后者的子元素通過(guò)設(shè)置visibility: visible后還是能顯示出來(lái)的

9、float和absolute的異同

相同點(diǎn)：都使元素脫離文檔流，可以設(shè)置寬高

不同點(diǎn)：float仍然占用空間，absolute可以覆蓋

10、box-sizing

屬性作用：主要用來(lái)控制元素的盒模型的解析模式。默認(rèn)值是content-box。

content-box
元素的寬度/高度由border + padding + content的寬度/高度決定，設(shè)置width/height屬性指的是content部分的寬/高

border-box
讓元素維持IE傳統(tǒng)盒模型（IE6以下版本和IE6~7的怪異模式）。設(shè)置width/height屬性指的是border + padding + content

inherit
繼承父元素的box-sizing屬性

11、左右布局：左邊定寬、右邊自適應(yīng)，不少于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表達(dá)式中的減號(hào)前后有空格)
.left {
    float: left;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    float: left;
    width: calc(100% - 200px);
    height: 200px;
    background: red;
}
//方法三（不設(shè)置寬度，默認(rèn)填充滿）
.left {
    float: left;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    margin-left: 200px;
    height: 200px;
    background: red;
}
//方法四（絕對(duì)定位，注意right部分）
.left {
    position: absolute;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    position: absolute;
    left: 200px;
    right: 0px;
    height: 200px;
    background: red;
}
//方法五(百分比width，這個(gè)方法不是很好使，百分比不好確定)
.left {
    float: left;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    float: left;
    width: 85%;
    height: 200px;
    background: red;
}
//方法六（表格方式，不推薦使用）

12、div水平垂直居中實(shí)現(xiàn)方式

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