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

馬永翠發布于2019-08-29 13:09 / 3390人閱讀

摘要：定位使元素的位置與文檔流無關，因此不占據空間。可以知道屬性有以下幾個特點該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。

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

外部樣式表

內部樣式表

內聯

這是一個段落。

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

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

link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以后加載。

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

3、CSS選擇器

選擇器優先級為!important >內聯 > id > 偽類 = 類class > 屬性 > tag >通配

3.1 基本選擇器

類選擇器 .className

ID選擇器 #idName

元素選擇器 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、偽元素與偽類 4.1 偽類

CSS偽類匹配被用戶激活的元素,接偽類先后順序被稱為LVHA順序:
:link
:visited
:hover
:active

4.2 偽元素

偽元素添加到選擇器，但不是描述特殊狀態，它們允許您為元素的某些部分設置樣式（CSS3使用雙冒號）
::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
絕對定位的元素的位置相對于最近的已定位父元素（也就是非static定位），如果元素沒有已定位的父元素，那么它的位置相對于。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來計算元素的偏移量

7、清除浮動

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

額外標簽
添加

使用overflow
給包含浮動元素的父標簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

使用after偽對象

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

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

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

display：none隱藏產生reflow和repaint（回流與重繪）

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

9、float和absolute的異同

相同點：都使元素脫離文檔流，可以設置寬高

不同點：float仍然占用空間，absolute可以覆蓋

10、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屬性

11、左右布局：左邊定寬、右邊自適應，不少于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;
}
//方法六（表格方式，不推薦使用）

12、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%);
}

云服務器 GPU云服務器面試題棧面試題筆試面試題面試題內容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112411.html

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

摘要：發生在很久以前的及更老的瀏覽器向過渡時期。數據始終在同源的請求中攜帶即使不需要，會在瀏覽器和服務器間來回傳遞。存儲大小數據大小不能超過。與上面問題相連，比也是明智的選擇。表現與結構相分離。兩種設計思想是有不同的考慮。前言：吾生也有涯,而知也無涯，以有涯隨無涯，殆己————莊子閱讀本文前請做好以下心理準備：本系列文章將不定期更新。本系列文章不是很嚴謹。前端面試之HTML篇 Pa...

2json 2019-08-01 16:08 評論0 收藏0
前端開發-從入門到Offer - 收藏集 - 掘金

摘要：一些知識點有哪些方法方法前端從入門菜鳥到實踐老司機所需要的資料與指南合集前端掘金前端從入門菜鳥到實踐老司機所需要的資料與指南合集歸屬于筆者的前端入門與最佳實踐。工欲善其事必先利其器-前端實習簡歷篇 - 掘金有幸認識很多在大廠工作的學長，在春招正式開始前為我提供很多內部推薦的機會，非常感謝他們對我的幫助。現在就要去北京了，對第一份正式的實習工作也充滿期待，也希望把自己遇到的一些問題和...

sf_wangchong 2019-08-20 16:10 評論0 收藏0
前端最強面經匯總

摘要：獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續更新中……，可以關注下github 項目地址 https:...

wangjuntytl 2019-08-26 10:41 評論0 收藏0
2017年3月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...

ermaoL 2019-06-27 16:30 評論0 收藏0
2017年3月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...

kamushin233 2019-08-29 12:34 評論0 收藏0