知識
塊級元素和行內(nèi)元素
| 分類 | 英文全稱 | 舉例 |
|---|---|---|
| 塊級元素 | block-level | div;h1~h6;table;td tr th;ul ol li;dl dt dd;pre;form;hr;p |
| 行內(nèi)元素 | inline-level | span em strong;a;br;img;button;input;label;select;textarea;code;script |
特性區(qū)別
塊級和行內(nèi)的特性區(qū)別.png
JSBin地址
- 由圖可知：
- 塊級元素可以包含塊級元素和行內(nèi)元素越走，而行內(nèi)元素只能包含行內(nèi)元素和文本陪每。
- 觀察紅色邊框九榔，可知塊級元素可以用CSS控制寬高廊敌，行內(nèi)元素不行檩禾。
- 觀察紅色邊框哲泊，塊級元素直接占據(jù)一整行元素，即使后面還有很大空間嚎尤。而行內(nèi)元素一行可以有多個，只占據(jù)自身寬度空間抖格。
- 由行內(nèi)元素的紅色部分和黃色部分可知诺苹，行內(nèi)元素的margin咕晋、padding只有左右方向有效，上下無效收奔。
CSS 繼承
- CSS繼承：子元素沒有指定值的情況下掌呜，會繼承父元素設(shè)置的一些屬性值。
- 可繼承的：
- 所有元素：visibility坪哄、cursor质蕉；
- 塊狀元素：text-indent、text-align翩肌；
- 列表元素：list-style模暗、list-style-type、list-style-position念祭、list-style-image兑宇；
- 表格元素：border-collapse；
- 內(nèi)聯(lián)元素：letter-spacing粱坤、word-spacing隶糕、white-space、line-height站玄、color枚驻、font、 font-family株旷、font-size再登、font-style、font-variant晾剖、font-weight锉矢、text- decoration、text-transform钞瀑、direction沈撞；
- 不可繼承：
display、margin雕什、border缠俺、padding、background贷岸、height壹士、min-height、max- height偿警、width躏救、min-width、max-width、overflow盒使、position崩掘、left、right少办、top苞慢、 bottom、z-index英妓、float挽放、clear、table-layout蔓纠、vertical-align辑畦、page-break-after、 page-bread-before和unicode-bidi腿倚。
塊級元素和行內(nèi)元素分別如何水平居中
- 塊級元素：設(shè)置
margin: _px auto;即可纯出。 - 行內(nèi)元素：在其所處的塊級元素的CSS中，設(shè)置
text-align: center;即可敷燎。
水平居中.png
用 CSS 實現(xiàn)一個三角形
塊級元素潦刃，寬高設(shè)0，邊框做特別粗懈叹，根據(jù)需要設(shè)置若干個邊框透明即可。
CSS代碼：
.triangle {
height: 0;
width: 0;
border-top: 50px transparent solid;
border-right: 50px transparent solid;
border-bottom: 50px red solid;
border-left: 50px transparent solid;
}
triangle.png
如何實現(xiàn)單行文本溢出加 ...
CSS代碼：
.b {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
文本溢出.png
PS: 把ellipsis換成clip分扎，是砍掉的效果澄成，如下圖
文本溢出2.png
Px, Em, Rem 的區(qū)別
- px：固定單位，像素px是相對于顯示器屏幕分辨率而言的
- em：相對單位畏吓，相對于父元素墨状，即相對于當(dāng)前對象內(nèi)文本的字體尺寸。若當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置菲饼，則相對于瀏覽器的默認(rèn)字體尺寸肾砂。
- rem：相對單位，與em類似宏悦，是相對于根元素（html）镐确。這個單位可謂集相對大小和絕對大小的優(yōu)點(diǎn)于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小饼煞，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)源葫。
解釋下圖代碼
6.png
- 該代碼表示：設(shè)置body內(nèi)的字體大小為12px，行高為字體大小的1.5倍（即18px）砖瞧，字體樣式首選tahoma 息堂，其次arial，Hiragino Sans GB，\5b8b\4f53（優(yōu)先級依次遞減）荣堰，查找電腦里對應(yīng)字體的字體文件床未，如果都沒有，則選用瀏覽器默認(rèn)字體 sans-serif振坚。
- 加引號的原因：如果不加薇搁，瀏覽器可能會把Hiragino Sans GB誤解為若干個字體樣式。
- \5b8b\4f53是Unicode碼編號屡拨，表示“宋體”：
字體.png
代碼
四個div.png
2. 五個button
9.png
10.png
七個三角形.png
兩個Card.png
