- 设置宽度 width: 100px;\
- 设置高度 height: 100px;\
- 设置外边距 上下左右均有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\ - 设置内边距（盒子边框与内容之间的距离）上下左右均有100px的内边距 padding: 100px;
4.1 设置上内边距 padding-top: 100px;
4.2 设置下内边距 padding-bottom: 100px;
4.3 设置左内边距 padding-left: 100px;
4.4 设置右内边距 padding-right: 100px;
padding: 上下内边距 左右内边距\ - 取消ul li 列表的小圆点 list-style: none;\
- 取消下划线 text-decoration: none;
6.1 添加下划线 text-decoration: underline;\ - 搜索文档中的内容 ctrl+f\
- 设置背景颜色 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(完全不透明)\ - 元素向左浮动 float: left\
- 元素向右浮动 float: right
10.1 清除浮动：子元素浮动了，脱离标准流不占位置 父元素没有设置高度的情况下
无法被子元素撑开，高度会变成0，所以需要清除浮动带来的影响
隔墙法：给最后一个浮动的元素后添加一个块级元素 同时添加clear: both;
给浮动的父元素添加overflow: hidden;
伪元素清除浮动
.clearfix::after{
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}\ - 设置边框
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;\ - 单行文字垂直居中： line-height: 高度值\
- 去掉边框 border: 0;
去掉外轮廓线 outline: 0;\ - 设置文字颜色 color: #000;\
- 设置行高 line-height: 20px;\
- 文字水平居中 text-align: center;\
- 设置css3的盒子模型： box-sizing: border-box;\
- 设置版心 .w{width: 1200px; margin: 0 auto;}\
- 设置文字大小 font-size: 14px;\
- 设置文字粗细 font-weight: 700; 加粗\
- 设置文字变细 font-weight: 400; 变细\
- 设置字体 font-family: '微软雅黑';\
- 设置斜体文字正常显示 font-style: normal;
设置文字倾斜显示 font-style: italic;\ - 设置相对定位 position: relative; 相对于自身移动 占位置\
- 设置绝对定位 position: absolute; 相对于最近一层有定位的父辈元素 不占位置\
- 设置固定定位 position: fixed; 相对于浏览器可视窗口移动 不占位置\
- 设置定位的方位值：top: 1px; 远离上面1px
bottom: 1px 远离下面1px
left: 1px 远离左面1px
right: 1px 远离右面1px\ - 溢出隐藏： overflow: hidden;\
- 标签/元素隐藏不占位置 display: none;\
- 让标签/元素隐藏的元素显示出来 display: block;\
- 标签/元素隐藏占位置 visibility: hidden;\
- 标签/元素隐藏占位置 visibility: visible;\
- 文本首行缩进 text-indent: 2em;\
- 透明颜色 transparent\
- 设置背景 属性连写 background: 背景颜色 背景路径 是否平铺 水平偏移值 垂直偏移值；
例如 background: pink url('../images/sprites.png') no-repeat -10px -20px;
注意精灵图移动背景位置 都是负值或0 不可能为正值
除此之外水平偏移值和垂直偏移值还可以用方位坐标值来显示
top 靠顶显示背景图片 bottom 靠底显示背景图片 left 靠左显示背景图片 right 靠右显示背景图片
！！！一定注意给背景图片的盒子一定要有宽高值！！！没有宽高和内容的盒子是无法显示背景图片的！！！\ - 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 包括第三个\ - 行内块元素和行内元素的垂直居中对齐 vertical-align: middle; 同时可以解决img底部3px的问题\
- 设置边框圆角 border-radius: 10px;\
- 创建一个圆形 border-radius: 50%;\
- 创建一个胶囊形状 border-radius: 高度的一半\
- 文字属性连写 font: italic 700 16px/30px "Microsoft Yahei"
font: 字体斜体 粗细 大小/行高 字体家族
其中 字体大小和 字体家族是必写属性，顺序不能够调换位置\ - 子绝父相 子元素绝对定位 父元素相对定位\
- 绝对定位、固定定位、浮动不占位置，脱离标准流
脱离标准流的元素默认宽度高度由内容撑开
默认转换为块级元素
margin: 0 auto;无法使其居中
不会发生外边距塌陷的问题
相对定位占位置
浮动永远不会压住文字\ - 权重 ： 继承 * 通配符选择器 0 < 标签选择器、伪元素选择器 1 < 类选择器、伪类选择器、属性选择器、结构伪类选择器 10 < ID选择器 100 < 行内样式 < 1000 < !important 正无穷\
- 浮动 一般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: all 2s;
-
背景尺寸 背景大小
background-size: 背景宽 背景高;
background-size: 100px 200px; 代表设置背景宽度为100px 高度为200px -
设置版心
.w {
width: 1200px;
margin: 0 auto;
}\ -
css3 新增盒子模型 box-sizing: border-box;
-
文字阴影 text-shadow: 0 0 0 #000; 分别代表水平偏移 垂直偏移 阴影模糊程度 颜色;
-
盒子阴影 box-shadow: 0 0 0 #000; 同上
-
鼠标悬停 .box:hover { }
