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-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;
}
}