| 塊級元素(block-level) | 行內元素(內聯、inline-level) |
|---|---|
| 可以包含塊級和行內 | 只能包含文本和行內 |
| 占據一整行空間 | 占據自身寬度空間 |
| 設置寬高會生效 | 設置寬高會無效 |
| 設置內外邊距生效 | 設置內外邊距左右方向生效，上下會失效 （視覺上上下方向會被撐開，上下邊框的位置會受影響， 但不會影響元素實際高度） |
- block-level
div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th - inline-level
em strong span a br img button input label select textarea code script
css繼承
子元素會繼承父元素的某些css屬性
一、 不可繼承的屬性
display- 文本屬性
vertical-align text-decoration text-shadow white-space unicode-bidi - 盒模型屬性
width height margin margin-top margin-right margin-bottom margin-left border border-style border-top-style border-right-style border-bottom-style border-left-style border-width border-top-width border-right-right border-bottom-width border-left-width border-color border-top-color border-right-color border-bottom-color border-left-color border-top border-right border-bottom border-left padding padding-top padding-right padding-bottom padding-left - 背景屬性
background background-color background-image background-repeat background-position background-attachment - 定位屬性
float clear position top right bottom left min-width min-height max-width max-height overflow clip z-index - 生成內容屬性
content counter-reset counter-increment - 輪廓樣式屬性
outline-style outline-width outline-color outline - 頁面樣式屬性
size page-break-before page-break-after - 聲音樣式屬性
pause-before pause-after pause cue-before cue-after cue play-during
二、可繼承的屬性
- 字體屬性
font font-family font-weight font-size font-style font-variant font-stretch font-size-adjust - 文本屬性
text-indent text-align line-height word-spacing letter-spacing text-transform direction color - 元素可見屬性
visibility - 表格布局屬性
caption-side border-collapse border-spacing empty-cells table-layout - 列表布局屬性
list-style-type list-style-image list-style-position list-style - 生成內容屬性
quotes - 光標屬性
cursor - 頁面樣式屬性
page page-break-inside windows orphans - 聲音樣式屬性
speak speak-punctuation speak-numeral speak-header speech-rate volume voice-family pitch pitch-range stress richness azimuth elevation
水平居中
- 塊級元素
margin: 0 auto; - 行內元素
text-align: center;
CSS實現三角形
利用border，寬高設置為0，用四個方向的border實現三角形
<style>
.box {
height: 0;
width: 0;
border-top: solid 30px red;
border-right: solid 30px green;
border-bottom: solid 30px yellow;
border-left: solid 30px blue;
}
</style>
<div class="box"></div>
單行文本溢出加...
white-space: nowrap;
overflow: hidden;
text-overflow: elliapse;
px、em、rem區別
| px | em | rem | |
|---|---|---|---|
| 區別 | 固定單位，設置后，字體大小為設置的值 | 相對單位，相對于父元素字體大小 | 相對單位，相對于根元素(html)字體大小 |
