CSS複習

HTML 複習

HTML版本

HTML4/4.01(SGML) 超級xml(可擴展標記語言)
XHTML(XML) 要求嚴格，所有的標籤、屬性小寫，屬性必須要有值
HTML5

HTML4	XHTML	HTML5
標籤允許不結束	標籤必須結束	標籤允許不結束
屬性不用帶引號	屬性必須帶引號	屬性不用帶引號
標籤屬性可大寫	標籤屬性必須小寫且有值	標籤屬性可大寫
Boolean屬性可省略值	Boolean屬性必須寫值	Boolean屬性可省略值

w3c的html文檔出錯驗證網址：validator.w3.org

w3c的html5文檔： https://www.w3.org/TR/html5/dom.html

html元素嵌套關係

塊級元素可以包含行內元素
塊級元素不一定能包含塊級元素
“行內元素一般不能包含塊級元素”

H4嵌套規則：Allowed nesting of elements in HTML 4 (and XHTML 1.0)

H5 嵌套規則：Text-level semantics

H5 嵌套原則主要看

Categories（Categories 是該元素本身的分類）
Content Model（Content model 規定了合法的元素的內容（子元素、文本等）類型）

Categories元素內容分類：動態圖網址

CSS rest

常用方案：2018’s most popular CSS Reset scripts

歸零（Meyer’s “Reset CSS” YUI Reset )
- *{margin:0; padding: 0;}
統一樣式（Normalize.css)

HTML面試真題

1、doctype的意義是什麼？

讓瀏覽器以標準模式渲染
讓瀏覽器知道元素的合法性

2、HTML XHTML HTML5的關係？

HTML屬於SGML
XHTML屬於XML，是HTML進行XML嚴格化得結果
HTML5不屬於SGML或XML，比XHTML寬鬆

3、HTML5有什麼變化？HTML5

新的語義化元素
表單增強
新的API（離線、音視頻、圖形、實時通信、本地存儲、設備能力）
分類和嵌套的變更

4、em和i有什麼區別？

em是語義化標籤，表強調。
i是純樣式的標籤，表示斜體。
HTML5中i不推薦使用，一般用作圖標。

5、語義化的意義是什麼？

開發者容易理解
機器容易理解結構（搜索、讀屏軟件）
有助於SEO
semantic microdata

6、哪些元素可以自閉合？

表單元素 input
圖片 img
br hr
meta link

7、HTML和DOM的關係？

HTML是"死"的
DOM由HTML解析而來，是活的
JS可以維護DOM

8、property和attribute的區別？詳細

property是DOM中的屬性，是JavaScript裏的對象；
attribute是HTML標籤上的特性，它的值只能夠是字符串；
自定義的Property與Attribute不同步,不相等；
非自定義的DOM property與 attributes 是有條件同步的

9、form的作用有哪些？

直接提交表單
使用submit/reset按鈕
便於瀏覽器保存表單
第三方庫可以整體提取值
第三方庫可以進行表單驗證

CSS基礎

Cascading Style Sheet
層疊樣式表

選擇器分類

元素選擇器 a{}
僞元素選擇器 ::before{} (可以顯示的真實的元素)
類選擇器 .link{}
屬性選擇器 [type=radio]{}
僞類選擇器 :hover{} (表示一個元素的狀態)
ID選擇器 #id{}
組合選擇器 [type=checkbox] + label{}
否定選擇器 :not(.link){}
通用選擇器 *{}

選擇器權重

行內樣式 1,0,0,0
ID選擇器 0,n,0,0
類，僞類，屬性 0,0,n,0
元素，僞元素 0,0,0,n
其他選擇器 0,0,0,0
!important 優先級最高
相同權重，後寫優先級高

非佈局樣式

字體、字重、顏色、大小、行高
背景、邊框
滾動、換行
粗體、斜體、下劃線
其他

字體族

serif （襯線字體）筆畫開始、結束的地方有額外的裝飾，而且筆畫的粗細會有所不同。宋體
snas-serif（無襯線體）沒有額外的裝飾，而且筆畫的粗細差不多
monospace （等寬字體）字符寬度相同
cursive（手寫體）草書
fantasy（花體）
多字體fallback

網絡字體、自定義字體

@font-face{
	font-family: 'IF';
	src: url("./IndieFlower.ttf");
}
.custom-font {
    font-family: IF;
}

iconfont
字體加引號，字體族不能加引號

如何優雅的選擇字體(font-family)

使用 @font-face

行高

深入理解CSS中的行高

vertical-align屬性

去除inline-block元素間間距的N種方法

背景

背景顏色

.c1{
    background: red;
  /*background: #F00;
    background: hsl(0, 100%, 50%);//角度、飽和度、亮度
    background: hsla(90, 100%, 30%, .3);//透明
    background: rgba(255,0,0,.3);
    background: url(./test.png);*/
}

漸變色背景

.c2{
    height: 90px;
    background:-webkit-linear-gradient(left, red, green);
    /*background: linear-gradient(to right, red, green);//標準寫法，和上面一樣
    background: linear-gradient(0deg, red, green);
    background: linear-gradient(135deg, red 0, green 10%, blue 100%);*/
}

多背景疊加示例 CSS3 Patterns Gallery background-blend-mode CSS祕密花園：複雜背景圖案

.c3{
    background: linear-gradient(135deg,transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%),linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%);
    background-size: 30px 30px;
}

背景圖片和屬性（雪碧圖）
base64和性能優化節省http連接數，解碼開銷，體積會增大1/3。用於使用不多的小圖標，例如loading圖

多分辨率適配

//在適配移動端，高分辨率屏的時候，需要將圖片縮小，雪碧圖width/2,height/2,position/2, size/2;
.c4{
    width:40px;  
    height:40px;
    background:url(./test_bg.png) no-repeat;
    background-position: -169px -23px;
    background-size: 261px 113px;
}

邊框

邊框的屬性：線型大小顏色

.c1 {
	border: 5px solid red;
    border: 5px dotted red;
    border: 5px dashed red;
}

邊框背景圖實例

.c2 {
    border: 30px solid transparent; //這裏必須是實線
    border-image: url(./border.png) 30 round;
}

邊框銜接（三角形）

.c3 {
    height: 0;
    width: 0;
    border-bottom: 20px solid red;
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
}
.c3 {
    width: 0;
    height: 0;
    font-size: 0;
    /*border-radius: 20px;*/
    border-width: 40px 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}

滾動

滾動行爲和滾動條

visible(撐開容器)/hidden(超出部分隱藏)/scroll(滾動條顯示)/auto

文字折行

white-space 控制空白字符的顯示，同時還能控制是否自動換行。
- white-space: nowrap：永不換行 ，空格被合併，換行符無效，原本的自動換行失效！只有</br>才能換行！
- white-space: pre：preserve保留，自動換行沒了，空格和換行符全都保留！
- white-space: pre-wrap：preserve+wrap 保留空格和換行符，且可以自動換行。
- white-space:pre-line：preserve+new line+wrap 空格被合併了，但是換行符可以發揮作用
word-break 控制單詞如何被拆分換行 (中文句子也是單詞，還有日文、韓文等)
- word-break: keep-all：所有“單詞”一律不拆分換行，或者可以理解爲只有空格換行符可以觸發自動換行
- word-break: break-all：所有單詞碰到邊界一律拆分換行，慎用！
word-wrap（overflow-wrap) 也是控制單詞如何被拆分換行的，實際上是作爲word-break的互補
- break-word：只有當一個單詞一整行都顯示不下時，纔會拆分換行該單詞。

徹底搞懂word-break、word-wrap、white-space

裝飾性屬性及其他

字重（粗體）font-weight
斜體 font-style: itatic;
下劃線： text-decoration
指針：cursor

CSS Hack

Hack即不合法但生效的寫法
主要用於區分不同瀏覽器
缺點：難理解、難維護、易失效
替代方案：特性檢測
替代方案：針對性加class

注意：hack寫在後面 body{width: 200px; width: 180px\9;}

方案： http://browserhacks.com/ CSS-only Filters Summary 常用CSS hacks

CSS面試真題

CSS樣式（選擇器）的優先級
雪碧圖的作用？
- 減少HTTP請求數，提高加載性能
- 有一些情況可以減少圖片大小
自定義字體的使用場景
- 宣傳/品牌/banner等固體文案
- 字體圖標
base64的使用
- 用於減少HTTP請求
- 適用於小圖片
- base64的體積約爲原圖4/3
僞類和僞元素的區別？
- 僞類表狀態
- 僞元素是真的有元素
- 前者是單冒號，後者雙冒號
如何美化checkbox
- label[for]和id
- 隱藏原生input
- :checked + label

CSS佈局

早期以table爲主（簡單）
後來一技巧性佈局爲主（難）
現在有的flexbox/grid（偏簡單）
響應式佈局是必備知識

table表格佈局

.table{
    margin-top:20px;
    display: table;
    width:800px;
    height:200px;
}
.table-row{
    display: table-row;
}
.table-cell{
    vertical-align: center;
    display: table-cell;
}

float浮動 + margin

兩欄佈局
三欄佈局
等高佈局

inline-block 佈局

flexbox佈局

響應式佈局

在不同設備上使用
一般主要處理屏幕大小問題
主要方法
- 隱藏 + 折行 + 自適應空間
- rem/viewport/media query

CSS面試真題

實現兩欄（三欄）佈局的方法
- 表格佈局
- float + margin 佈局
- inline-block 佈局
- flexbox佈局
position:absolute/fixed有什麼區別？

- 前者相對最近的absolute/relative祖先元素
- 後者相對屏幕(pc)/viewport(移動 )   （早期移動端有兼容性問題）

display：inline-block的間隙

- 原因：字符間距 
- 解決： 消滅字符(去掉所有空格)或者消滅間距（font-size:0)

如何清除浮動

- 讓盒子負責自己的佈局
- overflow:hidden(auto)
- ::after{clear:both}

如何適配移動端頁面

- viewport
- rem/viewport/media query
- 隱藏、折行、自適應空間

CSS效果屬性

box-shadow
- 營造層次感（立體感）
- 充當沒有寬度的邊框
- 特殊效果（無限投影）
text-shadow
- 立體感
- 印刷體質感
border-radius
- 圓角矩形
- 圓形
- 半圓/扇形
- 一些奇怪的角角
background
- 紋理圖案
- 漸變
- 雪碧圖動畫
- 背景圖尺寸適應

clip-path 注意兼容性

對容器進行裁剪

常見幾何圖形

clip-path: inset(100px 50px); 矩形(x, y)
clip-path: circle(50px at 100px 100px); 圓形(r at x y)
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 多邊形（x0% y0%， x1% y1%, x2% y2%, x3% y%)

clip-path: url(#id); 路徑 svg圖

<svg>
    <defs>
        <clipPath id="clipPath">
            <!-- <circle cx="60" cy="60" r="50" fill="#34538b" /> -->
            <polygon stroke="#979797" points="0.4921875 81.2070313 92.640625 81.2070313 121.601562 0.21875 153.648437 81.2070313 247.390625 80.7734375 173.394531 140.496094 200.308594 227.09375 121.601562 172.71875 53.4960937 227.09375 80.859375 140.496094"></polygon>
        </clipPath>
    </defs>
</svg>

自定義路徑

3D、2D變換 transform 變換是按順序的
- translate 平移
- scale 縮放
- skew 傾斜
- rotate 旋轉

CSS面試真題

1、如何用一個div畫XXX

box-shadow無限投影
::before
::after

2、如何產生不佔空間的邊框

box-shadow
outline

3、如何實現圓形元素（頭像）

border-radius: 50%

4、如何實現iOS圖標的圓角

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Mrv8Qer8-1590070987440)(https://i.loli.net/2019/05/23/5ce60cc12fd2e22232.png)]

clip-path: (svg)

5、如何實現半圓、扇形等圖形

border-radius組合：
- 有無邊框
- 邊框粗細
- 圓角半徑

6、如何實現背景圖居中顯示、不重複、改變大小

background-position
background-repeat
background-size(cover/contain)
cover:圖片寬高比不變、鋪滿整個容器的寬高，而圖片多出的部分則會被裁掉；cover即爲”塞滿“
contain:圖片自身的寬高比不變，縮放至整個圖片自身能完全顯示出來，所以容器會有留白區域。contain即爲“包含”，我圖片雖然縮放了，但是整個圖是被“包含”在裏面了，完整顯示，不能裁剪。

7、如何平移/放大一個元素

transform: translateX(100px)
transform:scale(2)

8、如何實現3D效果

perspective：500px; //3d效果正面查看距離透視距離
tansform-style: preserve-3d; 3d透視
tansform: translate rotate

CSS動畫

動畫的原理：

視覺暫留作用
畫面逐漸變化

動畫的作用：

愉悅感
引起注意
信息反饋
掩飾（loading加載）

CSS中的動畫類型

transition補間動畫

位置 - 平移
- （left/right/margin/transform)
方位 - 旋轉（transform)
大小 - 縮放（transform)
透明度（opacity）
其他 - 線型變化（transform)

transition: margin-right 2s ease-in-out .5s;
transition: margin-right 2s, color 1s;
transition: all 1s ease-out .5s;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-delay: .5s;

keyframe關鍵幀動畫

相當於多個補間動畫
與元素狀態的變化無關
定義更加靈活

.contrainer {
    width:100px;
    animation: run 1s;
    animation: run 3s ease-in 1s infinite reverse both running;
    animation-name: run;
	animation-duration: 0s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: 1; //播放次數
	animation-direction: normal; 
	animation-fill-mode: none; // 最後停止的位置
	animation-play-state: running; //暫停/播放 動畫
    
}
@keyframes run {
    from {
        width: 100px;
    }to {
        width: 200px;
    }
}
@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

逐幀動畫
- 適用於無法補間計算的動畫
- 資源較大（可能會使用很多動畫）
- 使用steps() 去掉補幀

CSS面試真題

1、 CSS動畫的實現方式有幾種？

transition 過渡動畫
keyframe(animation) 關鍵幀動畫

2、過渡動畫和關鍵幀動畫的區別

過渡動畫需要有狀態變化
關鍵幀動畫不需要狀態變化
關鍵幀動畫能控制更精細

3、如何實現逐幀動畫

使用關鍵幀動畫
去掉補間（steps)
- animation-timing-function: steps(1);

4、CSS動畫的性能

性能不壞
部分情況下優於JS
但JS可以做到更好
部分高位屬性
- box-shadow等不管什麼動畫都影響性能

CSS預處理器

基於CSS的另一種語言
通過工具編譯成CSS
添加了很多CSS不具備的特性
能提升CSS文件的組織方式

嵌套反映層級和約束

變量和計算減少重複代碼

Extend和Minxin 代碼片段

循環使用於複雜有規律的樣式

import CSS文件模塊化（css中的import並不會做代碼合併，只是在瀏覽器端動態引用其他樣式表，但是瀏覽器中動態引用CSS文件性能非常差，每一個引用都會發一個獨立請求

less sass

變量
嵌套
mixin 複雜的情況需要帶參數
extend 簡單，需要減小代碼文件大小
loop
import

CSS預處理器框架

SASS - Compass
Less - Lesshat/EST
提供現成的mixin
類似JS類庫封裝常用功能

CSS面試真題

常見的CSS預處理器
- Less（Node.js)
- Sass （Ruby 有Node版本）
預處理器的作用
- 幫助更好的組織CSS代碼
- 提高代碼的複用率
- 提升可維護性
預處理器的能力
- 嵌套反映層級和約束
- 變量的使用減少重複代碼
- Extend和Minxin 代碼片段
- 循環適用於複雜有規律的樣式
- import CSS文件模塊化
預處理器的優缺點
- 優點：提高代碼的複用率可可維護性
- 缺點：需要引入編譯過程有學習成本

Bootstrap 4

一個CSS框架
twitter出品
提供通用基礎樣式

bootstrap 4 改變

兼容IE10+ (bootstrap3 兼容IE9+)

使用flexbox佈局

拋棄Nomalize.css

提供佈局和reboot版本（相當於reset.css）

基礎樣式（標題、正文、reset。。。）

常用組件（按鈕、表格、表單、網格佈局。。。）

JS插件（彈出框、下拉。。。）

bootstrap沒有中文官網

3.0 以前使用源文件是less寫的

4.0源文件是sass編寫

Bootstrap 定製方法

使用CSS同名覆蓋（簡單會留有死角 bug
修改源碼重新構建（修改徹底需要了解bootstrap結構
引用scss源文件修改變量（更靈活乾淨只引用自己需要的模塊需要對bootstrap的模塊瞭解更多）

CSS工程化

組織
優化
構建
維護

PostCSS

CSS - > PostCSS(解析轉換) - > CSS

模塊化加前綴兼容性。。。

PostCSS本身只有解析能力
各種神奇特性全靠插件
目前至少有200多個插件

插件

import 模塊合併
autoprefixier 自動加前綴
cssnano 壓縮代碼去除無用代碼合併簡寫
cssnext 使用CSS新特性
precss 變量、mixin、循環等

框架中的CSS

Angular Vue React 三大框架
Angular Vue 內置樣式集成
React 一些業界實踐

web前端面試題之肉（css）

CSS複習

HTML 複習

HTML版本

html元素嵌套關係

CSS rest

HTML面試真題

CSS基礎

選擇器分類

選擇器權重

非佈局樣式

字體族

行高

背景

邊框

滾動

文字折行

裝飾性屬性及其他

CSS Hack

CSS面試真題

CSS佈局

table表格佈局

float浮動 + margin

inline-block 佈局

flexbox佈局

響應式佈局

CSS面試真題

CSS效果屬性

box-shadow

text-shadow

border-radius

background

clip-path 注意兼容性

CSS面試真題

CSS動畫

CSS中的動畫類型

transition補間動畫

keyframe關鍵幀動畫

逐幀動畫

CSS面試真題

CSS預處理器

less sass

CSS預處理器框架

CSS面試真題

Bootstrap 4

bootstrap 4 改變

Bootstrap 定製方法

CSS工程化

PostCSS

插件

框架中的CSS