媒介查詢相關(guān)的自適應(yīng)布局

媒體查詢就是針對不同媒體類型在不同CSS屬性時的樣式表現(xiàn)

清除浮動

浮動帶來的問題：

①父元素的高度無法被撐開

②與浮動元素同級的非浮動元素會跟隨其后

③若非第一個元素浮動，則該元素前的元素也會浮動，否則會影響頁面顯示的結(jié)構(gòu)

清除方式：

①父級div定義height

②最后一個浮動元素添加空div標(biāo)簽并添加樣式clear：both

③包含浮動元素的父標(biāo)簽添加樣式overflow為hidden或auto

④偽元素清除浮動

：after（作用于浮動元素的父級元素

.clearfix:after{

content:"";/*設(shè)置內(nèi)容為空*/

height:0;/*高度為0*/

line-height:0;/*行高為0*/

display:block;/*將文本轉(zhuǎn)為塊級元素*/

visibility:hidden;/*將元素隱藏*/

clear:both;/*清除浮動*/

}

css選擇器有哪些？優(yōu)先級？哪些屬性可以繼承？

！important>內(nèi)聯(lián) > ID選擇器 > 類選擇器 > 標(biāo)簽選擇器

關(guān)于css屬性選擇器常用的有：

id選擇器（#box），選擇id為box的元素

類選擇器（.one），選擇類名為one的所有元素

標(biāo)簽選擇器（div），選擇標(biāo)簽為div的所有元素

后代選擇器（#box div），選擇id為box元素內(nèi)部所有的div元素

子選擇器（.one>one_1），選擇父元素為.one的所有.one_1的元素

相鄰?fù)x擇器（.one+.two），選擇緊接在.one之后的所有.two元素

群組選擇器（div,p），選擇div、p的所有元素

偽類選擇器：

:link：選擇未被訪問的鏈接

:visited：選取已被訪問的鏈接

:active：選擇活動鏈接

:hover：鼠標(biāo)指針浮動在上面的元素

:focus：選擇具有焦點的

:first-child：父元素的首個子元素

偽元素選擇器：

:first-letter：用于選取指定選擇器的首字母

:first-line：選取指定選擇器的首行

:before:選擇器在被選元素的內(nèi)容前面插入內(nèi)容

:after:選擇器在被選元素的內(nèi)容后面插入內(nèi)容

屬性選擇器：

[attribute] 選擇帶有attribute屬性的元素

[attribute=value] 選擇所有使用attribute=value的元素

[attribute~=value] 選擇attribute屬性包含value的元素

[attribute|=value]：選擇attribute屬性以value開頭的元素

CSS3新增選擇器：

偽類選擇器：

:first-of-type表示一組同級元素中其類型的第一個元素

:last-of-type表示一組同級元素中其類型的最后一個元素

:only-of-type表示沒有同類型兄弟元素的元素

:only-child表示沒有任何兄弟的元素

:nth-child(n)根據(jù)元素在一組同級中的位置匹配元素

:nth-last-of-type(n)匹配給定類型的元素，基于它們在一組兄弟元素中的位置，從末尾開始計數(shù)

:last-child表示一組兄弟元素中的最后一個元素

:root設(shè)置HTML文檔:empty指定空的元素

:enabled選擇可用元素:disabled選擇被禁用元素:checked選擇選中的元素

:not(selector)選擇與 不匹配的所有元素

屬性選擇器：

[attribute*=value]：選擇attribute屬性值包含value的所有元素

[attribute^=value]：選擇attribute屬性開頭為value的所有元素

[attribute$=value]：選擇attribute屬性結(jié)尾為value的所有元素

無繼承的屬性

display

文本屬性：vertical-align、text-decoration

盒子模型的屬性：寬度、高度、內(nèi)外邊距、邊框等

背景屬性：背景圖片、顏色、位置等

定位屬性：浮動、清除浮動、定位position等

生成內(nèi)容屬性：content、counter-reset、counter-increment

輪廓樣式屬性：outline-style、outline-width、outline-color、outline

頁面樣式屬性：size、page-break-before、page-break-after

css中，有哪些方式可以隱藏頁面元素？區(qū)別?

display:none

特點：元素不可見，不占據(jù)空間，無法響應(yīng)點擊事件。會導(dǎo)致重排和重繪。

visibility:hidden

特點：元素不可見，占據(jù)頁面空間，無法響應(yīng)點擊事件。不會觸發(fā)重排，但是會觸發(fā)重繪

opacity:0

特點：改變元素透明度，元素不可見，占據(jù)頁面空間，可以響應(yīng)點擊事件。不會觸發(fā)重排，但是會觸發(fā)重繪

設(shè)置height、width模型屬性為0

將元素的margin，border，padding，height和width等影響元素盒模型的屬性設(shè)置成0，如果元素內(nèi)有子元素或內(nèi)容，還應(yīng)該設(shè)置其overflow:hidden來隱藏其子元素。

特點：元素不可見，不占據(jù)頁面空間，無法響應(yīng)點擊事件

position:absolute

特點：元素不可見，不影響頁面布局

clip-path

通過裁剪的形式

特點：元素不可見，占據(jù)頁面空間，無法響應(yīng)點擊事件

談?wù)勀銓FC的理解？

BFC（Block Formatting Context），即塊級格式化上下文，它是頁面中的一塊渲染區(qū)域，并且有一套屬于自己的渲染規(guī)則：

內(nèi)部的盒子會在垂直方向上一個接一個的放置

對于同一個BFC的倆個相鄰的盒子的margin會發(fā)生重疊，與方向無關(guān)。

每個元素的左外邊距與包含塊的左邊界相接觸（從左到右），即使浮動元素也是如此

BFC的區(qū)域不會與float的元素區(qū)域重疊

計算BFC的高度時，浮動子元素也參與計算

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然

BFC目的是形成一個相對于外界完全獨立的空間，讓內(nèi)部的子元素不會影響到外部的元素

觸發(fā)條件：

根元素，即HTML元素

浮動元素：float值為left、right

overflow值不為 visible，為 auto、scroll、hidden

display的值為inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid

position的值為absolute或fixed

應(yīng)用場景

①防止margin塌陷

②清除內(nèi)部浮動（避免父元素失去高度）

③自適應(yīng)多欄布局

元素水平垂直居中的方法有哪些？如果元素不定寬高呢

①利用定位+margin:auto

父級設(shè)置為相對定位，子級絕對定位 ，并且四個定位屬性的值都設(shè)置了0，那么這時候如果子級沒有設(shè)置寬高，則會被拉開到和父級一樣寬高

②利用定位+margin:負(fù)值

父級設(shè)置為相對定位，子級絕對定位。top、left：50%；

margin-left：-（width/2）

margin-top：-（height/2）

③利用定位+transform

父級設(shè)置為相對定位，子級絕對定位。top、left：50%；

transform:translate(-50%,-50%)

④table布局

設(shè)置父元素為display:table-cell，子元素設(shè)置?display: inline-block。利用vertical-align:middle和text-align:center可以讓所有的行內(nèi)塊級元素水平垂直居中

⑤flex布局

display: flex時，表示該容器內(nèi)部的元素將按照flex進行布局

align-items: center表示這些元素將相對于本容器水平居中

justify-content: center也是同樣的道理垂直居中

⑥grid布局

display: grid

align-items: center表示這些元素將相對于本容器水平居中

justify-content: center也是同樣的道理垂直居中

內(nèi)聯(lián)元素居中布局

水平居中

行內(nèi)元素可設(shè)置：text-align: center

flex布局設(shè)置父元素：display: flex; justify-content: center

垂直居中

單行文本父元素確認(rèn)高度：height === line-height

多行文本父元素確認(rèn)高度：disaply: table-cell; vertical-align: middle

塊級元素居中布局

水平居中

定寬: margin: 0 auto

絕對定位+left:50%+margin:負(fù)自身一半

垂直居中

position: absolute設(shè)置left、top、margin-left、margin-top(定高)

display: table-cell

transform: translate(x, y)

flex(不定高，不定寬)

grid(不定高，不定寬)，兼容性相對比較差

flexbox（彈性盒布局模型）,以及適用場景？

Flexible Box?簡稱?flex，意為”彈性布局”，可以簡便、完整、響應(yīng)式地實現(xiàn)各種頁面布局。

采用Flex布局的元素，稱為flex容器container

它的所有子元素自動成為容器成員，稱為flex項目item

我們能夠通過flex簡單粗暴的實現(xiàn)元素水平垂直方向的居中，以及在兩欄三欄自適應(yīng)布局中通過flex完成。包括現(xiàn)在在移動端、小程序這邊的開發(fā)，都建議使用flex進行布局

如何實現(xiàn)兩欄布局，右側(cè)自適應(yīng)？三欄布局中間自適應(yīng)呢？

雙欄布局：

①使用 float 左浮左邊欄

右邊模塊使用 margin-left 撐出內(nèi)容塊做內(nèi)容展示

為父級元素添加BFC（overflow：hidden），防止下方元素飛到上方內(nèi)容

②flex彈性布局

flex容器的一個默認(rèn)屬性值:align-items: stretch;

這個屬性導(dǎo)致了列等高的效果。 為了讓兩個盒子高度自動，需要設(shè)置:?align-items: flex-start

三欄布局

兩邊使用 float，中間使用 margin

兩邊使用 absolute，中間使用 margin

兩邊使用 float 和負(fù) margin

display: table 實現(xiàn)

flex實現(xiàn)

grid網(wǎng)格布局

CSS3新增了哪些新特性？

選擇器：

新樣式：

邊框：

border-radius：創(chuàng)建圓角邊框

box-shadow：為元素添加陰影

border-image：使用圖片來繪制邊框

背景：background-clip、background-origin、background-size和background-break

文字：word-wrap、text-overflow、text-shadow、text-decoration

顏色：rgba、hsla

rgba分為兩部分，rgb為顏色值，a為透明度

hala分為四部分，h為色相，s為飽和度，l為亮度，a為透明度

transition 過渡

transition屬性可以被指定為一個或多個CSS屬性的過渡效果，多個屬性之間用逗號進行分隔，必須規(guī)定兩項內(nèi)容：

過度效果

持續(xù)時間

transition-property:width;

transition-duration:1s;

transition-timing-function:linear;

transition-delay:2s;

transform 轉(zhuǎn)換

transform屬性允許你旋轉(zhuǎn)，縮放，傾斜或平移給定元素

transform-origin：轉(zhuǎn)換元素的位置（圍繞那個點進行轉(zhuǎn)換），默認(rèn)值為(x,y,z):(50%,50%,0)

使用方式：

transform: translate(120px, 50%)：位移

transform: scale(2, 0.5)：縮放

transform: rotate(0.5turn)：旋轉(zhuǎn)

transform: skew(30deg, 20deg)：傾斜

animation 動畫

animation-name：動畫名稱

animation-duration：動畫持續(xù)時間

animation-timing-function：動畫時間函數(shù)

animation-delay：動畫延遲時間

animation-iteration-count：動畫執(zhí)行次數(shù)，可以設(shè)置為一個整數(shù)，也可以設(shè)置為infinite，意思是無限循環(huán)

animation-direction：動畫執(zhí)行方向

animation-paly-state：動畫播放狀態(tài)

animation-fill-mode：動畫填充模式

漸變

顏色漸變是指在兩個顏色之間平穩(wěn)的過渡，css3漸變包括

linear-gradient：線性漸變

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

radial-gradient：徑向漸變

linear-gradient(0deg, red, green);

怎么理解回流跟重繪？什么場景下會觸發(fā)？

回流：布局引擎會根據(jù)各種樣式計算每個盒子在頁面上的大小與位置

重繪：當(dāng)計算好盒模型的位置、大小及其他屬性后，瀏覽器根據(jù)每個盒子特性進行

回流觸發(fā)時機

回流這一階段主要是計算節(jié)點的位置和幾何信息，那么當(dāng)頁面布局和幾何信息發(fā)生變化的時候，就需要回流，如下面情況：

添加或刪除可見的DOM元素

元素的位置發(fā)生變化

元素的尺寸發(fā)生變化（包括外邊距、內(nèi)邊框、邊框大小、高度和寬度等）

內(nèi)容發(fā)生變化，比如文本變化或圖片被另一個不同尺寸的圖片所替代

頁面一開始渲染的時候（這避免不了）

瀏覽器的窗口尺寸變化（因為回流是根據(jù)視口的大小來計算元素的位置和大小的）

重繪觸發(fā)時機

觸發(fā)回流一定會觸發(fā)重繪

可以把頁面理解為一個黑板，黑板上有一朵畫好的小花?，F(xiàn)在我們要把這朵從左邊移到了右邊，那我們要先確定好右邊的具體位置，畫好形狀（回流），再畫上它原有的顏色（重繪）

除此之外還有一些其他引起重繪行為：

顏色的修改

文本方向的修改

陰影的修改

如何減少

我們了解了如何觸發(fā)回流和重繪的場景，下面給出避免回流的經(jīng)驗：

如果想設(shè)定元素的樣式，通過改變元素的?class?類名 (盡可能在 DOM 樹的最里層)

避免設(shè)置多項內(nèi)聯(lián)樣式

應(yīng)用元素的動畫，使用?position?屬性的?fixed?值或?absolute?值(如前文示例所提)

避免使用?table?布局，table?中每個元素的大小以及內(nèi)容的改動，都會導(dǎo)致整個?table?的重新計算

對于那些復(fù)雜的動畫，對其設(shè)置?position: fixed/absolute，盡可能地使元素脫離文檔流，從而減少對其他元素的影響

使用css3硬件加速，可以讓transform、opacity、filters這些動畫不會引起回流重繪

避免使用 CSS 的?JavaScript?表達式

什么是響應(yīng)式設(shè)計？響應(yīng)式設(shè)計的基本原理是什么？如何做？

響應(yīng)式網(wǎng)站設(shè)計（Responsive Web design）是一種網(wǎng)絡(luò)頁面設(shè)計布局，頁面的設(shè)計與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進行相應(yīng)的響應(yīng)和調(diào)整

響應(yīng)式網(wǎng)站常見特點：

同時適配PC + 平板 + 手機等

標(biāo)簽導(dǎo)航在接近手持終端設(shè)備時改變?yōu)榻?jīng)典的抽屜式導(dǎo)航

網(wǎng)站的布局會根據(jù)視口來調(diào)整模塊的大小和位置

實現(xiàn)方式

響應(yīng)式設(shè)計的基本原理是通過媒體查詢檢測不同的設(shè)備屏幕尺寸做處理，為了處理移動端，頁面頭部必須有meta聲明viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

屬性對應(yīng)如下：

width=device-width: 是自適應(yīng)手機屏幕的尺寸寬度

maximum-scale:是縮放比例的最大值

inital-scale:是縮放的初始化

user-scalable:是用戶的可以縮放的操作

如果要做優(yōu)化，CSS提高性能的方法有哪些？

內(nèi)聯(lián)首屏關(guān)鍵CSS

異步加載CSS

資源壓縮

合理使用選擇器

減少使用昂貴的屬性

不要使用@import

單行文本溢出省略

text-overflow：

clip：當(dāng)對象內(nèi)文本溢出部分裁切掉

ellipsis：當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記（...）

white-space：nowrap設(shè)置文字在一行顯示，不能換行

overflow：hidden文字長度超出限定寬度，則隱藏超出的內(nèi)容

多行文本溢出省略

多行文本溢出的時候，我們可以分為兩種情況：

基于高度截斷

偽元素 + 定位

核心的css代碼結(jié)構(gòu)如下：

position: relative：為偽元素絕對定位

overflow: hidden：文本溢出限定的寬度就隱藏內(nèi)容）

position: absolute：給省略號絕對定位

line-height: 20px：結(jié)合元素高度,高度固定的情況下,設(shè)定行高, 控制顯示行數(shù)

height: 40px：設(shè)定當(dāng)前元素高度

::after {} ：設(shè)置省略號樣式

基于行數(shù)截斷

純css實現(xiàn)也非常簡單，核心的css代碼如下：

-webkit-line-clamp: 2：用來限制在一個塊元素顯示的文本的行數(shù)，為了實現(xiàn)該效果，它需要組合其他的WebKit屬性）

display: -webkit-box：和1結(jié)合使用，將對象作為彈性伸縮盒子模型顯示

-webkit-box-orient: vertical：和1結(jié)合使用 ，設(shè)置或檢索伸縮盒對象的子元素的排列方式

overflow: hidden：文本溢出限定的寬度就隱藏內(nèi)容

text-overflow: ellipsis：多行文本的情況下，用省略號“…”隱藏溢出范圍的文本

如何使用css完成視差滾動效果?

background-attachment

作用是設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動

值分別有如下：

scroll：默認(rèn)值，背景圖像會隨著頁面其余部分的滾動而移動

fixed：當(dāng)頁面的其余部分滾動時，背景圖像不會移動

inherit：繼承父元素background-attachment屬性的值

transform：translate3D

容器設(shè)置上 transform-style: preserve-3d 和 perspective: xpx，那么處于這個容器的子元素就將位于3D空間中，

子元素設(shè)置不同的 transform: translateZ()，這個時候，不同元素在 3D Z軸方向距離屏幕（我們的眼睛）的距離也就不一樣

滾動滾動條，由于子元素設(shè)置了不同的 transform: translateZ()，那么他們滾動的上下距離 translateY 相對屏幕（我們的眼睛），也是不一樣的，這就達到了滾動視差的效果

CSS如何畫一個三角形？原理是什么？

.border{width:0;

height:0;

border-style:solid;

border-width:0 50px 50px;

border-color:transparent transparent #d9534f;

}

z-index 是干什么用的？默認(rèn)值是什么？與 z-index: 0 的區(qū)別

> z-index 屬性設(shè)置元素的堆疊順序，且只在屬性position: relative/absolute/fixed 的時候才生效。

> `z-index: auto` 是默認(rèn)值，與`z-index: 0`是有區(qū)別的：

> `z-index: 0` 會創(chuàng)建一個新的堆疊上下文，而 `z-index: auto` 不會創(chuàng)建新的堆疊上下文

總結(jié)：

1. 當(dāng)Z-index的值設(shè)置為auto時,不建立新的堆疊上下文,當(dāng)前堆疊上下文中生成的div的堆疊級別與其父項的框相同。

2. 當(dāng)Z-index的值設(shè)置為一個整數(shù)時,該整數(shù)是當(dāng)前堆疊上下文中生成的div的堆棧級別。該框還建立了其堆棧級別的本地堆疊上下文。這意味著后代的z-index不與此元素之外的元素的z-index進行比較。

讓Chrome支持小于12px 的文字方式有哪些？區(qū)別？

常見的解決方案有：

zoom(會觸發(fā)重排）

zoom:50%，表示縮小到原來的一半

zoom:0.5，表示縮小到原來的一半

-webkit-transform:scale()

注意的是，使用scale屬性只對可以定義寬高的元素生效

-webkit-text-size-adjust:none

percentage：字體顯示的大??；

auto：默認(rèn)，字體大小會根據(jù)設(shè)備/瀏覽器來自動調(diào)整；

none:字體大小不會自動調(diào)整

說說對Css預(yù)編語言的理解？有哪些區(qū)別?

SASS

LESS

Stylus

嵌套：

三者的嵌套語法都是一致的，甚至連引用父級選擇器的標(biāo)記 & 也相同

區(qū)別只是 Sass 和 Stylus 可以用沒有大括號的方式書寫

變量：

less聲明的變量必須以@開頭，后面緊跟變量名和變量值，而且變量名和變量值需要使用冒號:分隔開

sass聲明的變量跟less十分的相似，只是變量名前面使用$開頭

stylus聲明的變量沒有任何的限定，可以使用$開頭，結(jié)尾的分號;可有可無，但變量與變量值之間需要使用=

作用域：

sass中不存在全局變量

less與stylus的作用域跟javascript十分的相似，首先會查找局部定義的變量，如果沒有找到，會像冒泡一樣，一級一級往下查找，直到根為止

混入：

在less中，混合的用法是指將定義好的ClassA中引入另一個已經(jīng)定義的Class，也能使用夠傳遞參數(shù)，參數(shù)變量為@聲明

Sass聲明mixins時需要使用@mixinn，后面緊跟mixin的名，也可以設(shè)置參數(shù)，參數(shù)名為變量$聲明的形式

stylus中的混合和前兩款Css預(yù)處理器語言的混合略有不同，他可以不使用任何符號，就是直接聲明Mixins名，然后在定義參數(shù)和默認(rèn)值之間用等號（=）來連接

代碼模塊化

模塊化就是將Css代碼分成一個個模塊

scss、less、stylus三者的使用方法都如下所示

@import'./common';

@import'./github-markdown';

@import'./mixin';

@import'./variables';

margin/padding 設(shè)置百分比是相對誰的

總結(jié)：margin/padding設(shè)置百分比都是相對于父盒子的寬度(width屬性)來計算量的

如果需要手動寫動畫，你認(rèn)為最小時間間隔是多久，為什么？

多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60*1000ms＝16.7ms

畫一條0.5px的線

①meta viewport

initial-scale=0.5

②為1px的線添加CSS樣式。

transform：scaleY（0.5）

transition 和 animation 的區(qū)別：

偽類與偽元素的區(qū)別：

面試官：說說對Css預(yù)編語言的理解？有哪些區(qū)別? | web前端面試 - 面試官系列 (vue3js.cn)

css/css3實現(xiàn)未知寬高元素的垂直居中和水平居中 - 陌上人如玉，公子士無雙 - 博客園 (cnblogs.com)