前端面試css篇一

display: none;與visibility: hidden;的區(qū)別

聯(lián)系：它們都能讓元素不可見

區(qū)別:

1、display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據(jù)任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續(xù)占據(jù)空間，只是內(nèi)容不可見

2、display: none;是非繼承屬性，子孫節(jié)點消失由于元素從渲染樹消失造成，通過修改子孫節(jié)點屬性無法顯示；visibility: hidden;是繼承屬性，子孫節(jié)點消失由于繼承了hidden，通過設置visibility: visible;可以讓子孫節(jié)點顯式

3、修改常規(guī)流中元素的display通常會造成文檔重排。修改visibility屬性只會造成本元素的重繪。

4、讀屏器不會讀取display: none;元素內(nèi)容；會讀取visibility: hidden;元素內(nèi)容

display: block;和display: inline;的區(qū)別

block元素特點：

1、可以應用margin/padding

2、忽略vertical-align

3、處于常規(guī)流中時，如果width沒有設置，會自動填充滿父容器

4、在沒有設置高度的情況下會擴展高度以包含常規(guī)流中的子元素

5、處于常規(guī)流中時布局時在前后元素位置之間（獨占一個水平空間）

inline元素特點：

1、受white-space控制?

2、margin/padding在豎直方向上無效

3、浮動或絕對定位時會轉換為block

4、vertical-align屬性生效

5、水平方向上根據(jù)direction依次布局

6、width/height屬性對非替換行內(nèi)元素無效，寬度由元素內(nèi)容決定

垂直居中

1、line-height

需要注意的是如果設置百分比，這個是指元素本身的字體大小。這個使用也是在知道本身或父元素高度之后才方便使用。

2、position+top+負margin-top

這個使用在知道本身高度之后才方便使用。

3、display:table

設置父元素table，子元素table-cell和vertical-align:middle(讓它居中）

4、aposition+top+bottom+margin

??? a、position：absolute/relative/fixed
??? b、btop/bottom：0
??? c、margin：auto

5、position+top+transform

6、flex布局

直接父元素display:flex。然后align-items:center即可