前端面試題--css

1.z-index的使用

答：z-index是用於設置標籤的層級關係，需要同時設置標籤的position屬性，標籤的默認z-index爲0，可以設置負數，值越大，越在頂部，相反值越小 越在下面， 權重的數字也要適當  導航  底部切換  固定logo等 一些常見估計在最頂部 的權重可以把數值調大 ，其他的 就適當

2.float的使用

答：屬性定義元素在哪個方向浮動。在HTML有標準流，浮動流  當元素浮動的時候，他本身就會脫離標準流，如果父盒子沒設置高度的話  會變成0，所以我們可以通過清除浮動來消除影響  以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。具體如下：

float造成的效果

1. 使元素本身變成了類似於inline-block的元素
2. 使包裹它的元素忽略它的高度，即父元素沒有了高度
3. 如：給子元素box設置了height:100px;此時的父元素height也是100px。

float的影響

1. float使元素脫離了文檔流按照指定的方向發生了移動，直到它的外邊緣碰到包含框或者另一個浮動的邊框爲止。
2. 浮動只會影響他後面的元素，如果上面的元素不浮動，他也不會上去的
3.  如果父元素太窄，無法容納所有的浮動元素，無法容納的浮動元素會換行顯示。
4. 以換行的那個元素爲基準，如果有浮動元素的高度大於換行的那個元素，那麼當換行元素換行時會被高的那個元素"卡住"

3.清除浮動影響的方式

答：float會造成文檔流的破壞，會讓佈局方式發生改變  浮動元素會覆蓋在標準流的元素上面  因此，需要消除float所造成的影響一般有如下幾種方案解決：

1. 針對子元素：給浮動的子元素後面再加一個元素，加上一個clear：both屬性即可正常顯示，缺點是隨意添加了一個空元素，不符合代碼規範
2. 針對於1的另外一個思路就是通過僞類的方法在僞類上添加clear：both;
3. 針對父元素：給父元素後面添加一個相鄰的空元素，設置clear屬性，但只是讓後面的元素正常顯示，並沒有撐開父元素的高度
4. 針對父元素：給父元素設置高度，可以正常顯示，但擴展性不好，因爲一般都是由裏面的內容來撐開高度
5. 針對父元素：給父元素設置display: inline-block，可以正常顯示，但父元素的margin：auto失效了，而且會發現上下兩個部分會出現間隙
6. 針對父元素：給父元素設置overflow: hidden，可以正常顯示了，但需要配合寬度，否則會默認佔滿一行。

4.css形變屬性

答：CSS3添加了形變功能，通過transform 我們可以對元素進行旋轉，平移，縮小放大，傾斜的操作，默認是2D，操作X和Y，

1. 通過transform-style: preserve-3d 開始元素的3D模式 多了個Z軸，
2. 通過 backface-visibility選擇元素旋轉到180度後  是否可以看到背面
3. 通過perspective 開始元素近大遠小的效果
4. 這個是一些常見CSS圖形 CSS圖形變化

5.box-sizing的用法

答：標準的盒子模型的包括：margin，border，padding以及內容的寬度，即：盒子的實際寬度=內容的左右margin+左右border+左右padding+內容的實際寬度；默認的添加邊距的話 內容盒子就會對應變換，而有時候我們需要固定大小但又要加邊距   wm引入了box-sizing屬性，可以改變標準盒子模型的計算方式，具體爲：設置box-sizing：border-box的時候，盒子的實際寬度=內容的左右margin+內容的實際寬度，即寬度會保持不變 當然可以直接設置box-sizing：content-box的時候即可恢復正常的標準盒子模型

6.flex彈性佈局

答：設置盒子的display屬性爲flex，或者line-flex，其對應還有六個css屬性

1. flex-direction：設置子元素的排列方式（row，column，row-reverse，column-reverse）
   1. row 默認值。靈活的項目將水平顯示，正如一個行一樣。
   2. column 靈活的項目將垂直顯示，正如一個列一樣。
   3. row-reverse 與 row 相同，但是以相反的順序。
   4. column-reverse  與 column 相同，但是以相反的順序。
2. flex-warp：設置子元素的是否換行（nowarp，warp，warp-reverse）
3. flex-flow：flex-direction和flex-warp的縮寫，默認爲row nowarp
4. justify-content：設置子元素的水平排列方式（flex-start，flex-end，center，span-around，span-between）
5. align-items：設置子元素的垂直方式（flex-start，flex-end，center，stretch，baseline）
6. align-content：設置多個軸線的排列方式（flex-start，flex-end，center，spand-around，spand-between，stretch）

7.常見居中方案

1. 行內元素水平居中：直接使用text-align：center;
2. 行內元素垂直居中：vertical-align：middle並設置父級元素的行高爲父級元素的高度
3. 塊級元素 水平居中使用：magin：0 auto;
4. flex彈性佈局：設置justify-content：center水平居中，align-items：垂直居中
5. 通過padding屬性進行垂直居中，計算中間值
6. 通過table 佈局 設置父級元素爲：display：table-cell，vertical-align：middle;text-align：center；
7. 高度確定的時候：絕對定位+margin來垂直居中  上下各爲50%，上邊距爲高度的一半 左邊距爲寬度的一半
8. 高度不確定的時候：絕對定位+transform，具體爲：設置需要垂直居中的元素爲：position：absolute，top：50%,left: 50%； transform：translate(-50%，-50%)
9. 父級元素高度已知，子元素高寬固定（高度可不固定）：text-align：center，line-height：父級高度