text-align: center的作用是什么衔峰,作用在什么元素上泊脐?能讓什么元素水平居中毁嗦?
作用在block元素上卵蛉,能讓塊級(jí)元素內(nèi)的inline元素和inline-block元素水平居中。
IE 盒模型和W3C盒模型有什么區(qū)別?
IE 盒模型的 width= border + padding + 內(nèi)容寬度
W3C盒模型的 width = 內(nèi)容寬度
*{ box-sizing: border-box;}的作用是什么盹廷?
使用IE盒模型
元素的內(nèi)邊距和邊框不再會(huì)增加它的寬度
line-height: 2和line-height: 200%有什么區(qū)別?
line-height:2
:文本行高為當(dāng)前元素字體大小的2倍
line-height: 200%
: 文本行高為當(dāng)前文本所在塊級(jí)元素的父元素的font-size的2倍(若是行內(nèi)元素的文本征绸,則會(huì)是行內(nèi)元素所在塊級(jí)元素的父元素的font-size的2倍)
數(shù)值:繼承的時(shí)候,瀏覽器會(huì)先將line-height這個(gè)屬性繼承給子元素俄占,再由子元素計(jì)算管怠。
百分?jǐn)?shù):繼承的時(shí)候,瀏覽器會(huì)先將行高對(duì)應(yīng)的數(shù)值計(jì)算出來(lái)以后再繼承缸榄。
inline-block有什么特性渤弛?如何去除縫隙?高度不一樣的inline-block元素如何頂端對(duì)齊?
讓元素?fù)碛行袃?nèi)元素不獨(dú)占一行的特性甚带,又可以對(duì)該元素設(shè)置寬高她肯,內(nèi)外邊距。
縫隙是由于空格導(dǎo)致鹰贵,對(duì)父級(jí)容器設(shè)置字體大星绨薄(font-size:0
)為0可以去除縫隙,
高度不一樣的inline-block元素默認(rèn)基線對(duì)齊碉输,設(shè)置vertical-align:top 籽前。
CSS sprite 是什么?
CSS Sprites是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式,就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中,再利用CSS進(jìn)行背景定位。 優(yōu)勢(shì):可以減少用戶瀏覽網(wǎng)頁(yè)時(shí)對(duì)服務(wù)器的請(qǐng)求數(shù)枝哄,減少服務(wù)器負(fù)載肄梨,達(dá)到優(yōu)化網(wǎng)站的目的。
讓一個(gè)元素"看不見"有幾種方式挠锥?有什么區(qū)別?
{ display: none; /* 不占據(jù)空間众羡,無(wú)法點(diǎn)擊 */ }
{ display: none; /* 不占據(jù)空間,無(wú)法點(diǎn)擊 */ }
{ visibility: hidden; /* 占據(jù)空間蓖租,無(wú)法點(diǎn)擊 */ }
{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占據(jù)空間粱侣,無(wú)法點(diǎn)擊 */ }
{ position: absolute; top: -999em; /* 不占據(jù)空間,無(wú)法點(diǎn)擊 */ }
{ position: relative; top: -999em; /* 占據(jù)空間菜秦,無(wú)法點(diǎn)擊 */ }
{ position: absolute; visibility: hidden; /* 不占據(jù)空間,無(wú)法點(diǎn)擊*/}{ height: 0; overflow: hidden; /* 不占據(jù)空間舶掖,無(wú)法點(diǎn)擊 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 占據(jù)空間球昨,可以點(diǎn)擊 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占據(jù)空間,可以點(diǎn)擊 */ }