前端面試準備--基礎篇之CSS

時間 2019-11-07

標籤前端面試準備基礎 css 欄目快樂工作简体版

原文原文鏈接

本文參照大神文章，也是本身複習準備面試的小筆記總結吧

文章主要內容：

1.盒模型
2.BFC
3.層疊上下文
4.居中佈局
5.選擇器優先級
6.清除浮動的方法
7.link和@import的區別
8.css預處理器
9.css動畫
10.rem佈局的原理
11.如何實現多端適配？
複製代碼

盒模型

盒模型分類：

理論上分爲四個盒子，content box、padding box、border box、margin box，可是實際上padding-box 只有 Firefox 曾經支持過，如今也不支持了，margin box更慘從未支持過

計算方式：

content box：盒模型的寬高 = content的寬高
border box：盒模型的寬高 = content的寬高 + padding + border複製代碼

css切換方式：

能夠經過box-sizing 設置，content-box爲標準模型、border-box爲IE模型

經過js獲取盒模型對應的寬高

1. dom.style.width/height --- 對應 content box
只能獲取dom元素內聯樣式設置的寬高，經過外聯css文件或者style標籤中的樣式這隻的，都沒法獲取
2. dom.currwntStyle.width/height
頁面渲染完成後的結果，無論哪一種方式都能獲取，僅IE支持
3. window.getComputedStyle(dom).width/height
原理同2，兼容性更好些
4. dom.getBoundingClientRect().width/height
根據元素在視窗中的絕對位置來獲取寬高
5. dom.offsetWidth/offsetHeight --- 對應border box
   dom.clientWidth/clientHeight --- 對應padding box
   dom.scrollWidth/scrollHeight --- 對應padding box, 可是包含溢出的尺寸複製代碼

BFC

什麼是BFC?

BFC即Block Formatting Context，」塊級格式化上下文「即塊盒所使用的渲染模型。

其實根據盒子的不一樣類型，分爲Block Formatting Context（BFC）和 Inline Formatting Context(IFC)

這裏講清三個盒子的概念：

我看的時候也有點顛三觀，以前一直覺得BFC的B就是塊級元素的意思，可是發現和觸發條件相沖突，才發現這裏的B是塊盒子

塊級盒（block-level boxes）: 由塊級元素構成的盒子，每一個塊級元素至少會生成一個盒子，稱爲主要塊級盒。好比li這樣的元素，還會生成額外的盒子來防止項目符號。描述父元素和兄弟元素的關係。塊容器盒（block containing boxes）: 指只包含其餘塊級盒的盒子，或生成行內格式化上下文的盒子，由今生成的盒子只包含行內盒。描述元素和後代元素的關係。塊盒（block boxes）: 既是塊級盒，又是塊容器盒的盒子

什麼是Formatting Context？

它是頁面的一個獨立的渲染區域，有一套渲染規則，決定子元素是如何定位的，以及和其餘元素的關係。

BFC觸發條件：

1. 根元素
2. float 不爲none的元素
3. position: absolute/fixed 
4. display: inline-block/table/table-cell/table-caption/flex/inline-flex
5. 塊級元素且overflow !== visible複製代碼

BFC特性：

1. 屬於同一個BFC的兩個相鄰的盒子垂直排列
2. 同一個BFC的兩個相鄰的盒子的margin發生重疊
3. BFC中的子元素的margin box的左邊，與包含塊的border box 的左邊相接觸(子元素 absolute 除外)
4. BFC元素不會和float元素重疊
5. BFC的高度包含float子元素的高度
6. 文字層不會被浮動層覆蓋，環繞於周圍
7. BFC就是頁面傷的一個隔離的獨立容器，容器內的子元素和外部的元素不會不想影響複製代碼

應用：

阻止margin重疊：給其中一個盒子添加父元素，而且觸發BFC
清除內部浮動（將浮動元素外邊包裹一個BFC,使其對外部元素不形成影響）
解決浮動致使的高度坍塌問題（BFC的高度包含浮動元素的高度）
阻止被浮動元素覆蓋（造成BFC, 與浮動元素的BFC互不影響）

層疊上下文

觸發層級的條件：

position
css3的屬性：flex、transform、opacity、filter、will-change、-webkit-overflow-scrolling
根層級上下文（html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>stack</title>
</head>
<body>
    <div class="background">background</div>
    <div class="z-index-minus">z-index-minus</div>
    <div class="block">block</div>
    <div class="float">float</div>
    <div class="inline">inline</div>
    <div class="z-index-0">z-index-0</div>
    <div class="z-index-puls">z-index-puls</div>
</body>
<style>
div {
    position: absolute;
    width: 1000px;
    height: 100px;
}
.background {
    background: red;
}
.z-index-minus {
    width: 900px;
    background: green;
    z-index: -100;
}
.block {
    width: 800px;
    background: gold;
    display: block;
}
.float {
    width: 700px;
    background: grey;
    float: left;
}
.inline {
    width: 600px;
    display: inline;
    background: rebeccapurple;
}
.z-index-0 {
    width: 500px;
    z-index: 0;
    background: teal;
}
.z-index-puls {
    width: 400px;
    z-index: 100;
    background: orange;
}
</style>
</html>複製代碼

層級優先級以下圖展現：

注：子元素層級再高也超不過父元素的限制。

居中佈局

水平居中

text-align:center
margin: 0 auto;
flex+ justify-content: center
absolute + transform

垂直居中

line-height: height
flex + align-item: center
absolute + transform
display:table

水平垂直居中

absolute + transform
flex + justify-content + align-item

選擇器優先級

!important > 行內樣式 > #id > .class > tag > * > 繼承 > 默認

清除浮動的方法

在浮動元素末尾添加:after僞類標籤設置clear:both
父級元素構造BFC

link 和 @import 的區別

link 不只能引入外部的css，還能夠定義RSS(做用：展現選定數據)和定義Rel( 規定當前文檔與被連接文檔/資源之間的關係)等做用；@import 只能用於加載css
都用於引入css的時候，頁面加載順序也不同：link，只要解析到link,頁面會同步加載css，而@import 須要等頁面加載完纔會加載
link 能夠經過js 動態添加，可是@import不行

css預處理器（sass/less/stylus/postcss）

這些都是類css語言，經過webpack編譯能夠轉成瀏覽器可讀的css，而且賦予css更強大的功能。

經常使用的功能：

文件分割：將大文件切割成小文件，方便維護
選擇器嵌套：更容易看清層級關係
變量：更容易使視覺風格統一，便於總體風格的替換
循環語句：sass舉例

@for $i from 1 to 10 {
 .border-#{$i} {
　　border: #{$i}px solid blue;
　}
}

複製代碼

條件語句：sass舉例

@if lightness($color) > 30% {
　background-color: #000;
} @else {
　background-color: #fff;
}複製代碼

自動前綴: webpack編譯經過postcss插件實現自動加前綴
mixin複用：簡單舉例Less中的使用方法，詳細講解能夠參考文章

1. 簡單的mixin
.a,#b{
  color: rebeccapurple;
}
.mixin-class{
  .a();
}
.mixin-id{
  #b();
}
2. 帶參數的mixin
.border-radius(@radius) { // 設置默認值： .border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

複製代碼

css動畫

transition -- 過渡動畫

transition: property duration timing-function delay;複製代碼

animation -- 能夠定義每一幀的動畫

animation: keyframe-name duration timing-function delay iteration-count direction;複製代碼

transform -- 靜態的

translate、scale、rotate、skew、opacity等屬性函數複製代碼

rem佈局的原理

概念：

em：相對於父元素的單位
rem：css的一個相對單位，是相對於html根元素的大小的單位，實質上是等比縮放。
vw,vh: 屏幕寬度/ 100，屏幕高度/100

原理：

通常都是基於寬度的，將屏幕寬度平分紅100份，轉換成百分比佈局。可是谷歌瀏覽器支持最小字體是12px，因此能夠將屏幕分紅10份來計算。

將html元素的字體大小 = 屏幕寬度 / 100

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px'; 複製代碼

2. 根據設計圖的尺寸編輯預處理function

$ue-width: 640; /* ue圖的寬度 */

@function px2rem($px) {
  @return #{$px/$ue-width*100}rem;
}

p {
  width: px2rem(100);
}複製代碼

rem是萬能的嗎？ rem是一種彈性盒佈局，和響應式佈局不一樣。

rem不適用字體的大小；因爲設置了根元素的字體大小，會影響全部沒有設置字體大小的元素，因此能夠在body上修正，經過媒體查詢設置字體大小。

字體大小能夠根據媒體查詢和em來實現：

@media screen and (min-width: 320px) {
    body {font-size: 16px}
}
@media screen and (min-width: 481px) and (max-width:640px) {
    body {font-size: 18px}
}
@media screen and (min-width: 641px) {
    body {font-size: 20px}
}
 
div {font-size: 1.2em}複製代碼

若是須要區分不一樣dpr下的效果，能夠用css作適配：

.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    font-size: 14px;
}
[data-dpr="2"] .selector {
    font-size: 28px;
}
[data-dpr="3"] .selector {
    font-size: 42px;
}複製代碼

須要js先給html設置data-dpr屬性，上邊的css選擇器才能使用

document.documentElement.setAttribute('data-dpr', window.devicePixelRatio);複製代碼

一些基本概念

物理像素：又稱設備像素，他是顯示器中的最微小的物理部件。
設備獨立像素：密度無關像素，計算機座標系統中的一個點，這個點表明一個能夠由程序員適用的虛擬像素。
設備像素比（dpr）= 物理像素 / 設備獨立像素

window.devicePixelRatio複製代碼

4. meta標籤：主要講的是viewport的meta標籤，主要告訴瀏覽器如何規範的渲染頁面，在移動端頁面下，meta標籤設置以下：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">複製代碼

如何實現多端適配？

在佈局方面採用flex佈局和rem佈局相結合+rem原理，不適用於字體大小

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。