块级元素
- 独占一行
- 宽度默认是父级的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转变显示模式