css面試總結

盒模型

盒模型：由裏向外content,padding,border,margin。
標準盒模型：
怪異盒（ie）：
box-sizing:border-box 轉換成怪異盒。
box-sizing:content-box 標準盒模型。

BFC 塊級格式化上下文

說白了就是塊級元素的佈局渲染規範，能夠理解成一個大箱子，箱子內部的元素不管如何亂，都不會影響外部
只要元素知足下面任一條件便可觸發
float 除了none之外的值
overflow 除了visible 之外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block, flex, inline-flex)
position值爲（absolute，fixed）
fieldset元素

Flex（彈性盒）

flex-direction 屬性

flex-wrap 屬性

flex-flow 屬性
align-items屬性

justify-content屬性

使用彈性盒進行水平垂直居中

display:flex
display:-webkit-flex:兼容
align-items:center
justify-content:center

行內元素、塊級元素、空元素

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquote
空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img
行內元素不能夠設置寬高，不獨佔一行
塊級元素能夠設置寬高，獨佔一行
display:inline 轉換爲行內元素
display:block 轉換爲塊狀元素
display:inline-block 轉換爲行內塊狀元素

元素居中的方法

text-align:center 適用於內聯元素
margin:0 auto 適用於塊級元素
定位+偏移、定位（四個方向都爲0）+margin：auto
彈性盒 display:flex

佈局的方式

定位position

浮動float
flex佈局

css3新特性

一、過渡 transition(屬性，時間，效果曲線，延時時間)
二、動畫 animation(動畫名稱，一個週期時間，運動曲線，動畫延遲，播放次數)
三、transform 適用於2d 3d 轉換的元素
四、陰影 box-shadow
五、顏色 rgba
七、彈性佈局 display flex/none

h5新增語義化標籤

標籤語義化:在合適的地方放合適的標籤 利於seo優化
語義化的標籤，旨在讓標籤有本身的含義

1. 代碼結構清晰，方便閱讀，有利於團隊合做開發。
2. 方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以語義的方式來渲染網頁。
3. 有利於搜索引擎優化（SEO）。

`<header>頭部</header> 
<nav>導航</nav> 
<section> 
<aside>側邊欄</aside> 
<article>文章</article> 
</section> 
<footer>底部</footer>`

px、em、rem的區別

px：絕對單位，頁面按精確像素展現。
em：相對單位，基準點爲父節點字體的大小。
rem：相對單位，相對根節點html的字體大小來計算。

css選擇器以及權重

標籤選擇器、類選擇器、id選擇器、子選擇器、包含選擇器、兄弟選擇器、相鄰選擇器、全局選擇器、羣選擇器、屬性選擇器、僞類選擇器

實現三角形

with:0;height:0border-left:50px solid transparentborder-right:50px solid transparentborder-bottom:100px solid red