1. 设置宽度 width: 100px;
2. 设置高度 height: 100px;
3. 设置外边距 上下左右均有100px的外边距（盒子与盒子之间的距离）margin: 100px;
3.1 设置上外边距 margin-top: 100px;
3.2 设置下外边距 margin-bottom: 100px;
3.3 设置左外边距 margin-left: 100px;
3.4 设置右外边距 margin-right: 100px;
3.5 有宽度的块级元素(占一整行的元素)水平 横向 居中
margin: 0 auto;
margin: auto;
如果只写两个值
margin: 上下外边距 左右外边距
3.6 垂直方向上相邻的两个元素外边距会发生合并现象：
上面盒子设置margin-bottom: 100px;
下面盒子设置margin-top: 200px;
则会取较大的值，最终垂直方向上相邻的两个元素之间有200px的距离，不会发生叠加。
3.7 垂直方向上嵌套的两个元素外边距会发生塌陷现象：
外面大盒子包裹里面小盒子，
里面小盒子设置margin-top: 100px;
则大盒子会和小盒子一起距离顶部100px距离，发生塌陷现象。
解决办法: 给大盒子设置overflow: hidden;(推荐)
或者
给大盒子设置1px的透明边框
或者
给大盒子设置1px的padding
4. 设置内边距（盒子边框与内容之间的距离）上下左右均有100px的内边距 padding: 100px;
4.1 设置上内边距 padding-top: 100px;
4.2 设置下内边距 padding-bottom: 100px;
4.3 设置左内边距 padding-left: 100px;
4.4 设置右内边距 padding-right: 100px;
padding: 上下内边距 左右内边距
5. 取消ul li 列表的小圆点 list-style: none;
6. 取消下划线 text-decoration: none;
6.1 添加下划线 text-decoration: underline;
7. 搜索文档中的内容 ctrl+f
8. 设置背景颜色 background-color: #000;
8.1 background-color: rgb(0,0,0);
8.2 设置背景颜色透明：background-color: rgba(0,0,0,.3);
8.3 透明度中a的取值范围是从0(完全透明) - 1(完全不透明)
9. 元素向左浮动 float: left
10. 元素向右浮动 float: right
10.1 清除浮动：子元素浮动了，脱离标准流不占位置 父元素没有设置高度的情况下
无法被子元素撑开，高度会变成0，所以需要清除浮动带来的影响
隔墙法：给最后一个浮动的元素后添加一个块级元素 同时添加clear: both;
给浮动的父元素添加overflow: hidden;
伪元素清除浮动
.clearfix::after{
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
11. 设置边框
border: 边框的粗细 线形状 颜色
border: 1px solid #000
设置上边框 border-top: 1px solid #000
设置下边框 border-bottom: 1px solid #000
设置左边框 border-left: 1px solid #000
设置右边框 border-right: 1px solid #000
设置透明颜色边框
border: 1px solid transparent;
12. 单行文字垂直居中： line-height: 高度值
13. 去掉边框 border: 0;
去掉外轮廓线 outline: 0;
14. 设置文字颜色 color: #000;
15. 设置行高 line-height: 20px;
16. 文字水平居中 text-align: center;
17. 设置css3的盒子模型： box-sizing: border-box;
18. 设置版心 .w{width: 1200px; margin: 0 auto;}
19. 设置文字大小 font-size: 14px;
20. 设置文字粗细 font-weight: 700; 加粗
21. 设置文字变细 font-weight: 400; 变细
22. 设置字体 font-family: '微软雅黑';
23. 设置斜体文字正常显示 font-style: normal;
设置文字倾斜显示 font-style: italic;
24. 设置相对定位 position: relative; 相对于自身移动 占位置
25. 设置绝对定位 position: absolute; 相对于最近一层有定位的父辈元素 不占位置
26. 设置固定定位 position: fixed; 相对于浏览器可视窗口移动 不占位置
27. 设置定位的方位值：top: 1px; 远离上面1px
bottom: 1px 远离下面1px
left: 1px 远离左面1px
right: 1px 远离右面1px
28. 溢出隐藏： overflow: hidden;
29. 标签/元素隐藏不占位置 display: none;
30. 让标签/元素隐藏的元素显示出来 display: block;
31. 标签/元素隐藏占位置 visibility: hidden;
32. 标签/元素隐藏占位置 visibility: visible;
33. 文本首行缩进 text-indent: 2em;
34. 透明颜色 transparent
35. 设置背景 属性连写 background: 背景颜色 背景路径 是否平铺 水平偏移值 垂直偏移值；
例如 background: pink url('../images/sprites.png') no-repeat -10px -20px;
注意精灵图移动背景位置 都是负值或0 不可能为正值
除此之外水平偏移值和垂直偏移值还可以用方位坐标值来显示
top 靠顶显示背景图片 bottom 靠底显示背景图片 left 靠左显示背景图片 right 靠右显示背景图片
**！！！一定注意给背景图片的盒子一定要有宽高值！！！没有宽高和内容的盒子是无法显示背景图片的！！！**
36. ul li:nth-child(1){} 选中ul下的第一个li
ul li:first-child{} 选中ul下的第一个li
ul li:last-child{} 选中ul下的最后一个li
ul li:nth-child(2n){} 选中ul下偶数个li 比如第2个 第4个 第6个 li
ul li:nth-child(even){} 选中ul下偶数个li 比如第2个 第4个 第6个 li
ul li:nth-child(2n+1){} 选中ul下奇数个li 比如第1个 第3个 第5个 li
ul li:nth-child(odd){} 选中ul下奇数个li 比如第1个 第3个 第5个 li
ul li:nth-child(n+3){} 选中ul下从第3个开始到最后的li 包括第三个
ul li:nth-child(-n+3){} 选中ul下从开始到第三个的li 包括第三个
37. 行内块元素和行内元素的垂直居中对齐 vertical-align: middle; 同时可以解决img底部3px的问题
38. 设置边框圆角 border-radius: 10px;
39. 创建一个圆形 border-radius: 50%;
40. 创建一个胶囊形状 border-radius: 高度的一半
50. 文字属性连写 font: italic 700 16px/30px "Microsoft Yahei"
font: 字体斜体 粗细 大小/行高 字体家族
其中 字体大小和 字体家族是必写属性，顺序不能够调换位置
51. 子绝父相 子元素绝对定位 父元素相对定位
52. 绝对定位、固定定位、浮动不占位置，脱离标准流
脱离标准流的元素默认宽度高度由内容撑开
默认转换为块级元素
margin: 0 auto;无法使其居中
不会发生外边距塌陷的问题
相对定位占位置
浮动永远不会压住文字
53. 权重 ： 继承 * 通配符选择器 0 < 标签选择器、伪元素选择器 1 < 类选择器、伪类选择器、属性选择器、结构伪类选择器 10 < ID选择器 100 < 行内样式 < 1000 < !important 正无穷
54. 浮动 一般li包裹着a都是让li左浮动 float: left;
右浮动: float: right;
浮动的元素不占位置。无法撑开父元素高度，所以要清除浮动：本质是闭合浮动
常见的清除浮动的方式有4种：
1. 隔墙法：在浮动的元素后面插入一个块级元素，同时设置clear: both;
2. 溢出隐藏法：在浮动元素所在的父元素设置overflow: hidden; 触发BFC 实现清除浮动
3. 单伪元素清除浮动
.clearfix:after{
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
/*兼容IE的写法*/
.clearfix{
*zoom:1;
}
4. 双伪元素清除浮动
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
/*兼容IE的写法*/
.clearfix{
*zoom:1;
}
55. 元素的显示与隐藏
1. display: block; display: none; 元素显示隐藏不占位置
2. visibility: visible; visibility: hidden; 元素显示隐藏占位置
3. overflow: hidden; 元素溢出隐藏 可解决清除浮动和外边距塌陷问题 原理是触发了BFC
4. overflow: auto; 根据内容自动添加滚动条
5. overflow: scroll; 添加滚动条
6. opacity: 0; 完全透明占位置 opacity: 1; 完全不透明
56. 过渡：
transition: 过渡的属性 过渡时间(带单位) 速度曲线 过渡延迟时间
transition: width 2s linear 1s; 让宽度 延迟1s后 以linear线性的方式 持续2s的时间过渡
通常写法
transition: 2s;