块级元素
- 独占一行
- 宽度默认是父级的100%
- 添加宽高属性生效
约 525 字大约 2 分钟
2025-06-13
font-sizeOptional数值/百分比
字体大小,谷歌默认16px
colorOptionalrgb/十六进制/英文
文本颜色
font-weightOptional数值/normal/bold/bolder
字体粗细,400=normal,700=bold
font-styleOptionalnormal/italic
字体倾斜
line-heightOptional数值/字体倍数
行高,单行文字垂直居中:行高=盒子高度,
font-familyOptionalstring
字体家族,英文字体在前,中文字体在后
text-indentOptionalnumber
文本缩进,推荐em单位
text-alignOptionalleft/center/right
文本对齐,作用到父级时,内部也会居中
text-decorationOptionalnone/underline/line-through
修饰线,除此外还有dashed/dotted/double/overline/solid/wavy
提示
font复合属性可写为
p {
/* font-style font-weight font-size/line-height font-family */
font: italic 700 30px/2 "airal";
}background-colorOptionalrgb/十六进制/英文
背景色
background-imageOptionalURL
背景图
background-repeatOptionalno-repeat/repeat/repeat-x/repeat-y
背景图平铺方式
background-positionOptional水平位置 垂直位置
背景图位置,支持关键词left/top/right/bottom/center和正负数值
background-sizeOptional宽度 高度
背景图缩放,也支持cover和contain
background-attachmentOptionalscroll/fixed
背景图固定
提示
background复合属性不区分位置
div {
height: 100px;
width: 100px;
/* background-color background-image background-repeat background-position/background-size background-attachment */
background: blue url(/home/image.png) no-repeat top center/cover fixed;
}不同标签或元素的显示模式不同,呈现出的效果也不同
块级元素
行内元素
行内块元素
displayOptionalinline/block/inline-block/……
使用display转变显示模式