CSS 属性词典 154 条
每个属性做什么、常用的值有哪些、会不会传给子元素，一行说清。
布局11
决定元素当作哪种盒子处理、内容溢出时怎么办的一类属性。
display决定元素当作哪种盒子来处理。任何布局都从这个属性开始。visibility显示或隐藏。用 hidden 藏起来后，位置照样占着。float让元素浮到一侧，文字从旁边绕过去。如今这活儿由 flex 和 grid 接手。clear把元素挤到前面所有浮动元素的下方。overflow决定溢出的内容是裁掉还是可以滚动。overflow-x只管左右方向溢出时怎么办。overflow-y只管上下方向溢出时怎么办。box-sizing决定宽高算不算进内边距和边框。border-box 最省心。aspect-ratio把宽高锁成固定比例，只给一边也能自动算出另一边。container-type把元素立成容器查询的基准，让子元素按容器宽度而非窗口宽度变化。isolation新建一个层叠上下文，把混合模式挡在里面不外溢。
弹性与网格24
把元素排成行、摆进格子的一类属性。今天的布局大半靠这两套。
flex-direction决定弹性子项排成横排还是竖排。flex-wrap放不下的时候，是换行还是硬挤在一行里。flex一次写完伸、缩、基准三个值。flex: 1 就是平分剩余空间。flex-grow剩余空间按什么比例分给这一项。flex-shrink空间不够时，这一项按什么比例被压缩。flex-basis伸缩之前，这一项的起始尺寸。justify-content沿主轴方向把子项对齐或分散。align-items沿交叉轴方向把子项对齐。align-self单独给某一项改掉交叉轴的对齐方式。align-content换行之后，行与行之间怎么分布。gap子项之间留出的空隙，不影响外侧边缘。row-gap只设行与行之间的空隙。column-gap只设列与列之间的空隙。order不动 HTML 顺序，只改视觉上的先后。改多了会让读屏工具错乱。grid-template-columns定义网格有几列、每列多宽。grid-template-rows定义网格有几行、每行多高。grid-template-areas用名字画出版面草图，再让各元素认领自己的区域。grid-column这个元素从第几条竖线跨到第几条。grid-row这个元素从第几条横线跨到第几条。grid-auto-flow没明确摆放的元素，自动往哪个方向填。grid-auto-rows自动生成的那些行有多高。place-items一行写完两个方向上子项的对齐。place-content一行写完两个方向上整块内容的分布。justify-items沿行内方向，把每个子项在自己的格子里对齐。
盒子与间距16
尺寸和间距。外边距上下会合并，内边距上会铺背景色。
width元素的宽度。百分比是相对父元素算的。height元素的高度。百分比要父元素有明确高度才生效。min-width宽度的下限，不会比这个值更窄。max-width不会比这个更宽。正文限宽常用它。min-height高度的下限，不会比这个值更矮。max-height不会比这个更高，超出的部分交给 overflow。margin盒子外面的空白。上下两边的外边距会合并成一个。margin-top盒子上方的外边距。margin-right右侧的外边距。设成 auto 会把盒子推向左边。margin-bottom盒子下方的外边距。margin-left左侧的外边距。左右都设 auto 就居中了。padding盒子里面的空白，撑在边框和内容之间。padding-top边框和内容之间，上方的空白。padding-right边框和内容之间，右侧的空白。padding-bottom边框和内容之间，下方的空白。padding-left边框和内容之间，左侧的空白。
文字25
字体、行高、对齐这些决定读起来什么样的属性。大多会传给子元素。
font-size文字大小。rem 跟着根元素走，em 跟着父元素走。font-family用哪套字体。按顺序往后找，直到找到装了的那一款。font-weight笔画的粗细。400 是常规，700 是粗体。font-style要不要斜体。italic 用专门的斜体字，oblique 只是把字压斜。font一行写完字体的几个属性。没写到的会被悄悄重置。line-height行与行之间的高度。不带单位的数值最好使。letter-spacing字与字之间的间距。标题收紧一点常更好看。word-spacing词与词之间的间距。text-align文字在行内往哪边靠。text-decoration下划线、删除线这些，一行写完。text-decoration-line只决定画哪种线：下划线、上划线还是删除线。text-decoration-color只决定那条线的颜色。text-decoration-style那条线是实线、虚线还是波浪线。text-transform把字自动变成全大写或全小写，原文不动。text-indent段落第一行缩进多少。text-overflow放不下的文字怎么收尾，ellipsis 会补上省略号。text-shadow给文字加投影。图片上的字靠它拉开对比。white-space空格和换行是保留还是合并。word-break长单词要不要在中间硬断开。overflow-wrap一个词长到撑破容器时，允许在词内换行。writing-mode文字横着排还是竖着排。vertical-align行内元素在这一行里上下怎么对齐。font-variant-numeric数字要不要等宽。表格里的数字对齐靠它。hyphens换行时允不允许自动加连字符。text-wrap决定换行怎么断。balance 会把标题各行长度拉匀。
颜色与背景13
文字色、背景色、渐变和透明度。
color文字的颜色。边框和某些线条默认也跟着它。background-color背景填哪种颜色，铺在背景图的下面。background-image背景铺的图片或渐变。可以叠好几层。background-size背景图铺多大。cover 铺满，contain 全露。background-position背景图摆在哪个位置。background-repeat背景图重不重复铺。background-attachment滚动时背景跟着走还是钉住不动。background一行写完背景的所有属性。没写到的会被重置。background-clip背景铺到哪一层为止。配 text 可以做出渐变字。opacity整体的不透明度，子元素也一起变淡。mix-blend-mode这一层和下面那层用什么方式混色。accent-color复选框、单选框这些原生控件的主色。color-scheme告诉浏览器本页支持浅色还是深色，原生控件会照着变。
边框13
边框、圆角和阴影。outline 不占位置。
border一行写完边框的粗细、线型和颜色。border-width只设边框的粗细，不动线型和颜色。border-style只设边框的线型。不写这个，边框根本不显示。border-color只设边框的颜色，不写就跟着文字色走。border-top只设上边框，其余三边不动。border-bottom只设下边框。列表行之间的分隔线常用它。border-radius把四角削圆。50% 变圆形，给个很大的值就成了胶囊形。outline画在边框外侧的线。它不占位置，所以键盘焦点框用它。outline-width只设那条线的粗细。outline-style只设那条线的线型。outline-color只设那条线的颜色。outline-offset那条线离边框有多远。box-shadow给盒子加投影。写 inset 就变成内阴影。
效果7
模糊、裁切、遮罩这类画完之后再加上去的效果。
变形与动效14
位移、旋转和平滑过渡。不动布局，所以画面不容易抖。
transform位移、旋转、缩放、倾斜。不触发重排，所以很快。transform-origin变形以哪个点为中心。transition值变化时让它平滑过渡而不是一下跳过去。transition-property只对哪些属性做过渡。transition-delay隔多久再开始过渡。transition-duration过渡持续多长时间。transition-timing-function过渡的快慢曲线。开头快结尾慢最自然。animation一行写完动画的名字、时长、次数这些。animation-name要播哪个 @keyframes。animation-timing-function动画在一轮之内的快慢曲线。animation-duration动画播一轮要多久。animation-iteration-count动画重复几次。infinite 就是一直播。will-change提前告诉浏览器哪里会变，好让它准备。滥用反而更慢。perspective3D 变形时，观察者离画面多远。值越小透视越夸张。
定位7
把元素从文档流里拎出来放到指定位置。前后顺序由 z-index 定。
表格4
管表格边框和列宽的一类属性。
列表4
决定列表标记的样子和位置。
交互9
决定怎么响应鼠标、手指和滚动。
打印与其他7
打印和自动编号这些剩下的用途。
怎么看这一页
- 会继承的属性，在父元素上写一次，所有子元素都跟着用。和文字有关的属性大多如此。
- 简写属性会把你没写到的值悄悄退回默认值。只写 background: red，先前设的背景图也一并没了。
- 同一个元素上规则撞车时，选择器越具体的赢。只有具体度一样时，才轮到写在后面的赢。
- 做动效尽量用 transform 和 opacity，会顺滑得多。改 width 或 top 得重新算一遍布局。
常见问题
Q. CSS 属性一共有多少个？
光是写进标准的就有五百多个，但真正常动手的只是其中一部分。这里按用途收了做页面时会反复用到的 154 个。
Q. 「继承」是什么意思？
意思是写在父元素上，子元素不用另写也照着用。字体、文字色、行高这些和文字有关的属性大多会继承；间距和边框则不会。
Q. 用简写属性有什么不一样？
一行能设好几个值，但没写到的那些会退回默认值。只写 background: red，先前设的背景图就跟着没了，原因就在这里。
Q. 同一个属性写了两遍，哪个赢？
先比选择器有多具体：id 强过 class，class 强过标签。具体度一样时，才轮到写在后面的赢。!important 能掀翻这套规则，但最好别用。
Q. px 和 rem 该用哪个？
rem 是根字号的倍数，用户在浏览器里把字调大，它会跟着变大。文字和间距用 rem 更稳妥；像细边框这种必须始终一样的值，px 更合适。