text-align: center的作用是什么,作用在什么元素上肩杈?能讓什么元素水平居中
text-align: center作用在塊級(jí)元素上解寝,可以讓元素內(nèi)文本以及 display 為 inline 和 inline-block 的子元素在元素內(nèi)水平居中扩然。
IE 盒模型和W3C盒模型有什么區(qū)別?
-
w3c盒模型
-
IE盒模型
- 區(qū)別:W3C盒模型中padding夫偶、border所占的空間不在width和height范圍內(nèi),而IE盒模型種padding兵拢、border所占的空間包含在width和height范圍內(nèi)。
*{ box-sizing: border-box;}的作用是什么说铃?
就是當(dāng)你設(shè)置width和height時(shí),這些屬性的作用范圍
詳細(xì)說明
示例
line-height: 2和line-height: 200%有什么區(qū)別?
-line-height: 2是指元素行高為font-size的2倍腻扇,指的是相對(duì)自身font-size大小的倍數(shù)。
-line-height: 200%是指元素行高為父元素font-size大小的2倍
inline-block有什么特性幼苛?如何去除縫隙?高度不一樣的inline-block元素如何頂端對(duì)齊?
- inline-block同時(shí)具有塊級(jí)元素和行內(nèi)元素的一些特性舶沿。既可以像行內(nèi)元素一樣不用獨(dú)占一行,又可以像塊級(jí)元素一樣可以設(shè)置寬高括荡。
- 去除縫隙的方法有三種:
- 在代碼中兩個(gè)元素之間不使用換行,直接連寫畸冲。
- 可以給需要消除縫隙的元素設(shè)置一個(gè)父元素,在父元素中使用font-size:0;然后再在元素中使用font-size設(shè)置元素原本的大小召夹。
- 父元素設(shè)置dispaly:flex恕沫,F(xiàn)lex是Flexible Box的縮寫,意為"彈性布局"婶溯。注意:設(shè)為Flex布局以后,子元素的float迄委、clear和vertical-align屬性將失效。
- 為元素設(shè)置vertical-align:top;屬性叙身。
CSS sprite 是什么?
CSS sprite是指精靈圖或者雪碧圖。就是把頁面上的多個(gè)圖片集合在一張圖片上信轿,然后使用背景圖片時(shí)利用background-position屬性,定位所需要的圖片在精靈圖上的位置即可倘核。這樣一個(gè)網(wǎng)頁的背景圖不需要向服務(wù)器發(fā)送多次請(qǐng)求,圖片數(shù)量也會(huì)變少紧唱,加載網(wǎng)頁時(shí)速度會(huì)變快。
讓一個(gè)元素"看不見"有幾種方式漏益?有什么區(qū)別?
有四種方式:
- 設(shè)置透明度蛹锰,使用opacity:0;使元素完全透明(這個(gè)貌似會(huì)影響z-index)遭庶。
- 隱藏元素,使用visibility:hidden;用戶不可見峦睡。
- 使元素在頁面消失,使用dispaly:none;元素不會(huì)占用位置榨了。
- background-color: rgba(0,0龙屉,0,0) 只是背景色透明转捕。