CSS 面試題1

問題

寫出你所知道的 Block Elements(Block-level Elements) 、 inline Elements 、 Replaced Elements / Empty Elements ?

CSS 中的元素類型

替換和不可替換元素

元素自己的特色，能夠分爲替換和不可替換元素

替換元素 Replaced Element/ Empty Elements

替換元素是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。 例如 <img> 標籤的 scr 屬性的值來讀取圖片的信息並顯示出來，而若是查看 html 代碼，則看不到圖片的實際內容；又列如會根據 input 的 type 屬性來決定顯示輸入框仍是單選按鈕。

html 中的 <img> <input> <select> <textarea> <video>都是可替換元素。

不可替換元素

html 中大部分元素是不可替換元素，即其內容直接展現。

塊級元素

默認狀況下塊級元素會新起一行。而且會橫向充滿其父元素的內容區域。

常見的塊級元素

<address> <div> <article> <aside> <audio> <canvas> <section> <header> <p> <form> <h1>到<h6>等

特色：

• 老是新起一行。
• 高度、行高以及頂和底邊距均可控制。
• 寬度缺省是它的容器的 100% 除非設定一個寬度。

與行內元素相比

• 能夠包含行內元素和塊級元素

行內元素

特色：

• 和其餘元素都在一行上
• 高，行高以及頂和底邊距不可變
• 寬度就是他的文字或者圖片的寬度，不可改變

與塊級元素相比：

• 通常狀況下只能包含數字和其餘行內元素。
• 默認狀況下，行內元素不會新起一行。

<span> <i> <strong> <br> <a>

幾乎全部的可替換元素都是行內元素。

display

其實就是對 display 屬性的考察，由於 diplay 能夠改變，因此元素的形態是常常能夠切換的。

inline-block

將元素呈現爲內聯元素，可是對象的內容做爲塊級元素。

而後，同級的元素做爲內聯元素排在一行上，容許空格。

IE下塊元素如何實現display:inline-block的效果？

有兩種方法： 1.先使用display:inline-block屬性觸發塊元素，而後再定義display:inline，讓塊元素呈遞爲內聯對象（兩個display要前後放在兩個CSS聲明中才有效果，這是IE的一個經典bug，若是先定義了display:inline-block，而後再將display設回inline或block，layout不會消失）。代碼以下（...爲省略的其餘屬性內容）：

div{display:inline-block;...}
div {display:inline;}
複製代碼

二、直接讓塊元素設置爲內聯對象呈遞（設置屬性display:inline），而後觸發塊元素的layout（如：zoom:1等）。代碼以下：

div{display:inline; zoom:1;...}
複製代碼

img 標籤的 alt 屬性 和 title 屬性有什麼區別？

alt 標籤內容是 img src 屬性內容獲取失敗以後展現 title 是鼠標移動到圖片的時候顯示

何爲 BFC 如何觸發？

BFC 是 塊級格式化上下文 （block fromatting context）是按照塊級盒子佈局的。 塊級格式化上下文包含建立它的元素內部的全部內容，而且在當前塊級格式化上下文中盒子豎着排列。可是 BFC 不包含子元素 BFC 的子元素。

造成 BFC 的條件：

• 根元素或者其餘包含它的元素。
• float 不爲 none
• position 的值是 absolute 或 fixed。
• display 的值是 inline-block、table-cell、flex、table-caption、grid 或者 inline-flex
• overflow 的值不是 visible。

也就是說，當看到這些屬性的時候，就表明了當前元素已經建立了一個 BFC。

對浮動定位與清除浮動都很重要。 浮動定位和清除浮動時只會應用於同一個 BFC 內的元素。 浮動不會影響其餘 BFC 中元素的佈局，清除浮動只能清除同一 BFC 內的元素。 外邊距摺疊（margin collapsing）也只會發生在同一個 BFC 的塊級元素之間。

主要解決的問題：

處理瀏覽器溢出的內容：若是一個沒有高度或者高度爲 auto 的盒子的子元素是浮動元素，則該盒子的高度是不會被撐開的，能夠經過父級建立 BFC來包含浮動元素，這時的父級的高度要計算浮動元素的高度。

建立新的BFC來避免相鄰的 div 之間的外邊距合併。

避免文字環繞問題。

• 處理溢出的內容

<style>
  .box{
    background-color: #888; // 灰色
  }
  .float{
        background: #73DE80; /* 綠色 */
        opacity: 0.5;
        border: 3px solid #F31264;
        width: 200px;
        height: 200px;
        float: left;
    }
    .static{                        /* 粉色 */
        background: #EF5BE2;
        opacity: 0.5;
        border: 3px solid #F31264;
        width:400px;
        min-height: 100px;
    }
  </style>
複製代碼

<div class='box'>
    <div class='float'></div>
    <div class='static'></div>
</div>
複製代碼

box 添加 overflow:hidden 屬性來造成 BFC

• 解決BFC中相鄰兩個元素外邊距摺疊的問題

.box{
    background-color: #888;
    overflow: hidden;
  }
  .float{
        background: #73DE80; /* 綠色 */
        opacity: 0.5;
        border: 3px solid #F31264;
        width: 200px;
        height: 200px;
    }
    .static{                        /* 粉色 */
        background: #EF5BE2;
        opacity: 0.5;
        border: 3px solid #F31264;
        width:400px;
        min-height: 100px;
    }
    .m-1{
      margin: 10px 0;
    }
複製代碼

<div class='box'>
    <div class='float m-1'> </div>
    <div class='static m-1'> </div>
</div>
複製代碼

box 的兩個元素的實際外邊距只有 10px 。讓其中一個造成BFC就能夠解決這個問題。

• 避免文字環繞

.box{
    background-color: #888;
    overflow: hidden;
  }
  .float{
        background: #73DE80; /* 綠色 */
        opacity: 0.5;
        border: 3px solid #F31264;
        width: 100px;
        height: 20px;
        float: left;
    }
複製代碼

<div class='box'>
    <div class='float'> </div>
    <p>BFC 是 塊級格式化上下文 （block fromatting context）是按照塊級盒子佈局的。 塊級格式化上下文包含建立它的元素內部的全部內容，而且在當前塊級格式化上下文中盒子豎着排列。可是 BFC 不包含子元素 BFC 的子元素</p>
</div>
複製代碼

將p標籤變爲新的BFC就能夠解決

padding-top 設置百分比時是基於什麼計算的

padding 使用百分比時是基於內容的寬度計算的

css 參照百分比

• 參照父元素寬度的元素： padding margin width text-indent
• 參照父元素高度的元素： height
• 參照父元素屬性的元素： font-size line-height 特殊： 相對定位時時，top(bottom) left(right) 參照父元素內容區域的高度和寬度，而絕對定位時，參照最近的定位元素包含 Padding 的高度與寬度。

經過 CSS 實現圖片寬高比固定爲 4:3( 圖片佔滿容器的寬度， 但容器寬度並不固定)

或者：圖片在自適應過程當中，圖片的長寬比要保持不變。

使用圖片容器進行佔位來實現。 塊級元素的 padding 設置爲百分比的時候，是按照父元素的內容的寬度來設定的，那麼咱們能夠按照比例來設置容器的寬度（padding-top/padding-bottom）, 圖片則使用絕對定位來顯示在容器的下層。

<div class="img">
    <img src="">
</div>
複製代碼

.img{
    width:100%;
    position:relative;
    height:0;
    overflow:hidden;
    padding-bottom: 75%; // 4:3
}
.img img{
    positon: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
}
複製代碼

還須要要求 .img 的父級元素也是 塊級 元素。

最大的正方形

和上個題目同樣 塊級元素+padding 來肯定元素大小

div{
    width:100%;
    padding-top/padding-bottom:100%;
}
複製代碼

postion 的取值

postion:

• relative: 生成相對定位的元素，相對於其正常位置進行定位。left等生效。
• absolute: 生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。
• fixed: 生成絕對定位的元素，相對於瀏覽器窗口進行定位。
• static: 沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
• inherit: 規定應該從父元素繼承 position 屬性的值。

rem

em 相對 父元素的屬性 rem 相對 html 根元素/css3 新增的一個相對單位

border 簡寫

border: 1px solid red;

textarea 相關屬性

texteara webkit 內核的瀏覽器會默認設置 resize: both 用戶能夠調節元素的寬度和高度 resize 的屬性包括 none: 不能調節元素的尺寸 horizontal: 調節元素的寬度 vertical: 調節元素的高度

列舉僞元素

css2 :before :after css1 :first-line 向文本的第一行添加特殊樣式。 :first-letter 向文本的第一個字母添加特殊樣式。

僞類

:first-child 首個子對象 :last-child 最後一個對象 :link 未訪問的連接 :visited 已訪問的連接 :hover 鼠標移動到連接上 :active 選定的連接

注意：hover 必須在 link 和 visited 以後才能生效 注意：active 必須在 hover 以後才能生效

浮動究竟是什麼

浮動是元素脫離文檔流。

清除浮動的方式:

// 現代瀏覽器clearfix方案，不支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}

// 全瀏覽器通用的clearfix方案
// 引入了zoom以支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}
.clearfix{
    *zoom: 1;
}

// 全瀏覽器通用的clearfix方案【推薦】
// 引入了zoom以支持IE6/7
// 同時加入:before以解決現代瀏覽器上邊距摺疊的問題
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}
複製代碼

盒模型

content padding border margin

box-sizing

border-box: width = content+padding+border

content-box: width = content

水平垂直居中

水平垂直居中

css gpu加速的屬性有哪些

重繪和迴流

重繪：元素的樣式改變不影響佈局時，瀏覽器使用重繪更新元素，只須要 UI 層面的像素從新繪製，所以損耗較少。 迴流：元素的佈局改變，須要從新部分或所有文檔的過程稱爲迴流。

引發迴流的操做： 元素的添加和移除 元素的大小、位置、內容、字體大小發生改變。 激活僞類(:hover)

其餘 頁面首次渲染 瀏覽器窗口大小發生改變 元素內容變化（文字數量或圖片大小等等） 添加或者刪除可見的DOM元素 激活CSS僞類（例如：:hover） 查詢某些屬性或調用某些方法

經常使用的會致使迴流的屬性和方法

clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
scrollIntoView()、scrollIntoViewIfNeeded()
getComputedStyle()
getBoundingClientRect()
scrollTo()
複製代碼

如何避免

css

避免使用 table 佈局。 儘量在 DOM 樹的最末端改變 class 。 避免設置多層內聯樣式。 將動畫效果應用到 position 屬性爲 absolute 或 fixed 的元素上。 避免使用CSS表達式(例如：calc())

JavaScript

避免頻繁操做樣式，最好一次性重寫 style 屬性，或者將樣式列表定義爲 class 並一次性更改 class 屬性。 避免頻繁操做 DOM ，建立一個 documentFragment ，在它上面應用全部 DOM 操做，最後再把它添加到文檔中。 也能夠先爲元素設置 display: none ，操做結束後再把它顯示出來。由於在 display 屬性爲 none 的元素上進行的 DOM 操做不會引起迴流和重繪。 避免頻繁讀取會引起迴流/重繪的屬性，若是確實須要屢次使用，就用一個變量緩存起來。 對具備複雜動畫的元素使用絕對定位，使它脫離文檔流，不然會引發父元素及後續元素頻繁迴流。

瀏覽器渲染原理

瀏覽器解析

瀏覽器把 html 解析成 Dom , CSS 解析成 CSSOM ， 解析完成後將 Dom 和 CSSOM 合併產生了 RenderTree.

Javascript 腳本，主要是經過 DOM API 和 CSSOM API 來操做 DOM Tree 和 CSS Rule Tree.

Rendering Tree 渲染樹並不等同於 DOM 樹，由於一些像 Header 或 display:none 的東西就不必放在渲染樹中了。

CSS 的 Rule Tree主要是爲了完成匹配並把CSS Rule附加上Rendering Tree上的每一個Element。也就是DOM結點。也就是所謂的Frame。

而後，計算每一個 Frame（也就是每一個Element）的位置，這又叫 layout 和 reflow(迴流) 過程

最後經過調用操做系統 Native GUI 的 API 繪製。

flex 佈局

display: flex 開啓，自動創建 BFC 。

容器屬性：

flex-direction 主軸的方向,項目的排列方向

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
複製代碼

flex-wrap 軸線上如何換行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
複製代碼

flex-flow 是flex-direction和flex-wrap的簡寫形式

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}
複製代碼

justify-content 主軸的對其方式

.box {
  justify-content: flex-start(默認值) | flex-end | center | space-between | space-around;
}
// space-between 項目之間的距離都相等
// space-around 項目兩側的間隔都相等，因此項目之間的間隔比與邊框的間隔大一倍
複製代碼

align-items 交叉軸上如何對齊

.box {
  align-items: flex-start | flex-end | center | baseline | stretch(默認值));
}
// baseline 項目的第一行文字的基線對齊
// stretch 若是項目未設置高度或設爲auto，將佔滿整個容器的高度。
複製代碼

align-conetent

align-content屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用

flex 項目的屬性

order

項目的順序，數字越小，排列越靠前，默認值是0

flex-grow

定義項目的放大的比例，默認爲0，保持自身，即便還有剩餘空間，也不放大。 若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。

flex-shrink

定義項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。

flex-basis 屬性

定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值是 auto ,即項目的原本大小。

能夠設置和 width 同樣的值。

flex 屬性

flex-grow,flex-shrink,flex-basis 屬性的簡寫

align-self 屬性

align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
複製代碼

css 加載順序

css 樣式渲染順序

<style>
.blue{
color: blue;
}
.red{
color: red;
}
</style>
<div class="blue red">123</div>
<div class="red blue">123</div>
複製代碼

兩個 div 的字體分別是什麼顏色？

答案是：都是紅色

由於在 css 樣式表中 red 後於 blue，red 中的 color 樣式 的優先級比 blue 中 color 高