CSS面試題整理

時間  2019-11-05
標籤 css 面試 整理 欄目 CSS 简体版
原文   原文鏈接

😂這只是我的筆記……我沒想到竟然有人看到……javascript

題目來源: 前端開發面試題css

答案基本是本身整理的。並非所有題目都有。html

會有不少本身的囉嗦，還有不少亂七八糟的補充，請見諒。前端

介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？

盒子模型有兩種：IE 盒子模型(IE5.5及如下)，W3C標準盒子模型。java

  • 盒子模型(box model)：css3

    內容(content)、填充(padding)、邊框(border)、邊界(margin) 。git

  • 不一樣：github

    W3C標準盒子模型的width和height，是content的寬高；面試

    IE盒模型的width和height，是content、padding、border三部分合起來的寬高。算法

  • 附加：

    outline（輪廓）繪製在元素框之上，其不佔據空間（不影響元素大小和定位）【因此若是輪廓線很粗，會遮住其餘內容demo，不是很懂輪廓的覆蓋順序，它竟然能夠蓋住下一個元素的內容？輪廓自己是另外一次元的嗎？會覆蓋內容，但後一個輪廓會覆蓋前一個輪廓】。

    兼容性：IE8以上。

其餘參考：關於外邊距的一些實踐上的細節, 解決盒模型的兼容性問題

如何居中div？

水平居中

  • 已知寬度, block元素：

    添加margin:0 auto屬性。

    div{
	width:200px;
	margin:0 auto;
 }
複製代碼

  • 已知寬度, 絕對定位的div居中：

    div {
	position: absolute;
	width: 300px;
	height: 300px;
	margin: auto; /* 這一步很關鍵 */
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: pink;	/* 方便看效果 */
}
複製代碼

  • 未知寬度，fit-content：

    兼容性不好。

    div {
    width: fit-content;
    margin: auto;
    background-color: pink;	/* 方便看效果 */
}
複製代碼

  • 未知寬度，inline-block：

    .parent {
    text-align: center;
}
div {
    display: inline-block;
    background-color: pink;	/* 方便看效果 */
}
複製代碼

  • 未知寬度/已知寬度，relative：

    參考：3、浮動實現水平居中的方法

    • 優勢：兼容性強，擴展性強；
    • 缺點：實現原理較複雜。

    須要兩個div，外層left 50%，內層left -50%。

    用float或inline-block，使容器大小爲內容大小，而非默認的100%。

    .outter {
    display: inline-block; /* or float: left; */
    position: relative;
    left: 50%;
}
.inner {
    position: relative;
    left: -50%;
}
複製代碼
    • left的值爲百分比時，爲父容器的寬度的百分比(MDN)。

水平垂直居中

  1. 肯定容器寬高：

    相對或絕對定位, 設置外邊距margin。

    div {
	position: relative / fixed; /* 相對定位或絕對定位都可 */
	width:500px;
	height:300px;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -250px;  /* 外邊距爲自身寬高的一半 */
	background-color: pink; /* 方便看效果 */
 }
複製代碼

  2. 不肯定容器寬高：

    絕對定位，利用 transform 屬性。

    div {
	position: absolute/fixed; /* relative會讓width變成100%， 因此不行 */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: pink; /* 方便看效果 */
}

複製代碼

  3. flex 佈局：

    寬高能夠肯定，也能夠不肯定。

    實際使用時應考慮兼容性。

    .container {
	display: flex;
	align-items: center; 		/* 垂直居中 */
	justify-content: center;	/* 水平居中 */

}
.container div {
	width: 100px; /* 可省 */
	height: 100px; /* 可省 */
	background-color: pink;	/* 方便看效果 */
}  
複製代碼

  4. inline-block：

    寬高能夠肯定，也能夠不肯定。

    水平居中：text-align。

    垂直居中：父元素line-height與height同值，子元素 vertical-align。

    缺點：內層高度超出外層，沒法垂直居中，會和父層同頂部(參見demo)。

    .container {
    height: 200px; /* 垂直居中 */
    line-height: 200px; /* 垂直居中 */
    text-align: center; /* 水平居中 */
}
.container div {
    display: inline-block; /* 核心：寬度自適應，高度可居中 */
    line-height: 20px; /* 會自動繼承，必須設置不一樣的值來覆蓋 */
    vertical-align: middle; /* 垂直居中 */
}  
複製代碼

CSS選擇符有哪些？

  1. id選擇器（ #myid）
  2. 類選擇器（.myclassname）
  3. 標籤選擇器（div, h1, p）
  4. 緊鄰同胞選擇器 h1 + p（選的是h1後緊跟的那個p）
  5. 通常同胞選擇器 h1 ~ p（選擇全部跟在h1後的p）[css3]
  6. 子選擇器（ul > li）
  7. 後代選擇器（li a）
  8. 通配符選擇器（ * ）
  9. 屬性選擇器（a[rel = "external"]）
  10. 僞類選擇器（a:hover, li:nth-child）
  • 僞元素 & 僞類：
    • 全部僞元素:
      ::after
::before
::first-letter
::first-line
::selection
複製代碼
    • 僞類:
      :active, :hover, :visited
:any
:any-link
:checked
:default
:defined
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:focus-visible
:host
:host()
:host-context()
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
複製代碼

通配符選擇器有一個很是有意思的用法，即用它構成非子選擇符，好比：

section * a {font-size:1.3em;}
複製代碼

任何是 section 孫子元素，而非子元素的 a 標籤都會被選中。至於 a 的父元素是什麼，沒有關係。

哪些屬性能夠繼承？

  • 全部元素可繼承

    visibility

cursor
複製代碼

  • 內聯元素可繼承：

    letter-spacing word-spacing

white-space

line-height

color

font font-family font-size font-style font-variant font-weight

text-decoration text-transform

direction
複製代碼

    font-variant：把段落設置爲小型大寫字母字體。

    text-transform: 控制文本中的字母的大小寫。

  • 塊狀元素可繼承：

    //文本塊中首行文本的縮進
text-indent 

text-align
複製代碼

  • 列表元素可繼承：

    list-style
list-style-type
list-style-position
list-style-image
複製代碼

  • 表格元素可繼承：

    /* 1. separate 默認值。邊框會被分開。 不會忽略 border-spacing 和 empty-cells 屬性。 2. collapse 若是可能，邊框會合併爲一個單一的邊框。 會忽略 border-spacing 和 empty-cells 屬性。 3. inherit 規定應該從父元素繼承 border-collapse 屬性的值。 */
border-collapse
複製代碼

  • 不可繼承的樣式：

    display

position left right top  bottom z-index

height min-height max-height
width min-width max-width

padding border margin

background

overflow

float clear

vertical-align

/*下面幾個都沒見過*/

table-layout /*表格寬度是否自適應。值：automatic，fixed，inherit*/

page-break-after page-break-before /*打印時強制分頁*/

unicode-bidi /*與direction合用，控制文字方向*/
複製代碼

CSS優先級算法如何計算？

  • 優先級就近原則，同權重狀況下樣式定義最近者爲準;
  • 載入樣式以最後載入的定位爲準。

優先級爲:

// 同權重下，權限由高到低: 
1.元素標籤裏（行內樣式/內聯樣式）
2.寫在<style>標籤裏（嵌入樣式）
3.寫在單獨的 CSS 樣式表中（連接樣式）
4.在樣式表中連接其餘樣式表：@import url(css/styles2.css)

// 不一樣權重計算
!important >  id > class > tag // !important優先於一切 !important 比 內聯優先級高 複製代碼

權重計算方法：

// 選擇器的特殊性值表述爲4個部分，用0,0,0,0表示。

行間樣式的特殊性是1,0,0,0

ID選擇器的特殊性值，加0,1,0,0。

類選擇器、屬性選擇器或僞類，加0,0,1,0。

元素和僞元素，加0,0,0,1。

通配選擇器 * 對特殊性沒有貢獻，即0,0,0,0。

!important，它沒有特殊性值，但它的優先級是最高的。
爲了方便記憶，能夠認爲它的特殊性值爲1,0,0,0,0。
複製代碼

more: 詳細的優先級計算方法

image

CSS3新增僞類有哪些？

參考：MDN - CSS新特性

僞類 說明
:last-child 父元素的最後一個子元素。
:nth-child(an+b) 找到全部當前元素的子元素；
按照位置前後順序從1開始排序，選擇的結果爲第 an+b 個元素的集合(n = 0, 1, 2, ...)。
:nth-last-child(an+b) 與:nth-child(an+b)相似，只是它從結尾處逆序計數，而不是從開頭處。↪ MDN
:only-child 屬於某個父元素的惟一一個子元素，即選擇沒有同胞的全部元素。


:first-of-type 父元素下，每一個元素類型中，最靠前的那個。
:last-of-type 父元素下，每一個元素類型中，最靠後的那個。
:nth-of-type(an+b) 父元素下，每一個元素類型中，第n個。

找到當前元素下，同元素類型的全部子元素的集合，
對每一個集合按照位置前後順序排序，
選擇的結果爲第 an+b 個元素的集合。
:nth-last-of-type(an+b) 基本上和 :nth-of-type 同樣，只是它從結尾處逆序計數，而不是從開頭處。
:only-of-type 選擇不一樣於其餘同胞元素的tag類型的元素，就是說，這個元素類型的元素在其父元素下，同一級只有這一個。（類比家庭中的男孩和女孩）


:enabled 每一個啓用的的元素（主要用於表單元素）。
:disabled 禁用的元素（主要用於控制表單控件的禁用狀態）。
:checked 單選框或複選框被選中。
:indeterminate 表示不肯定狀態。
1.<input type="checkbox"> 元素，其 indeterminate 屬性被 JavaScript設置爲 true;
2.<input type="radio"> 元素, 表單中擁有相同 name值的全部單選按鈕都未被選中時;
3.處於不肯定狀態的 <progress> 元素
:target <a>跳轉#錨點，可設置錨點目標的樣式。MDN
:root 匹配文檔樹的根元素。
對於 HTML 來講，:root 表示 <html> 元素，除了優先級更高以外，與 html 選擇器相同。
:empty 沒有子元素的元素。
子元素只能夠是元素節點或文本（包括空格）。MDN
註釋不算在內，但註釋周圍有空格就算。
:not(X) 匹配不符合參數選擇器X描述的元素。
X不能包含另一個否認選擇器。
:not僞類的優先級即爲它參數選擇器的優先級。
:not僞類不像其它僞類，它不會增長選擇器的優先級。
:not(p) 將匹配任何非p元素，包括html和body。(因此用的時候千萬當心，若是設置了什麼color，可能會出現非本身預料的狀況，好比全成同樣的顏色。↪ bug demo)

display有哪些值？說明他們的做用。

display 說明
css1
none 元素不顯示，並從文檔流中移除。
inherit 從父元素繼承 display 屬性的值。
block 塊類型。默認寬度爲父元素寬度，可設置寬高，換行顯示。
inline 行內元素類型。默認寬度爲內容寬度，不可設置寬高，同行顯示。
list-item 像塊類型元素同樣顯示，並添加樣式列表標記。
css2
inline-block 默認寬度爲內容寬度，能夠設置寬高，同行顯示。
table 做爲塊級表格來顯示。
flex 彈性元素如何伸長或縮短以適應flex容器中的可用空間。
grid 網格佈局

position的值relative和absolute定位原點是？

position 說明
static 默認值。
沒有定位，元素出如今正常的流中
（忽略 top, bottom, left, right, z-index 聲明）。
inherit 從父元素繼承 position 屬性的值。
absolute 絕對定位。
不爲元素預留空間，
相對於最近的非 static 定位的祖先元素進行定位。
fixed （老IE不支持） 絕對定位。
不爲元素預留空間，
相對於瀏覽器窗口進行定位。
元素的位置在屏幕滾動時不會改變。
relative 相對定位。
相對於其正常位置進行定位。
該關鍵字下，元素先放置在未添加定位時的位置，
再在不改變頁面佈局的前提下調整元素位置
（所以會在此元素未添加定位時所在位置留下空白）。

相對定位的元素並未脫離文檔流，而絕對定位的元素則脫離了文檔流。

CSS3有哪些新特性？

  1. 圓角 （border-radius:8px）

  2. 新增各類CSS選擇器、僞類 （常常用到 :nth-child）

  3. 文字渲染 （Text-decoration）

    轉化爲簡寫屬性，可設置text-decoration-color, text-decoration-style, text-decoration-line三個屬性，默認值爲currentcolor solid none。

  4. 透明色 & 透明度（opacity）

  5. 旋轉 （transform）

    旋轉 rotate，縮放 scale，傾斜 skew，平移 translate

  6. 動畫(animation) & 過渡效果(transition)

  7. 陰影（box-shadow, text-shadow）

    box-shadow: x-offset y-offset blur-radius spread-radius color;

text-shadow: x-offset y-offset blur-radius color;
複製代碼

  8. 新的佈局方式，如 多列布局 multi-columns 、 彈性佈局 flexible box 與 網格佈局 grid layouts

  9. 線性漸變（gradient）

  10. 多背景（background-image能夠設置多個url或linear-gradient）

  11. 媒體查詢(@media MDN) (能夠看看這個)

  12. 邊框能夠設置圖片（border-image）

請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？

MDN

什麼是flexbox

CSS3新增佈局。

Flexbox能夠把列表放在同一個方向（從上到下排列，從左到右），並讓列表能延伸到佔用可用的空間。

較爲複雜的佈局還能夠經過嵌套一個伸縮容器（flex container）來實現。

  • 採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱"容器"。

  • 它的全部子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱"項目"。

常規佈局是基於塊和內聯流方向，而Flex佈局是基於flex-flow流能夠很方便的用來作局中，能對不一樣屏幕大小自適應。

在佈局上有了比之前更加靈活的空間。

具體：www.w3cplus.com/css3/flexbo…

應用場景

  1. 水平垂直居中

  2. 一邊定寬，一邊自適應

  3. 多列等分佈局

  4. 聖盃佈局

  5. sticky footer

我在項目中的應用

  1. sticky footer (demo)

    若是頁面內容不夠長的時候，footer固定在視窗底部；若是內容足夠長時，footer會被內容向下推。

    <div class="detail-flex">
    <div class="detail-content">detail-content</div>
    <div class="detail-footer">detail-footer</div>
</div>
複製代碼
    .detail-flex
    display: flex
    flex-direction: column
    position: fixed
    z-index: 100
    top: 0
    left: 0
    width: 100%
    height: 100%
    overflow: auto
    
    .detail-content
        flex: 1 0 auto
        
    .detail-footer
        flex: 0 0 auto
複製代碼

用純CSS建立一個三角形的原理是什麼？

border

不一樣寬高下的border：詳情請戳demo

border_diff

基礎

把上、左、右三條邊隱藏掉（顏色設爲 transparent）。

div {
  width: 0;
  height: 0; /* div裏沒內容，可不寫 */
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

/* 或者這樣寫 */
div {
  width: 0;
  border: 100px solid transparent;
  border-bottom-color: #343434;
}
複製代碼

等邊三角形

顯示部分的寬度 = transparent部分的寬度 * √3

√3 ≈ 1.732

div {
  width: 0;
  border: 100px solid transparent;
  border-bottom: 173px solid #343434;
}
複製代碼

直角三角形

設置兩邊的寬度爲0。

/* 填充右下角的三角形 */
div {
  width: 0
  border: 0 solid transparent
  border-left: 100px solid transparent
  border-bottom: 100px solid #343434
}
複製代碼

帶邊框的三角形

pen demo

兩個重疊。(可是不夠智能)

<div id="col1"></div>
<div id="col2"></div>
複製代碼
body, html
  margin: 0
  background-color: #333
#col1, #col2
  width: 0
  border: 100px solid transparent
  border-bottom: 173px solid #fff
#col2
  position: absolute
  left: 0
  top: 2px
  border-bottom-color: #222
  transform: scale(0.98)
複製代碼

css多列等高如何實現？

參考：八種建立等高列布局

1. 背景圖

  • 優勢：

    實現方法簡單，兼容性強，不須要太多的css樣式就能夠輕鬆實現。

  • 缺點：

    使用這種方法不適合流體佈局等高列的佈局；

    須要更換背景色或實現其餘列數的等高列時，都須要從新制做過背景圖。

2. div嵌套+position

demo

原理圖：

image

  • 優勢：

    不須要藉助其餘東西（javascript,背景圖等）,而是純CSS和HTML實現的等高列布局；

    兼容全部瀏覽器（包括IE6），而且能夠很容易建立任意列數。

  • 缺點：

    不像其餘方法同樣簡單明瞭，給你理解會帶來必定難度；

    複雜的div嵌套，html語義不清晰（你有多少列就須要多少個容器）。

3. 正padding和負margin正負值相抵

demo

  • 原理：

    利用padding-bottom|margin-bottom正負值相抵；

    設置父容器設置超出隱藏（overflow:hidden），這樣子父容器的高度就仍是它裏面的列沒有設定padding-bottom時的高度， 當它裏面的任一列高度增長了，則父容器的高度被撐到裏面最高那列的高度， 其餘比這列矮的列會用它們的padding-bottom補償這部分高度差。

  • 優勢：

    可實現多列等高佈局；

    能實現列與列之間分隔線效果；

    結構簡單；

    兼容全部瀏覽器。

  • 缺點：

    若但願每列四周有邊框，則底部（或頂部）邊框沒法顯示。

  • 缺點解決辦法：

    1. 用和邊框一致的背景圖（我不喜歡這種類型的方法，後續更改很麻煩）

    2. 使用div來模仿列的邊框

      demo

      每列中添加一個div（能夠直接用::after僞元素代替），設置定位爲absolute；

      在列的上一級的wrapper中，定位relative；

      這樣，就能讓absolute根據wrapper的大小和位置進行定位了。

4. 邊框 + 絕對定位/float 「模擬」

絕對定位 demo， float demo

感受思路上其實與「2. div嵌套+position」相似，都是在底部設置背景層，再在上面鋪文字層。（我本身改了如下，這樣也行 ↪ demo）

  • 優勢：

    結構簡單，兼容各瀏覽器，容易掌握。

  • 缺點：

    受限於邊框+內容最多三欄，因此沒法實現三欄以上的效果。

5. 模擬表格佈局

demo

  • 優勢：

    這是一種很是簡單，易於實現的方法。

  • 缺點：

    兼容性很差，在ie6-7沒法正常運行。

6. flex佈局

  • 優勢：

    簡單易用，適用於移動端。

  • 缺點：

    CSS3新功能，不兼容老的瀏覽器。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程