1，添加背景图片时，背景图片无法完全显现（只显示图片的局部）
利用background-size解决；
background: url(gray-tunnel-207153.jpg) no-repeat ; background-size: 100% 100%;//可使图片完全显现
no-repeat设置图片形式不重叠，当图片宽度不大时，若不设置no-repeat有可能相当于两张相同图片并列显示。
2.插入背景图片，图片随所在块的文本宽度改变而改变
为此块定义指定的 width height;
.header{ 360px; height:300px; background: url(mm.jpg); background-size: 100% 100%; margin-top: 100px; }
3去除链接的下划线
text-deceration:none;
4.将图片设置成圆形
设置border-radius的百分比。要得到圆形，需图片为正方形，若图片为长方形得到的会使之变成椭圆。
5.利用@media实现pc端和手机端两套视口的变化
写两套css，一套针对手机端，另一套针对pc端，用media进行选择·。
@media only screen and (max-768px){} @media only screen and (min-768px){} //
针对这次题而言用了screen,实际上不同设备所需用的不同，但常用且不存在兼容问题的是all和screen,media有很多的功能，详情参见https://www.cnblogs.com/lguow/p/9316598.html。
6.overflow规定当内容溢出元素框时发生的事情。
| 值 | 说明 |
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
7.css选择器
[class*="col-"]选择所有类名中含有“col-”的元素
[class^="col-"]选择类名中所有以col-开头的元素
[class$="-col"]选择所有类名中以-col结尾的元素
8.选择器的权重
（所谓优先级，就是指css样式在浏览器中被解析的先后顺序。而优先级就是分配给指定的css声明的一个权重，当很多规则被应用到一个元素上时，权重决定哪种规则先生效）
css优先级的规则：
css选择规则的权值不同时，权值高的优先
css选择规则的权值相同时，后定义的规则有限
css属性后面加!important时，无条件绝对优先
标签选择器的权重为0001
class选择器，属性选择器，伪类选择器，伪元素选择器的权重为0010
id选择器的权重为0100
包含选择器的权重：所包含选择器的权重之和
子选择器的权重：所包含选择器的权重之和
交集选择器权重为选择器之和
继承样式的权重为0000
行内样式的权重为1000
8，文字垂直居中
有容器时，令文字的line-height与容器的height值相等即可
9.使用栅格系统时，如果希望列与列之间有空隙，不能用margin，可以通过设置小列的padding值来实现
10.用插入图片img的title属性：设置鼠标停留在图片上时显示的内容
11对元素前面的图标进行设置
以修改文字前面的图标为例
p::before{
vertical-align:middle;//设置图标居中
margin-right: ;//设置图标与右边元素的距离
}
12.图片旋转
使图片旋转用到的是transform中的rotate. rotate(参数)单位为deg，表示角度，正数表示顺时针转动，负数表示逆时针转动。
transform
scale(参数)，没有单位，参数输入0-1之间的数字，表示缩放比例（缩放）
skew（参数1，参数2），单位deg,两个参数分别表示x,y方向上的倾斜角度，正数顺时针，负数逆时针。（倾斜）
13.实现颜色由中间向两边渐变
<input type="checkbox" checked="checked">
15:通用选择器
①类选择器
常用class指明，使用时前面加“.”
②后代选择器
空格相隔
选择器1 选择器2
作用于选择器1包含的全部选择器2
③子代选择器
选择器1>选择器2
作用于选择器1的子代选择器二。
④相邻兄弟选择器
选择器1＋选择器2
仅作用于紧挨1的2，且1，2有相同的父选择器。
⑤通用兄弟选择器
选择器1~选择器2
有兄弟的层次关系即可
16.textarea用来做留言框
17.<table cellspacing="0">
设置表格单元格间距为0
18.<div></div>会占一行 <span></span>不会，如果要对一行字母分别设置不同的样式，可以用<span></span>这样这些字母还可以在同一行
19. 去除ul li前面的点：list-style:none;
第二周页面布局作业：咖啡屋布局
问题：设置右侧浮动时产生以下情况
这个产生的原因是左边是用div的块元素，会占满一行，所以右边的浮动只能在自己的行里浮动
解决办法：将左边设置为行内块元素，或者左边也设置浮动
问题：将左边右边装在一个共同的盒子<div class="main"><div>里面，对.main背景颜色设置为高度小的那一块的颜色，结果左右两边并没有等高
原因：因为左右两边都设置了浮动，而浮动是不占据空间的，所以.main的盒子是技术上并没有包含进去左边和右边，对main盒子设置边框就可以看到边框上下并为了一条线在上方。
解决办法：overflow:hidden;
清除浮动
浮动对页面的影响：
如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。
float: left;float: right;
清除浮动：clear:both;
使用额外标签法：
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响。
内部标签：在浮动盒子的下边加一个空盒子。
会将这个浮动盒子的父盒子高度重新撑开
外部标签：在浮动盒子的父级的下边加一个空盒子。
会将这个浮动盒子的影响清除，但是不会撑开父盒子。
注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签。
使用overflow属性来清除浮动：
先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响。
注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（
使用伪元素来清除浮动：
.clearfix:after {
content: "";//添加内容为空
height: 0;//内容高度为0
line-height: 0;//内容文本的高度为0
display: block;//将文本设置为块级元素
clear: both;//清除浮动
visibility: hidden;//将元素隐藏
}
.clearfix {
zoom: 1;/为了兼容ie6/
}
然后在要清除浮动的父盒子的类里添加clearfix
使用双伪元素清除浮动：
伪元素：在页面上不存在的元素，但是可以通过css来添加上去。
种类：
:after（在。。。之后）
:before（在。。。之前）
注意：每个元素都有自己的伪元素。
overflow规定当元素溢出元素框时发生的事情