前端面試題整理-CSS

時間 2019-11-18

標籤端面試題整理 css 欄目 CSS 简体版

原文原文鏈接

CSS

Box-sizing的值？

content-box: padding和border在定義的寬度外繪製css

border-box：padding和border在定義的寬度內繪製html
CSS長度單位？

絕對長度pxhtml5

相對字體長度em，1em = font-size的大小，默認=16px=12pt=0.17in = 4.2mm =1pc（相對父元素）android

若是一個設置了font-size:1.1em的元素在另外一個設置了font-size:1.1em的元素裏，而這個元素又在另外一個設置了font-size:1.1em的元素裏，那麼最後計算的結果是1.1X1.1X1.1=1.331remcss3

相對根元素長度rem ，只相對於html的font-size作出改變，若是一個設置了font-size:1.1rem的元素在另外一個設置了font-size:1.1rem的元素裏，而這個元素又在另外一個設置了font-size:1.1rem的元素裏，那麼最後計算的結果是1.1remweb

vh:相對視窗高度，均分爲100單位chrome

vw:相對視窗寬度，均分爲100單位跨域

vmax：相對於視窗高度或寬度中較大的那個，均分爲100單位瀏覽器

vmin：相對於視窗高度或寬度中較小的那個，均分爲100單位sass

實現不使用 border 畫出1px高的線，在不一樣瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。

.hairline:before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:auto;
  right:auto;
  height:1px;
  width:100%;
  background-color:#333;
  display:block;
  z-index:0;
  html.pixel-ratio-2 & {
      .transform(scaleX(0.5));
  }
  html.pixel-ratio-3 & {
     .transform(scaleX(0.33));
  }
}

html.pixel-ratio-2:是爲了適配不一樣手機設備像素比不一樣。

介紹一下標準的CSS的盒子模型？

標準盒模型：給定width，padding和border在width以外繪製，同content-box

IE盒模型：給定width，padding和border在width內繪製，同border-box
CSS選擇符有哪些？哪些屬性能夠繼承？

id class 後代子元素僞類……

css有繼承的屬性：font及相關、文本系列text-align（不包括垂直文本、陰影、裝飾等）、visibility、表格佈局border-collapse（不是邊框border）、列表list、光標cursor
CSS3新增僞類有那些？

:last-of-type(最後一個元素，多是孫元素)

:last-child（最後一個子元素）

:nth-child(n)選擇父元素第n個
position的值relative和absolute定位原點是？

relative:元素自己位置

absolute：最近一級position設置爲absolute或relative的父元素的左上角
請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？

flex: 擴充比，縮小比，基礎寬度

使用場景：居中對齊、自適應導航
用純CSS建立一個三角形的原理是什麼？

元素是塊級元素，設置元素的邊框顯示。不須要顯示的邊框用透明色。塊元素按對角線分爲4個三角，能夠在border中進行設置各三角形。

必需要設置四個方向的border才能以三角形顯示，border:6px solid transparent要放在設置三角形顏色前。能夠對四個角分別設置顏色，並根據border寬度不一樣實現變形。width:0;height:0,如設置寬高會顯示爲梯形。大小=寬高+border寬度。
css多列等高如何實現？

Padding補償法：給父元素設置overflow:hidden，再給子元素設置足夠大的padding-bottom，再將margin-bottom設置爲padding-bottom的負值。

Flex：1(水平、垂直均平分,若flex設置爲2，垂直依舊平齊)
一個滿屏品字佈局如何設計?

根據html, body:100%設置高度。如不寫html,則高度爲0

而後根據flex,float,absolute等方法佈局
常常遇到的瀏覽器的兼容性有哪些？緣由，解決方法是什麼，經常使用hack的技巧？

（all）瀏覽器默認margin、padding等不一樣：css reset

（ie）Ie8不支持opacity：添加濾鏡alpha，Filter:alpha(opacity=80);

（Firefox）firefox點擊連接出現虛線框：給a標籤設置outline屬性，a{outline:none;} a:focus{outline:none;}

（ie）A標籤嵌套的img在ie下會帶有邊框： a img{border:none}

（ie）min-height不兼容：{min-height:200px;height:auto !important;height:200px;overflow:visible;}

（ie）ie下event有x,y屬性沒有pageX,pageY屬性，firefox有pageX,pageY沒有x,y屬性：event.y?event.y:event.pageY

（chrome）Chrome中文最小爲12px： -webkt-text-size-adjust:none;

（all）超連接被點擊後樣式不具備hover 和active: link visited hover. active

（all）圖片默認間距,幾個img排列時會有默認間距：img{float:left}

（ie）設置較小高度時比設置的高度高：{overflow:hidden; line-height:比高度小}

Css hack：

_：ie6及如下

*：ie7及如下

\9:ie6+

\0：ie8+和opera15如下

-moz- ：firefox

-webkit-:safari, chrome

-o-:opera

-ms-:ie

主要須要添加瀏覽器前綴的屬性：@keyframes, 移動和變換，動畫，border-radius, box-shadow, flex等
absolute的containing block計算方式跟正常流有什麼不一樣？

包含塊：定位參考框

包含塊計算方式：

（1）根元素所在包含塊叫初始包含塊。若是沒有position屬性，包含塊爲父級塊元素的內容框建立

（2）position屬性爲fixed，包含塊爲視口建立

（3）position屬性爲absolute，若是擁有position屬性祖先元素爲行內元素，包含塊爲行內元素第一行、最後一行的框（根據文字方向改變）。若是非行內元素，包含塊爲祖先的padding建立。

詳細介紹
CSS裏的visibility屬性有個collapse屬性值是幹嗎用的？在不一樣瀏覽器下之後什麼區別？

對通常的元素，跟visibility:hidden同樣，當在表格元素中使用時，能夠刪除一行或者一列，但不影響表格佈局，與display:none同樣。

在谷歌，collapse和使用hidden同樣，在火狐\opera\ie11，table的行會消失，下一行補充到它的位置
position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

若是display:none，position和float不起做用

position:absolute或fixed，float不起做用

float不是none，float不起做用

設置了float、position:absolute、display:inline-block,margin塌陷不出現

overflow:hidden，margin塌陷不出現
對BFC規範(塊級格式化上下文：block formatting context)的理解？

是個獨立的盒子，這個獨立盒子裏的佈局不受外部影響,固然它也不會影響到外面的元素。

在BFC內，box從頂部開始，垂直方向一個一個放置，並與盒子左邊平齊，會發生margin塌陷。計算BFC高度時，浮動元素也參與計算。

float除了none之外的值，overflow除了visible之外的值，position爲absolute, fixed，display爲inline-block,flex的都能觸發BFC
zoom:1的清楚浮動原理?

zoom設置或檢索對象的縮放比例，當設置zoom後，所設置的元素會擴大或縮小，高度寬度會從新計算。一旦改變zoom會從新渲染，解決ie下子元素浮動時父元素不自動擴大的問題。
移動端媒體查詢

@media screen and (min-width: 400px) and (max-width: 700px) { … }
瀏覽器是怎樣解析CSS選擇器的？

按照從上到下，從右到左的順序解析
元素豎向的百分比設定是相對於容器的高度嗎？

Width | left | right相對父級元素寬度

height | top | bottom相對父級元素高度

Border-radius | transform相對自身寬度
全屏滾動的原理是什麼？用到了CSS的那些屬性？

所謂全屏滾動，就是網頁的一個模塊佔據一屏的寬高，多個模塊上下拼接在一塊兒，當滑動鼠標滾輪，或點擊導航按鈕時，能夠平滑到對應的頁面

Transition、Animation
什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
響應式網頁設計就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。

響應式設計的基本原理是經過媒體查詢檢測不一樣的設備屏幕尺寸作處理。頁面頭部必須有meta聲明viewport：
```
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no」>
```
兼容：引入html5shiv.js，css hack， js動態添加
視差滾動效果

視差滾動：讓多層背景以不一樣的速度移動，造成立體的運動效果

利用perspective：定義 3D 元素距視圖的距離
::before 和 :link中雙冒號和單冒號有什麼區別？

單冒號用於css3僞類，雙冒號用於css3僞元素

僞類：first-child、link、hover 、lang

僞元素：first-letter、first-line、before、after

僞類的效果能夠經過添加一個實際的類來達到，僞元素的效果須要添加一個實際的元素標籤才能達到。
如何修改chrome記住密碼後自動填充表單的黃色背景？

1、打補丁：覆蓋webkit-autofill的樣式

2、關閉瀏覽器自帶填充表單功能
對line-height是如何理解的？

撐開父級元素高度、垂直居中文本和圖片、撐開父級元素高度比height效果好，由於不產生ie的haslayout屬性。隻影響行內元素，不能直接應用於塊級元素，具備可繼承性。

line-height指的是在同一個元素中，兩個文本行基線間的距離
設置元素浮動後，該元素的display值是多少？

不管行內元素仍是塊元素，被設置浮動以後，display屬性值都變爲block。由於float非none會造成BFC
讓頁面裏的字體變清晰，變細用CSS怎麼作？

-webkit-font-smoothing: antialiased;

字體抗鋸齒渲染：none、subpixel-antialiased、antlaliased
font-style屬性可讓它賦值爲「oblique」 oblique是什麼意思？

Italic是使用文字的斜體，oblique是使沒有斜體屬性的文字傾斜
position:fixed;在android下無效怎麼處理？

無效爲顯示輸入框時，底部欄會隨輸入框發生變化。

一、當focus時，將fixed屬性改成absolute，當blur時改回fixed屬性。

二、在中間部分外層div添加css樣式position:fixed;top:50px; bottom:50px;overflow:scroll;就能夠實現效果
若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？

40ms。顯示器頻率爲60hz,1/60=16.7ms刷新一次。然而人眼識別圖像的速度是24幀/s，大約爲40ms。
display:inline-block 何時會顯示間隙？

元素間留白間距出現的緣由就是標籤段之間的空格，所以，去掉HTML中的空格，天然間距就木有了。

或使用margin負值抵消，大小根據font-size和字體查詢

父元素font-size設爲0，給子元素單獨設置font-size(chrome須要設置webkit-text-size-adjust)

使用letter-spacing:-3px或word-spacing:-6px

只給最後一個元素添加閉合標籤，以兼容ie6\7
overflow: scroll時不能平滑滾動的問題怎麼處理？

由於沒有提供原生方式支持在一個固定高度的容器內滾動內容。

-webkit-overflow-scrolling: touch;開啓硬件加速

若是添加後不起做用，再添加overflow-y:scroll

當元素設置過position:absolute | relative後，再增長-webkit-overflow-scrolling:touch滑幾回會卡住，給元素增長個z-index就能夠了
有一個高度自適應的div，裏面有兩個div，一個高度100px，但願另外一個填滿剩下的高度。

（1）box-sizing：外層設置padding:100px 0 0;而後第一個div margin-top:-100px;

（2）css3 calc()計算

（3）外層給定position,第二個div設置position:absolute; top:100px;left:0;height:100%

（4）flex
png、jpg、gif 這些圖片格式解釋一下，分別何時用。有沒有了解過webp？

gif圖形交換格式，索引顏色格式，顏色少的狀況下，產生的文件極小，支持背景透明，動畫，圖形漸進，無損壓縮（適合線條，圖標等），缺點只有256種顏色

jpg支持上百萬種顏色，有損壓縮，壓縮比可達180：1，並且質量受損不明顯，不支持圖形漸進與背景透明，不支持動畫

png爲替代gif產生的，位圖文件，支持透明，半透明，不透明。不支持動畫，無損圖像格式。Png8簡單說是靜態gif，也只有256色，png24不透明，但不止256色。

webp谷歌開發的旨在加快圖片加載速度的圖片格式，圖片壓縮體積是jpeg的2/3，有損壓縮。高版本的W3C瀏覽器才支持，google39+，safari7+
什麼是Cookie 隔離？

若是靜態文件都放在主域名下，那靜態文件請求的時候都帶有的cookie的數據提交給server的，很是浪費流量，因此不如隔離開。

由於cookie有域的限制，所以不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數據，這樣能夠下降請求頭的大小，下降請求時間，從而達到下降總體請求延時的目的。

同時這種方式不會將cookie傳入Web Server，也減小了Web Server對cookie的處理分析環節，提升了webserver的http請求的解析速度。
style標籤寫在body後與body前有什麼區別？

先渲染仍是加載完DOM後再渲染。放在後面有可能發生FOUC
什麼是CSS 預處理器 / 後處理器？

預處理器：編譯css，使用變量：less sass

後處理器：對css加入擴展，加強css兼容性（增長各瀏覽器前綴）：postcss
rem佈局的優缺點

Rem佈局：把屏幕寬等分爲20份，每份1rem。將rem值賦給根元素font-size

優：自適應佈局，寬高比不變

缺：不能固定元素間的間距。