text-align: center的作用是什么弃酌,作用在什么元素上引谜?能讓什么元素水平居中
作用是使行內(nèi)元素與文本水平居中型宙;作用在塊級(jí)元素中,能讓行內(nèi)元素與文本水平居中吝梅。
IE 盒模型和W3C盒模型有什么區(qū)別?
W3C標(biāo)準(zhǔn)中padding虱疏、border所占的空間不在width、height范圍內(nèi)苏携,大家俗稱(chēng)的IE的盒模型width包括content尺寸+padding+border做瞪。
*{ box-sizing: border-box;}的作用是什么?
把整個(gè)頁(yè)面的所有元素默認(rèn)的W3C盒模型標(biāo)準(zhǔn)轉(zhuǎn)化為IE盒模型標(biāo)準(zhǔn)。
box-sizing: content-box:w3c標(biāo)準(zhǔn)盒模型
box-sizing: border-box:“IE盒模型”
line-height: 2和line-height: 200%有什么區(qū)別?
line-height: 2;装蓬,不能被子元素繼承著拭,設(shè)置為自己文本文字大小的兩倍。
line-height: 200%;牍帚,能被子元素繼承儡遮,設(shè)置為父容器文本文字大小的兩倍。
inline-block有什么特性暗赶?如何去除縫隙鄙币?高度不一樣的inline-block元素如何頂端對(duì)齊?
即呈現(xiàn)inline特性(不占據(jù)一整行,寬度由內(nèi)容寬度決定)又呈現(xiàn)block特性(可設(shè)置寬高蹂随,內(nèi)外邊距)十嘿。
去除縫隙:
- 標(biāo)簽之間不使用空格和回車(chē)鍵。
- 在其父元素設(shè)置font-size:0;糙及,然后在inline-block元素內(nèi)恢復(fù)font-size详幽。
在inline-block元素中設(shè)置vertical-align: top;可以使不同高度的inline-block元素頂端對(duì)齊筛欢。
CSS sprite 是什么?
指將不同的圖片/圖標(biāo)合并在一張圖上浸锨。
使用CSS Sprite 可以減少網(wǎng)絡(luò)請(qǐng)求,提高網(wǎng)頁(yè)加載性能版姑。
讓一個(gè)元素"看不見(jiàn)"有幾種方式柱搜?有什么區(qū)別?
- display:none;
- 瀏覽器不會(huì)生成屬性為display: none;的元素。
- display: none;不占據(jù)空間(畢竟都不熏染啦)剥险,所以動(dòng)態(tài)改變此屬性時(shí)會(huì)引起重排聪蘸。
- display: none;不會(huì)被子類(lèi)繼承,子類(lèi)也是不會(huì)顯示的表制。
- display,是個(gè)尷尬的屬性健爬,transition對(duì)她無(wú)效。
- visibility: hidden;
- 元素會(huì)被隱藏么介,但是不會(huì)消失娜遵,依然占據(jù)空間。
- visibility: hidden會(huì)被子類(lèi)繼承壤短,子類(lèi)也可以通過(guò)顯示的設(shè)置visibility: visible;來(lái)反隱藏设拟。
- visibility: hidden;不會(huì)觸發(fā)該元素已經(jīng)綁定的事件。
- visibility: hidden;動(dòng)態(tài)修改此屬性會(huì)引起重繪久脯。
- visibility,transition對(duì)它無(wú)效纳胧。
- opacity: 0 ;
- opacity: 0 ;只是透明度為100%,元素隱藏,依然占據(jù)空間帘撰。
- opacity: 0 ;會(huì)被子元素繼承,且子元素并不能通過(guò)opacity:1;進(jìn)行反隱藏跑慕。
- opacity: 0 ;的元素依然能觸發(fā)已經(jīng)綁定的事件。
- opacity,transition對(duì)它有效摧找。
- background-color: rgba(0相赁,0相寇,0,0)钮科;
- 只是背景色透明唤衫。