1、属性
（1）字体属性
- 官方文档：https://www.apiref.com/css-zh/properties/font/index.htm
1）font-style
| 属性用法 |
描述 |
| 取值 |
normal、italic、oblique |
| 语法格式 |
font-style:italic; |
2）font-weight
| 属性用法 |
描述 |
| 取值 |
normal、bold、bolder、lighter、100~900的整数 |
| 语法格式 |
font-weight:bold; |
3）font-size
| 属性用法 |
描述 |
| 取值 |
<absolute-size>、<relative-size>、<length>、<percentage> |
| 语法格式 |
font-size:20px 或者 font-size:2em（（em表示倍数，例如当前字体为12px，这是2em，字体将变成24px）） |
4）font-family
| 属性用法 |
描述 |
| 取值 |
字体 或 字体序列 |
| 语法格式 |
font-family:Microsoft Yahei; |
（2）边框属性
- 官方文档：https://www.apiref.com/css-zh/properties/backgrounds/index.htm
1）border
| 属性用法 |
描述 |
| 取值 |
border:{设置边框厚度} {设置边框样式} {设置边框颜色} |
| 语法格式 |
border:1px solid blue; |
2）border-width
| 属性用法 |
描述 |
| 取值 |
border-width:边框厚度 |
| 语法格式 |
border-width:2px; |
设置单边边框厚度
- border-top-width：设置顶部边框厚度
- border-right-width：设置右边框厚度
- border-bottom-width：设置底部边框厚度
- border-left-width：设置左边框厚度
3）border-style
| 属性用法 |
描述 |
| 取值 |
none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset |
| 语法格式 |
border-style:solid; |
4）border-color
| 属性用法 |
描述 |
| 取值 |
border-color:边框颜色 |
| 语法格式 |
border-color:blue; |
设置单边边框颜色
- border-top-color：设置顶部边框颜色
- border-right-color：设置右边框颜色
- border-bottom-color：设置底部边框颜色
- border-left-color：设置左边框颜色
（3）文本属性
- 官方文档：https://www.apiref.com/css-zh/properties/text/index.htm
1）text-align
| 属性用法 |
描述 |
| 取值 |
left、center、right |
| 语法格式 |
text-align:center; |
2）text-indent
| 属性用法 |
描述 |
| 取值 |
<length>、<percentage> |
| 语法格式 |
text-indent:2em; |
3）vertical-align
| 属性用法 |
描述 |
| 取值 |
baseline、sub、super、top、text-top、middle、bottom、text-bottom、<percentage>、<length> |
| 语法格式 |
vertical-align:middle; |
4）letter-spacing
| 属性用法 |
描述 |
| 取值 |
normal、<length> |
| 语法格式 |
letter-spacing:20px; |
5）text-transform
| 属性用法 |
描述 |
| 取值 |
none、capitalize、uppercase、lowercase、full-width |
| 语法格式 |
text-transform:capitalize; |
6）word-spacing
| 属性用法 |
描述 |
| 取值 |
normal、<length>、<percentage> |
| 语法格式 |
word-spacing:20px; |
7）line-height
| 属性用法 |
描述 |
| 取值 |
设置方法：normal、<length>、<percentage>、<number> |
| 语法格式 |
line-height:10px; |
（4）尺寸与补白
- 官方文档：https://www.apiref.com/css-zh/properties/dimension/index.htm
1）width
| 属性用法 |
描述 |
| 取值 |
<length>、<percentage>、auto |
| 语法格式 |
width:200px; |
2）height
| 属性用法 |
描述 |
| 取值 |
<length>、<percentage>、auto |
| 语法格式 |
height:200px; |
3）margin
| 属性用法 |
描述 |
| 取值 |
<length>、<percentage>、auto |
| 语法格式 |
margin:20px; |
单边设置外边距
- margin-top：设置顶部外边距
- margin-right：设置右边外边距
- margin-bottom：设置底部外边距
- margin-left：设置左边外边距
4）padding
| 属性用法 |
描述 |
| 取值 |
<length>、<percentage>、auto |
| 语法格式 |
padding:20px; |
单边设置内边距
- padding-top：设置顶部内边距
- padding-right：设置右边内边距
- padding-bottom：设置底部内边距
- padding-left：设置左边内边距
（5）布局属性
- 官方文档：https://www.apiref.com/css-zh/properties/layout/index.htm
1）display
- 设置或检索对象是否及如何显示
- 文档：https://www.apiref.com/css-zh/properties/layout/display.htm
| 属性用法 |
描述 |
| 取值 |
none、inline、block 、 list-item 、 inline-block 、 table 、 inline-table 、 table-caption 、 table-cell 、 table-row 、 table-row-group 、 table-column 、 table-column-group 、 table-footer-group 、 table-header-group 、 run-in 、 box 、 inline-box 、 flexbox 、 inline-flexbox 、 flex 、 inline-flex |
| 语法格式 |
display:block; |
2）float
- 定义了元素向左或者向右浮动放置
- 文档：https://www.apiref.com/css-zh/properties/layout/float.htm
| 属性用法 |
描述 |
| 取值 |
none、left、right |
| 语法格式 |
float:left; |
① 文档流
- 文档流：就是指文档的排列顺序；
- 标准文档流：浏览器中网页的各个元素默认排列的方式（从上到下，从左到右）；
- 脱离标准文档流：不按照默认的方式，进行排列；
② 浮动的影响
- 浮动元素，会脱离标准文档流, 后面元素会向上移动
- 父元素的高度发生了变化 ，因为浮动元素脱离标签文档流
- 浮动元素变成了行内块级元素（在一行显示，可以设置宽高）
③ 清除浮动影响的方式
- 父元素设置高度
- 父元素添加一个最小的块级子元素，给子元素设置 clear:both; 属性
- 父元素设置 overflow:hidden; 属性
- 父元素设置伪元素（after）
- 父元素一起浮动
④ overflow 清除浮动与clear:both 清除浮动的区别
- overflow 清除浮动：不会新增元素，易于使用，overflow对于绝对定位的元素不能清除浮动
- clear:both清除浮动：需要新增元素，性能较低，可以清除任何元素的浮动
3）clear
- 定义了一个元素是否可以放置在它之前的浮动元素旁边，或者必须向下移动在新行中放置
- 文档：https://www.apiref.com/css-zh/properties/layout/clear.htm
| 属性用法 |
描述 |
| 取值 |
none、left、right、both |
| 语法格式 |
clear:both; |
4）visibility
- 定义了元素是否可见
- 文档：https://www.apiref.com/css-zh/properties/layout/visibility.htm
| 属性用法 |
描述 |
| 取值 |
visible 、 hidden 、 collapse |
| 语法格式 |
visibility:hidden; |
5）overflow
- 定义了元素处理溢出内容的方式
- 文档：https://www.apiref.com/css-zh/properties/layout/overflow.htm
| 属性用法 |
描述 |
| 取值 |
visible 、 hidden 、 scroll 、 auto 、 clip |
| 语法格式 |
overflow:hidden; |
（6）定位属性
- 官方文档：https://www.apiref.com/css-zh/properties/positioning/index.htm
1）position
- 用于指定一个元素在文档中的定位方式
- 文档：https://www.apiref.com/css-zh/properties/positioning/position.htm
| 属性用法 |
描述 |
| 取值 |
static 、 relative 、 absolute 、 fixed 、 sticky |
| 语法格式 |
position:absolute; |
2）z-index
- 定义一个元素在文档中的层叠顺序
- 文档：https://www.apiref.com/css-zh/properties/positioning/z-index.htm
| 属性用法 |
描述 |
| 取值 |
auto、<integer> |
| 语法格式 |
z-index:1; |
3）top
- 定义了元素的上外边距边界与其包含块上边界之间的偏移
- 文档：https://www.apiref.com/css-zh/properties/positioning/top.htm
| 属性用法 |
描述 |
| 取值 |
auto、<length>、<percentage> |
| 语法格式 |
top:100px; |
4）right
- 定义了元素的右外边距边界与其包含块右边界之间的偏移
- 文档：https://www.apiref.com/css-zh/properties/positioning/right.htm
| 属性用法 |
描述 |
| 取值 |
auto、<length>、<percentage> |
| 语法格式 |
right:100px; |
5）bottom
- 定义了元素的底外边距边界与其包含块底边界之间的偏移
- 文档：https://www.apiref.com/css-zh/properties/positioning/bottom.htm
| 属性用法 |
描述 |
| 取值 |
auto、<length>、<percentage> |
| 语法格式 |
bottom:100px; |
6）left
- 定义了元素的左外边距边界与其包含块左边界之间的偏移
- 文档：https://www.apiref.com/css-zh/properties/positioning/left.htm
| 属性用法 |
描述 |
| 取值 |
auto、<length>、<percentage> |
| 语法格式 |
left:100px; |
7）clip
- 定义了元素的哪一部分是可见的。区域外的部分是透明的
- 文档：https://www.apiref.com/css-zh/properties/positioning/clip.htm
| 属性用法 |
描述 |
| 取值 |
auto、<shape> |
| 语法格式 |
clip: rect(auto 50px 20px auto) |
（7）颜色属性
- 官网文档：https://www.apiref.com/css-zh/index.htm
| 属性用法 |
描述 |
| 取值 |
英文单词、16进制代码、rgb、rgba 、transparent(透明) |
| 语法格式 |
color:#ffffff; |
注意
- rgb，全称Red Green Blue，r(红色)，g(绿色)，b(蓝色)
- rgba，全称Red Green Blue Alpha，它是在 RGB 上扩展包括了 “alpha” 通道，r(红色)，g(绿色)，b(蓝色)，a(透明度)
- 除了设置线条颜色外，还可以设置为透明（transparent）
（8）列表属性
- 官方文档：https://www.apiref.com/css-zh/properties/list/index.htm
1）list-style
| 属性用法 |
描述 |
| 取值 |
list-style:{项目符号样式} {项目符号排列方式} {设置图像项目符号} |
| 语法格式 |
list-style:disc outside none; |
（9）表格属性
- 官方文档：https://www.apiref.com/css-zh/properties/table/index.htm
1）border-collapse
| 属性用法 |
描述 |
| 取值 |
separate、collapse |
| 语法格式 |
border-collapse:collapse; |
2）border-spacing
- 设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距
| 属性用法 |
描述 |
| 取值 |
<length> |
| 语法格式 |
border=spacing:20px; |
（10）变换
- 官方文档：https://www.apiref.com/css-zh/properties/transform/index.htm
1）transform
| 属性用法 |
描述 |
| 取值 |
none、translate()、scale()、rotate()、skew() |
| 语法格式 |
transform:translate(100px,100px); |
注意
- 这里取值，只是列举了部分值，详细文档请参考官方文档
（11）过渡
1）transition
- 检索或设置对象变换时的过渡
- 官方文档：https://www.apiref.com/css-zh/properties/transition/index.htm
| 属性用法 |
描述 |
| 取值 |
transition:{过渡的属性} {过渡的持续时间} {过渡的动画类型} {延迟过渡的时间} |
| 语法格式 |
transition:all .5s linear .5s |
（12）动画
- 官方文档：https://www.apiref.com/css-zh/properties/animation/index.htm
1）animation
| 属性用法 |
描述 |
| 定义动画 |
方法1：@keyframes 动画名{from{动画效果} to{动画效果}}；方法2：@keyframes 动画名{0%{动画效果} 50%{动画效果} 100%{动画效果}} |
| 取值 |
animation: {动画名称} {持续时间} {过渡类型} {延迟时间} {次数} {是否停在终点} {往返} |
| 语法格式 |
animation 动画名 1s linear 1s 3 forwards alternate |
2、盒子模型
- 盒子模型是CSS非常重要的思维模型
- 把每一个标签当成一个矩形盒子
- 布局就是通过不同大小的盒子按照不同的排列方式组合而成
- 盒子与盒子之间可以相互影响
（1）盒子模型类型
- 标准盒子模型
- 怪异盒子模型
-
注意：只要完整定义DOCTYPE都会触发标准模式，如果DOCTYPE缺失则在ie6/ie7/ie8下将会触发怪异模式
1）标准盒子模型
① 标准盒子模型组成
- width：设置的宽度
- height：设置的高度
- padding：内填充
- border：边框
- margin：外边距(透明的)
② 标准盒子模型计算方式：
- 宽度：width + padding * 2 + border * 2 + margin * 2
- 高度：height + padding * 2 + border * 2 + margin * 2
2）怪异盒子模型组成
① 怪异盒子模型组成
- width：设置的宽度
- height：设置的高度
- margin：外边距
② 怪异盒子模型计算方式：
- 宽度：width(包含padding * 2 + border * 2) + margin * 2
- 高度：height(包含padding * 2 + border * 2) + margin *2
更多CSS属性学习，请参考官网文档
https://www.apiref.com/css-zh/index.htm
