28.為什么會(huì)出現(xiàn)浮動(dòng)？浮動(dòng)會(huì)帶來(lái)哪些問(wèn)題？
1)為什么會(huì)出現(xiàn)浮動(dòng)：
為了頁(yè)面排版時(shí)塊元素同行顯示
2)浮動(dòng)帶來(lái)的問(wèn)題：
父元素高度崩塌
29.清除浮動(dòng)的方法
?(額外標(biāo)簽法、父級(jí)overflow、after偽元素、雙偽元素）
（1）給浮動(dòng)的子盒子的父盒子設(shè)置高度
（2）給父盒子添加overflow：hidden
（3）額外標(biāo)簽法：給浮動(dòng)盒子的后方設(shè)置一個(gè)空盒子，并為這個(gè)空盒子設(shè)置clear:both屬性
（4）使用偽元素、雙偽元素的方式
30.設(shè)置左上角的邊框圓角值為15px
border-top-left-radius: 20px;（需要注意先寫(xiě)垂直方向 后寫(xiě)水平）
或者 border-radius: 20px 0 0 0;
31.css的三種顯示模式及其特點(diǎn)
行內(nèi)塊：一行多個(gè)（不能獨(dú)立成行）、可設(shè)寬高
例如：<img>、<input>
行內(nèi)元素：一行多個(gè)、不可設(shè)寬高、設(shè)置上下內(nèi)外邊距無(wú)效
例如：<font></font>、<b></b>、<span></span>
塊級(jí)元素：獨(dú)立成行、可設(shè)寬高
例如：<p></p>、<h1></h1>、<div></div>
32.css的三種轉(zhuǎn)換模式
（1）轉(zhuǎn)換為塊元素：display:block;
（2）轉(zhuǎn)換為行內(nèi)塊：display:inline-block;
（3）轉(zhuǎn)換為行內(nèi)元素：display:inline;
33.css的三種布局
標(biāo)準(zhǔn)流、浮動(dòng)、定位
34.定位有幾種模式？分別是什么？特點(diǎn)是什么？
（1）靜態(tài)定位（static） : 默認(rèn)
（2）相對(duì)定位（relative）： 相對(duì)自己本身原來(lái)所在位置的偏移，并且還占有原來(lái)的位置，不脫離標(biāo)準(zhǔn)流
（3）絕對(duì)定位（absolute）: 是元素以帶有定位的父級(jí)元素來(lái)移動(dòng)位置 （拼爹型），（子絕父相），脫離標(biāo)準(zhǔn)流，不占據(jù)原來(lái)的位置,脫離標(biāo)準(zhǔn)流
（4）固定定位（fixed） : 是以瀏覽器窗口為參照物進(jìn)行定位的，脫離標(biāo)準(zhǔn)流
35.定位改變display屬性
針對(duì)行內(nèi)元素 行內(nèi)元素如果想讓寬高生效的話:
1）轉(zhuǎn)換行內(nèi)塊元素/塊級(jí)元素
2）設(shè)置浮動(dòng)
3）設(shè)置定位（絕對(duì)定位和固定定位）
36.如何使用定位讓一個(gè)已知寬高盒子垂直水平居中？
定位模式：position:absolute;或者position:fixed;
垂直居中 邊偏移top:50% margin-top:-100px;
水平居中 邊偏移left:50% margin-left:-100px;
margin-top:-100px是指盒子高度的一半
margin-left:-100px是指盒子寬度的一半
37.關(guān)于定位口訣子絕父相，什么是?絕?相以及為什么要?絕?相？
子元素設(shè)置絕對(duì)定位 父元素需要設(shè)置定位
原因：
1）?元素不占據(jù)標(biāo)準(zhǔn)流位置，所以設(shè)置絕對(duì)定位，絕對(duì)定位，父盒子要帶有定位
2）父元素需要占據(jù)標(biāo)準(zhǔn)流位置，所以設(shè)置相對(duì)定位
38.圖片文字對(duì)齊(垂直對(duì)齊方式)
vertical-align:top; 頂部對(duì)齊
vertical-align:middle; 中間對(duì)齊，圖文對(duì)齊
vertical-align:bottom; 底部對(duì)齊
vertical-align:baseline; 基線對(duì)齊
39.display有哪些屬性值，分別是什么意思？
display:none; 元素的隱藏
display:block; 元素的顯示
display:block; 轉(zhuǎn)換為塊級(jí)元素
display:inline; 轉(zhuǎn)換為行內(nèi)元素
display:inline-block; 轉(zhuǎn)換為行內(nèi)塊元素
40.display:none與 visibility:hidden的區(qū)別
display:none;隱藏之后，不保留原有位置
visibility:hidden;隱藏之后，保留原有位置
41.overflow有哪些值，分別是什么意思？
overflow:visible; 不剪切內(nèi)容也不添加滾動(dòng)條
overflow:hidden; 不顯示超過(guò)對(duì)象尺寸的內(nèi)容，超出的部分隱藏掉
overflow:scroll; 不管超出內(nèi)容否，總是顯示滾動(dòng)條
overflow:auto; 超出自動(dòng)顯示滾動(dòng)條，不超出不顯示滾動(dòng)條
42.去除圖片底側(cè)的空白空隙
①給img 設(shè)置vertical-align:middle | top| bottom等等。讓圖片不要和基線對(duì)齊。
②給img 添加 display:block; 轉(zhuǎn)換為塊級(jí)元素就不會(huì)存在問(wèn)題了
43.溢出的文字省略號(hào)顯示
1）強(qiáng)制在一行顯示 white-space:nowrap;
2）超出的部分隱藏 overflow:hidden;
3）溢出的文字用省略號(hào)顯示 text-overflow:ellipsis;
44.簡(jiǎn)述優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)
優(yōu)雅降級(jí)：先寫(xiě)最新版本瀏覽器支持的外觀樣式，再考慮兼容問(wèn)題，兼容舊版本瀏覽器
漸進(jìn)增強(qiáng)：先保證基本功能的實(shí)現(xiàn)，再考慮實(shí)現(xiàn)新的外觀效果，兼容新版本瀏覽器
45.如何使用定位讓一個(gè)未知寬高的盒子垂直，水平居中？
第一步：絕對(duì)定位 上下左右為0
第二步：margin：auto；
46.CSS Sprites精靈圖使用步驟？使用CSS精靈圖的好處？
步驟：①.得到精靈圖后? ②.插入背景圖的方式進(jìn)行引用? ③.再利用背景圖片定位
好處：①.減少http的請(qǐng)求次數(shù)? ②.頁(yè)面加載速度變快
47.瀏覽器是怎樣解析CSS選擇器的？
寫(xiě)時(shí)從左到右，解析時(shí)從右到左。先選最里層，后選外層
48.什么是回流？什么是重繪以及區(qū)別？
回流：從新加載頁(yè)面，布局發(fā)生變化? ? ? ?重繪：重新調(diào)用css? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 區(qū)別：回流必將引起重繪，而重繪不一定會(huì)引起回流。
49.用純CSS實(shí)現(xiàn)三角形的原理是什么？
1）div的寬高為0
2）四個(gè)方向邊框：粗細(xì) 實(shí)線 顏色
3）想要哪個(gè)方向給哪個(gè)方向邊框設(shè)置透明色（transpare）
50.style標(biāo)簽寫(xiě)在body前和body后有什么區(qū)別？
寫(xiě)在body前當(dāng)然是先加載樣式.
寫(xiě)在body標(biāo)簽后先加載HTML結(jié)構(gòu)再加載樣式，會(huì)出現(xiàn)頁(yè)面閃爍的問(wèn)題
51.怎么讓Chrome支持小于12px的文字？
font-size后加縮放比例
52.rgba、opacity、transparent透明效果有什么區(qū)別？
rgba設(shè)置透明效果，只作用于當(dāng)前元素
opacity不只作用于當(dāng)前元素，還包括當(dāng)前元素里的內(nèi)容，具有繼承性
transparent 是顏色的一種，這種顏色叫透明色
53.取消輪框線
outline: 0; 或者 outline: none;
54.div+css布局較table布局有什么優(yōu)點(diǎn)？
1）?結(jié)構(gòu)與樣式分離
2）代碼語(yǔ)義性好
3）更符合HTML標(biāo)準(zhǔn)規(guī)范
4）SEO（搜索引擎優(yōu)化）友好