一、 布局
1. display
设置或检索对象是否及如何显示。
如果 display 设置为 none，float 及 position 属性定义将不生效；
| 取值 | 描述 | 版本 |
|---|---|---|
| none： | 隐藏对象。与 visibility 属性的 hidden 值不同，其不为被隐藏的对象保留其物理空间 | |
| inline： | 指定对象为内联元素。(默认值) | |
| block： | 指定对象为块元素。 | |
| list-item： | 指定对象为列表项目。 | |
| inline-block： | 指定对象为内联块元素。 | （CSS2） |
| table： | 指定对象作为块元素级的表格。类同于 html 标签<table>
|
（CSS2） |
| inline-table： | 指定对象作为内联元素级的表格。类同于 html 标签<table>
|
（CSS2） |
| table-caption： | 指定对象作为表格标题。类同于 html 标签<caption>
|
（CSS2） |
| table-cell： | 指定对象作为表格单元格。类同于 html 标签<td>
|
（CSS2） |
| table-row： | 指定对象作为表格行。类同于 html 标签<tr>
|
（CSS2） |
| table-row-group： | 指定对象作为表格行组。类同于 html 标签<tbody>
|
（CSS2） |
| table-column： | 指定对象作为表格列。类同于 html 标签<col>
|
（CSS2） |
| table-column-group： | 指定对象作为表格列组显示。类同于 html 标签<colgroup>
|
（CSS2） |
| table-header-group： | 指定对象作为表格标题组。类同于 html 标签<thead>
|
（CSS2） |
| table-footer-group： | 指定对象作为表格脚注组。类同于 html 标签<tfoot>
|
（CSS2） |
| run-in： | 根据上下文决定对象是内联对象还是块级对象。 | （CSS3） |
| box： | 将对象作为弹性伸缩盒显示。（伸缩盒最老版本） | （CSS3） |
| inline-box： | 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本） | （CSS3） |
| flexbox： | 将对象作为弹性伸缩盒显示。（伸缩盒过渡版本） | （CSS3） |
| inline-flexbox： | 将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本） | （CSS3） |
| flex： | 将对象作为弹性伸缩盒显示。（伸缩盒最新版本） | （CSS3） |
| inline-flex： | 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本） | （CSS3） |
2. float
定义了元素向左或者向右浮动放置。
| 取值 | 描述 |
|---|---|
| none： | 设置元素不浮动 (默认值) |
| left： | 设置元素浮在左边 |
| right： | 设置元素浮在右边 |
3. clear
定义了一个元素是否可以放置在它之前的浮动元素旁边，或者必须向下移动在新行中放置。
| 取值 | 描述 |
|---|---|
| none： | 允许两边都可以有浮动对象 (默认值) |
| both： | 不允许有浮动对象 |
| left： | 不允许左边有浮动对象 |
| right： | 不允许右边有浮动对象 |
4. visibility
定义了元素是否可见。
| 取值 | 描述 |
|---|---|
| visible： | 设置对象可视 (默认值) |
| hidden： | 设置对象隐藏 |
| collapse： | 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于 hidden。 |
5. visibility
| 取值 | 描述 |
|---|---|
| visible： | 对溢出内容不做处理，内容可能会超出容器。 |
| hidden： | 隐藏溢出容器的内容且不出现滚动条。 |
| scroll： | 隐藏溢出容器的内容，溢出的内容可以通过滚动呈现。 |
| auto： | 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。textarea 元素的 overflow 默认值就是auto。 |
| clip： | 与hidden一样，clip 也被用来隐藏溢出容器的内容且不出现滚动条。不同的地方在于，clip 是一个完全禁止滚动的容器，而 hidden 仍然可以通过编程机制让内容可以滚动。 |
二、 文本
| 属性 | 版本 | 继承性 | 描述 | |
|---|---|---|---|---|
| text-transform | CSS1/3 | 有 | 定义元素的文本如何转换大小写 (none | capitalize | uppercase | lowercase | full-width) |
|
| white-space | CSS1 | 有 | 指定元素是否保留文本间的空格、换行；指定文本超过边界时是否换行。(normal | pre | nowrap | pre-wrap | pre-line) |
|
| tab-size | CSS3 | 有 | 定义元素内容中制表符的长度 (<number> | <length>) |
|
| word-break | CSS3 | 有 | 定义元素内容文本的字间与字符间的换行行为 (normal | keep-all | break-all | break-word) |
|
| word-wrap /overflow-wrap | CSS3 | 有 | 定义元素内容文本遇到边界时如何换行 (normal | break-word | break-spaces) |
|
| text-align | CSS1/3 | 有 | 定义元素内容的水平对齐方式 (`left | right | center |start | end | justify | match-parent | justify-all`) |
| text-align-last | CSS3 | 有 | 定义块内文本内容的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）或者被强制打断的行的对齐方式 | |
| text-justify | CSS3 | 有 | 定义使用什么方式实现文本内容两端对齐 | |
| word-spacing | CSS1/3 | 有 | 指定单词之间的额外间隙 | |
| letter-spacing | CSS1/3 | 有 | 指定字符之间的额外间隙 | |
| text-indent | CSS1/3 | 有 | 定义块内文本内容的缩进 | |
| vertical-align | CSS1/2 | 无 | 定义行内元素在行框内的垂直对齐方式 (baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>) |
|
| line-height | CSS1 | 有 | 定义元素中行框的最小高度 | |
| text-size-adjust | CSS3 | 有 | 定义移动端页面中元素文本的大小如何调整 |
三、 字体
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| font | CSS1/2 | 有 | 简写属性。定义元素的文本特性 |
| font-style | CSS1 | 有 | 指定元素的文本是否为斜体 |
| font-variant | CSS1 | 有 | 定义元素的文本是否为小型的大写字母 |
| font-weight | CSS1 | 有 | 定义元素文本字体的粗细 |
| font-size | CSS1 | 有 | 定义元素的字体大小 |
| font-family | CSS1 | 有 | 定义元素文本的字体名称序列 |
| font-stretch | CSS3 | 有 | 定义元素的文字是否横向拉伸变形 |
| font-size-adjust | CSS3 | 有 | 定义小写字母 x 的高度与对象文字字号的比率。 |
四、 尺寸与补白
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| width | CSS1 | 无 | 定义了元素内容区（Content Area）的宽度 |
| min-width | CSS2 | 无 | 定义了元素内容区（Content Area）的最小宽度 |
| max-width | CSS2 | 无 | 定义了元素内容区（Content Area）的最大宽度 |
| height | CSS1 | 无 | 定义了元素内容区（Content Area）的高度 |
| min-height | CSS2 | 无 | 定义了元素内容区（Content Area）的最小高度 |
| max-height | CSS2 | 无 | 定义了元素内容区（Content Area）的最大高度 |
| margin | CSS1 | 无 | 为元素设置所有四个方向（上右下左）的外边距 |
| padding | CSS1 | 无 | 为元素设置所有四个方向（上右下左）的内边距，即内容和元素边界之间的空间 |
计量单位
| 单位 | 描述 |
|---|---|
| px | (最终呈现) |
| em | (相对父元素) |
| rem | (相对根元素) |
| % | (相对父元素) |
| vw | (1vw=1% vieport width) |
| vh | (1vh=1% vieport height) |
五、 背景与边框
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| border | CSS1 | 无 | 简写属性。定义元素边框的外观特性。参阅 outline 属性 |
| border-width | CSS1 | 无 | 简写属性。定义元素的边框厚度 |
| border-style | CSS1 | 无 | 简写属性。定义元素的边框样式 |
| border-color | CSS1 | 无 | 简写属性。定义元素的边框颜色 |
| box-shadow | CSS3 | 无 | 定义元素的阴影 |
| border-radius | CSS3 | 无 | 简写属性。定义元素的圆角 |
| border-image | CSS3 | 无 | 简写属性。定义将图像应用到元素的边框上 |
| border-image-source | CSS3 | 无 | 定义元素边框样式所使用的图像。 |
| border-image-slice | CSS3 | 无 | 用以指定从哪 4 个位置分割图像（遵循上右下左的顺序） |
| border-image-width | CSS3 | 无 | 定义元素边框图像的厚度 |
| border-image-outset | CSS3 | 无 | 定义边框图像从边框边界向外偏移的距离 |
| border-image-repeat | CSS3 | 无 | 定义分割图像怎样填充边框图像区域 |
| background | CSS1/3 | 无 | 简写属性。定义元素的背景特性 |
| background-color | CSS1 | 无 | 定义元素使用的背景颜色 |
| background-image | CSS1/3 | 无 | 定义元素使用的背景图像 |
| background-repeat | CSS1/3 | 无 | 定义元素的背景图像如何填充 |
| background-attachment | CSS1/3 | 无 | 定义滚动时背景图像相对于谁固定 |
| background-position | CSS1/3 | 无 | 指定背景图像在元素中出现的位置 |
| background-origin | CSS3 | 无 | 指定的背景图像计算 background-position 时的参考原点(位置) |
| background-clip | CSS3 | 无 | 指定对象的背景图像向外裁剪的区域 |
| background-size | CSS3 | 无 | 定义背景图像的尺寸大小 |
六、 定位
| 属性 | 版本 | 继承性 | 描述 |
|---|---|---|---|
| position | CSS2/3 | 无 | 用于指定一个元素在文档中的定位方式 |
| z-index | CSS2 | 无 | 定义一个元素在文档中的层叠顺序 |
| top | CSS2 | 无 | 定义了元素的上外边距边界与其包含块上边界之间的偏移 |
| right | CSS2 | 无 | 定义了元素的右外边距边界与其包含块右边界之间的偏移 |
| bottom | CSS2 | 无 | 定义了元素的底外边距边界与其包含块底边界之间的偏移 |
| left | CSS2 | 无 | 定义了元素的左外边距边界与其包含块左边界之间的偏移 |
| clip | CSS2/3 | 无 | 定义了元素的哪一部分是可见的。区域外的部分是透明的 |
