前端面試知識體系(html CSS篇)

2021-10-22 06:57:45 字數 4334 閱讀 7905

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先到這......

前端知識體系梳理

高頻考題 盒模型 動畫 css3 預處理器 sass less postcss.基礎其他題目 書籍推薦基礎 原型 繼承 事件流 事件委託 變數 作用域 閉包 this 上下文 事件迴圈 前端快取 正則 跨域 settimeout setinterval requestanimationframe 深...

前端面試題(HTML CSS)

用正確的標籤做正確的事情。html 語義化讓頁面的內容結構化,結構更清晰,便於對瀏覽器 搜尋引擎解析 即使在沒有樣式 css 情況下也以一種文件格式顯示,並且是容易閱讀的 搜尋引擎的爬蟲也依賴於 html 標記來確定上下文和各個關鍵字的權重,利於 seo 使閱讀源 的人對 更容易將 分塊,便於閱讀維...

前端讀者 前端面試基礎手冊(HTML CSS)

語義化的html 符合w3c規範 語義化 讓搜尋引擎容易理解網頁 重要內容html 放在最前 搜尋引擎抓取html順序是從上到下,有的搜尋引擎對抓取長度有限制,保證重要內容一定會被抓取 重要內容不要用js輸出 爬蟲不會執行js獲取內容 少用iframe 搜尋引擎不會抓取iframe中的內容 非裝飾性...