挑戰前端基礎120題--css3基礎篇
1. CSS選擇器種類、權重、優先級計算、匹配順序、繼承？
- !important > 行內樣式 > id >
- 類選擇器 , 偽類（:hover）, 屬性選擇器 >
- 標簽，偽元素選擇器 （::before ::after :root） >
- 通配符 ,繼承 ，關系選擇器（兄弟選擇器（子選擇器（>) , 相鄰選擇器（+）>
- 瀏覽器默認
能夠被繼承的屬性：font-size/font類 / text類 line-height text-align color / 元素可見性：visibility
非繼承的 ： width/height/border/background
2. 塊、行的特性？
塊 div span ul ol h1~h6 table form view(小程序或者其他的框架) 單獨一行 display:block
行 span a li label text(小程序或者其他的框架) 行內元素 display:inline-block
特點：相鄰一行； 高度和寬度無效，但是可以設置line-hight；但是水平方向上的padding和margin可以設置，垂直方向上的無效；默認的寬度就是它本身的寬度；只允許容納純文本/其他行內標簽 （a標簽除外）
3. 盒子模型？
2類： ie盒子模型(寬度由三部分組成：2*padding+2*border+content) + 標準盒子模型（寬度由四部分組成：2*margin+2*pading+2*border+content）
css3中引入了box-sizing屬性，box-sizing:content-box 表示標準盒子模型，box-sizing:border-box 表示IE盒子模型
4. BFC的概念和應用？ 邊距折疊？
2個盒子的上下邊距有時候會折疊為一條邊距 ，稱為外邊距折疊；注意：有設定浮動和絕對定位的元素不會發生外邊距折疊
首先必須知道什么是BFC：區塊格式化上下文（Block Formatting Context）；
如何創建一個塊級上下文呢：
- 根元素 html
- 浮動元素 float:!none;
- 絕對定位元素 position: absolute / fixed
- 行內塊元素 display:inline-block
- 表格單元格/標題 display:table-cell
- overflow 不為 visible 或 clip 的塊級元素
- 彈性元素 display:flex 的子元素
解決邊距折疊：清除浮動 /設置浮動
5. Flex布局做頁面，flex-basis、flex-grow、flex-shrink的計算方法？
響應式布局 實現div盒子水平垂直居中/ 三頁布局
父元素設置：display:flex; flex-wrap / justify-content/align-item/flex-direction
flex-basis、flex-grow、flex-shrink的計算方法: https://juejin.cn/post/6844904016439148551
flex-grow 定義子容器的瓜分剩余空間的比例，默認為 0，即如果存在剩余空間，也不會去瓜分。
flex-shrink: flex 元素的收縮規則，默認值是 1 通常是子元素的寬度超過父元素沒有剩余空間瓜分了 通過配置 等比壓縮； 注意：如果子容器沒有超出父容器，設置 flex-shrink 無效
flex-basis：指定了 flex 元素在主軸方向上的初始大小
6. 定位各種用法？
positon： relative）/absolute （相對于最近的已定位的父元素 relative）/fixed（相對瀏覽器窗口）/static/sticky(基于用戶的滾動位置來定位)
7. link標簽和script標簽區別
lin引入css 放置在head內 頁面加載的時候 同時加載/預加載 不會阻塞潔面運行
script 引入js 會阻塞頁面的加載 通常放置在body上 可以設置延遲加載。
8. 動畫？
動畫：是將元素從一個形態變化到另一個形態的一個過程；
animation: name duration timing-function delay iteration-count direction fill-mode;
animation: 動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 起始與結束狀態
animation: move 2s linear 1s 2 forwards; /* 關鍵幀 */ @keyframes move { form { width: 100px; margin-left: 0px; } to { width: 200px; margin-left: 100px; } }
浙公網安備 33010602011771號