面試(html&css)

行級塊級元素

行級元素,不能設置寬高,水平排列
a,span,i,em,b,strong
塊級元素,可以設置寬高
div p h1 ul li
行內快
img button text

常見選擇器

類選擇器
id選擇器
標籤選擇器
後代
子代
兄弟 E+F
僞類選擇器 nth-child
僞元素:after{}

優先級

內聯 1000
id 100
class 10
標籤 和僞元素 1
繼承 0

清除浮動

 .clearfix:after { 
 content: ""; 
 display: block; 
 height: 0; 
 clear: both;
 visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 專有 */

定位

static
relative
absolute
fixed
sticky 吸頂 粘性定位

盒模型

標準盒模型
寬度相當於width+padding+border
ie盒模型
寬度 = width

外邊距合併

overflow:hidden
脫離標準流 浮動 定位
僞元素解決

::before {
            content: "";
            display: table;
        }

BFC塊級格式化上下文

作用

規定了內部的盒子如何佈局
清除浮動
防止margin重疊

佈局規則

1. 內部的box會在垂直的方向,一個接着一個的放置,
2. Box的垂直方向的距離由margin決定,屬於同一個BFC的相鄰的Box的margin會重疊
3. 每個元素的margin box的左邊和包含快的border box的左邊相接觸
4. 不會與浮動的盒子重疊
5. 是獨立的容器,子元素不會影響到外面的元素
6. 計算高度時,浮動也參與計算

那些元素生成bfc

根元素html
設置float
絕對定位
overflow:hidden

重排 重繪 迴流

重繪

元素外觀被改變,但是沒有改變佈局(寬高)

重排

dom變化影響到了元素的幾何屬性,瀏覽器會重新計算

迴流

瀏覽器發現某個部分的變化影響到了佈局,需要倒回去重新渲染