css清除浮動float的三種方法，css為什么要用浮動_CSS問題和解決

css清除浮動float的三種方法， 1. 瀏覽器私有前綴(兼容)

-moz-    

2. 浮動引起的問題和解決

問題1

父元素高度撐不開，同父級的元素緊隨其后，會被浮起來的子元素遮擋

解決

1. 為父元素固定高度
2. 父元素設置 overflow:hidden;
3. 子級最后添加一個空標簽，賦予clear: both;
4. 給父元素標簽class="clearfix"，樣式如下：

.

問題2

1、2、3，12浮動，3不浮動，12會蓋在3上面

解決

1. 給3 clear: both; 3就會去往下一行，不會被遮蓋

3. position的值分別相對哪個位置定位？

• relative相對自己原來位置
• absolute相對父元素定位
• fixed相對于瀏覽器窗口

4. 哪些樣式可以繼承？

① 字體系列屬性

• font-family：字體系列
• font-weight：字體的粗細
• font-size：字體的大小
• font-style：字體的風格

② 文本系列屬性

• text-indent：文本縮進
• text-align：文本水平對齊
• line-height：行高
• word-spacing：單詞之間的間距
• letter-spacing：中文或者字母之間的間距
• color：文本顏色

③ 元素可見性：

• visibility：控制元素顯示隱藏

④ 列表布局屬性：

• list-style：列表風格

⑤ 光標屬性：

• cursor：光標顯示為何種形態

5. 為什么要初始化CSS？

不同瀏覽器對標簽的默認值是不同的，不初始化，會在不同瀏覽器產生差異

6. 如何居中div？居中浮動元素？

div 

7. div+CSS實現3欄布局(左右固定200px，中間自適應)

html

<

css

.

8. 幾種IE6 Bug

① 雙邊距問題，雙倍margin，float引起的

解決：display: inline;

② 3像素問題，float引起的

解決：_margin-right: -3px;

③ 超鏈接hover偽類樣式，單擊后失效

使用正確的書寫順序：LVHA(link, visited, hover, active)

④ z-index 問題

給父級添加 position:relative;

⑤ 定義高度很小的容器

overflow: hidden 或 font-size: 容器高度px；

⑥ PNG24 位的圖片在 IE6 瀏覽器出現背景。

改成PNG8，也可以引入一段腳本處理

9. 圖片下方有幾像素的空白間隙

定義img為display:block 或 定義父容器 font-size:0;

10. 超出寬度的文字顯示為省略號

overflow

11. 如何使英文單詞發生詞內斷行？

word-wrap

12. 如何實現 IE6 下的 position:fixed?

html_

13. 如何讓min-height兼容IE6？

.

14. CSS中，自適應的單位有哪些？

• 百分比：%
• 相對于視口寬度的單位：vw
• 相對于視口高度的單位：hw
• 相對于視口寬度或高度(取決于哪個小)的單位：vm
• 相對于父元素字體大小的單位：em
• 相對于根元素字體大小的單位：rem

15. CSS的content屬性有什么作用？

應用在 before/after 偽元素上，用于插入生成的內容。

16. 外邊距重疊規則

• 兩個相鄰的外邊距都是正數時，合為較大的
• 都是負數，絕對值較大的
• 一正一負，取相加的和

17. rgba()和opacity的透明效果有什么不同？

• rgba()作用于元素及元素內所有內容，包括子元素
• opacity只作用于顏色、背景色，不影響子元素

18. 控制行間距和字間距的屬性是什么？有什么妙用？

• line-height letter-spacing
• letter-spacing能消除inline-block元素之間的換行符空格間隙

19. 不顯示元素的方法

• display:none;
• visibility:hidden;
• 寬高為0
• 透明度為0
• z-index:-1000;

20. 行內屬性標簽

• span、a、em、strong、select、option、img、input、textarea
• 后三個特殊，可以設置寬高

CSS3

1.first-child 與 first-of-type 的區別

• first-child，第一個子元素，并且認標簽
• first-of-type，第一個元素

<

• p:first-child 匹配到p元素
• span:first-child 匹配不到span元素，第一個不是span
• p:first-of-type 匹配到p元素
• span:first-of-type 匹配到span元素

2. 當使用 transform:translate 屬性時會出現閃爍現象，如何解決？

-webkit-backface-visibility

3. 用兩種方式實現div元素以 每秒50px 左移100px

① 使用jQuery

$

② JS+CSS3

div

4. box-sizing: border-box;作用

• 寫了的話，width=內容寬度+padding*2+borde*2; 內邊距和邊框改變的話，內容寬度也改變，但是盒子寬度是定值=width
• 沒寫，width=內容寬度。內邊距和邊框改變的話，內容寬度不變，盒子寬度不確定

5. transition和animation的區別

• transition：過渡動畫，指定屬性的開始值和結束值，設置平滑的過渡實現動畫。
• animation：幀動畫 關鍵幀@keyframes中定義屬性值，實現更復雜的動畫。

6. 淡入淡出的動畫效果

@

7. 如何為盒子添加蒙版？

.

8. 如何相對于內容框定義圖像？

.

9. 實現背景顏色線性漸變？

div 

10. CSS3 倒影

.

11. 把文本分隔為4列，間隔30px

div 

12. 用幀動畫，使div移動200px

div