1湿蛔、塊級元素和行內(nèi)元素分別有哪些墓卦?動手測試并列出4條以上的特性區(qū)別。
塊級元素有:H1到H6 div p table ul ol li dd dt tr td form
行內(nèi)元素有:a img br em span button input label textarea
1)塊級元素(block-level)占據(jù)一整行空間蝗羊,行業(yè)元素(inline-level)占據(jù)自身寬度空間精置。
2)塊級元素可以包含塊級元素和行內(nèi)元素,而行內(nèi)元素只能包含行內(nèi)和文本元素娇豫。
3)塊級元素可以設(shè)置寬高匙姜,行內(nèi)元素設(shè)置寬高無效,但是img標(biāo)簽例外冯痢。
4)塊級元素可以設(shè)置內(nèi)外邊距氮昧,行內(nèi)元素設(shè)置內(nèi)外邊距對上下不管用,只對左右有效浦楣。
2袖肥、什么是 CSS 繼承? 哪些屬性能繼承,哪些不能振劳?
CSS繼承是指子元素實現(xiàn)父元素的某些屬性椎组,font字體類屬性,文本類屬性等可以繼承如letter-spacing历恐、word-spacing寸癌、white-space、line-height夹供、color灵份、font仁堪。
不可繼承有盒模型屬性類哮洽,比如margin、border弦聂、padding鸟辅、background、height莺葫、width等匪凉。
3、如何讓塊級元素水平居中捺檬?如何讓行內(nèi)元素水平居中?
塊級元素可以設(shè)置margin:0 auto;
行內(nèi)元素可以將其放入一個塊元素內(nèi)再层,然后設(shè)置塊元素的屬性text-align: center即可。
4堡纬、用 CSS 實現(xiàn)一個三角形聂受?
設(shè)置塊元素的高寬為0,并設(shè)置邊框?qū)挾葹槿切蔚母呖靖洌粝乱粋€方向上的邊框顯示即可蛋济。想實現(xiàn)其它方向的三角形,合理設(shè)置留出哪個方向上的邊框就可以了炮叶。
如下
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px red solid;```
### 5碗旅、單行文本溢出加 ...如何實現(xiàn)?
給單行文本加如下屬性渡处,缺一不可。
white-space: nowrap; 文本超過邊框不換行
overflow: hidden; 文本超過邊框的部分隱藏
text-overflow: ellipsis;超過邊框的部分用...顯示
### 6祟辟、px, em, rem 有什么區(qū)別医瘫?
px:屏幕分辨率,像素單位旧困。
em:是相對于父元素的字體大小屬性而計算的倍數(shù)單位登下。
rem:rem是相對于根元素<html>字體大小而計算的倍數(shù)單位。
### 7叮喳、解釋下面代碼的作用?為什么要加引號? 字體里的數(shù)字符號代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}設(shè)置body元素所有后代元素下的字體樣式為:字體大小12PX被芳,行高為當(dāng)
前字體大小的1.5倍,字體優(yōu)先選擇順序為tahoma,arial ,Hiragino Sans GB,\5b8b\4f53,sans-serif,
其中加引號的字體是因為它有多個單詞組成馍悟,數(shù)字符號實際上是宋體的unicode 表示方式畔濒。
[1](http://js.jirengu.com/nevemowega/2/)
[2](http://js.jirengu.com/caqejuqeqa/2/)
[3](http://js.jirengu.com/lixudinase/3/)
[4](http://js.jirengu.com/cosulakomi/2/)
[5](http://js.jirengu.com/petezupeki/2/)