前端面試知識體系（html CSS篇）

css3新特性

1. css3實現圓角（border-radius），陰影（box-shadow），

2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜

4. 增加了更多的css選擇器多背景 rgba

5. 在css3中唯一引入的偽元素是 ::selection.

6. **查詢，多欄布局

7. border-image

如下**，請問div1的offsetwidth是多大?

offsetwidth = (內容寬度+內邊距+邊框) ，無外邊距

答案是122px。

補充:如果讓offsetwidth等於100px ,該如何做?

如下**，aaa和bbb之間的距離是多少?

aaa

bbb

需要知道

答案：15px。

對margin的top left right bottom設定負值，有何效果?

什麼是bfc ?

形成bfc的常見條件

如何應用?

如何實現聖杯布局和雙飛翼布局？聖杯布局和雙飛翼布局的目的？

聖杯布局和雙飛翼布局的技術總結

手寫clearfix

/* 手寫 clearfix */ .clearfix:after .clearfix

常用屬性（必須熟練掌握）：flex語法教程

flex-direction: row | row-reverse | column | column-reverse; row（預設值）：主軸為水平方向，起點在左端。 row-reverse：主軸為水平方向，起點在右端。 column：主軸為垂直方向，起點在上沿。 column-reverse：主軸為垂直方向，起點在下沿。

flex-wrap: nowrap | wrap | wrap-reverse; nowrap（預設）：不換行。 wrap：換行，第一行在上方。 wrap-reverse：換行，第一行在下方。

justify-content: flex-start | flex-end | center | space-between | space-around; 它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸為從左到右。 flex-start（預設值）：左對齊 flex-end：右對齊 center：居中 space-between：兩端對齊，專案之間的間隔都相等。 space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。

align-items: flex-start | flex-end | center | baseline | stretch; 它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。 flex-start：交叉軸的起點對齊。 flex-end：交叉軸的終點對齊。 center：交叉軸的中點對齊。 baseline: 專案的第一行文字的基線對齊。 stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。

align-self: auto | flex-start | flex-end | center | baseline | stretch;
該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。

flex實現乙個三點的色子

實現效果：

relative：依據自身定位，對外界元素不會有任何的影響。

absolute：依據最近一層的定位元素定位（向上找父元素）。

定位元素有：absolute、relative、fixed 或者 body。

absolute 和 relative 定位問題 this is absolute

inline元素: text-align: center

block元素: margin: auto

absolute元素: left: 50% + margin-left負值

inline元素: line-height的值等於height值

absolute元素: top: 50% + margin-top負值（必須要知道子元素的尺寸才行）

absolute元素: transform(-50%, -50%)（不知道尺寸的情況下）

absolute元素: top, left, bottom, right = 0 + margin: auto（不知道尺寸的情況下）

以下**，p標籤的行高會是多少?

這是一行文字

答案是40px。（body的font-size20px * 200% = 40px，然後p標籤直接繼承過來body的行高40px）

那麼line-height如何繼承呢?

則行高繼承30px，此處p標籤行高為30px。

比如line-height：1.5; 則p標籤行高為24px（font-size的16px * 1.5 = 24px）。

body的font-size20px * 200% = 40px，然後p標籤直接繼承過來body的行高40px

rem是乙個長度單位

如下** ，div的font-size是多少呢？

答案是16px（0.16rem * body的font-size100px = 16px）。

補充：如果給div設定width: 1rem;的話，div的寬度是100px（1rem * body的font-size100px）。

響應式布局的常用方案：media-query（根據不同的螢幕寬度設定根元素font-size）

this is div

從上面可以看出rem的弊端：「階梯」性接下來看一下網頁視口尺寸

什麼是vw/vh？

#container 
/*    window.innerheight === 100vh
window.innerwidth === 100vw 
*/

ok先到這......

前端面試知識體系（html CSS篇）

前端知識體系梳理

前端面試題（HTML CSS）

前端讀者前端面試基礎手冊（HTML CSS）

前端面試知識體系（html CSS篇）

前端知識體系梳理

前端面試題（HTML CSS）

前端讀者 前端面試基礎手冊（HTML CSS）

相關推薦

前端讀者前端面試基礎手冊（HTML CSS）