css中link与@import的区别
?type="text>?rel="stylesheet">
（1）link属于HTML标签，而@import是css提供的；
（2）页面被加载的时候，link会同时被加载，而@import引用的css会等到页面被加载完成后在加载；
（3）@import只有在IE5以上才识别，而link是HTML标签，无兼容性问题；
（4）Link方式的样式权重高于@import的权重：在link标签引入的css文件中，使用@import时需注意，如果已经存在相同样式，@import引入的这个样式将会被link引入的这个样式覆盖。
背景图居中的方法：
background-position：center center（一个x轴，一个y轴）
背景属性合写：background: #00FF00 url() no-repeat fixed//background-attachment附着属性 top;
字体合写：font:italic bold 12px/20px arial,sans-serif;
可以按照下面顺序来写
1)font-style
2)font-variant //字体异体
3)font-weight
4)font-size/line-height
5)font-family //字体系列
阴影：box-shadow：x轴偏移 y轴偏移 模糊值 外延值 颜色 内阴影
浮动的特性：
（1）脱离文档流
（2）父盒子塌陷
（3）影响后面的正常元素
（4）在允许的空间并排呈现，如果空间不够，会自动换行
（5）内联元素浮动后可以设置宽高
解决浮动的影响：
为父元素设置宽高
清除浮动：clear：both 伪类:
.clearfix::after {
content: "";
width: 0;
height: 0;
display: block;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
双伪类：
.clearfix::after,
.clearfix::before {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
为父元素加上overflow：hidden（不推荐）
marginBug：
当父元素内有一个子元素，在控制子元素与父元素的margin-top时，
父元素会跟随子元素一起向下挪动。
解决办法：
为父元素设置border
为父元素设置overflow:hidden
父元素和子元素之间添加 （不推荐）
解决图片与图片之间的间距：（如图所示：）
如果只是解决竖向的间距：img{vertical-align:top}或者给img父级加上line-height：0
如果是四周：
代码靠在一起编写（解决左右）然后调margin解决
通过浮动或者flex布局解决
给父级元素添加font-size：0
定位：
当我们使用定位属性position之后，就会激活left，right，top，bottom，z-index属性
1.绝对定位（position：absolute）
脱离文档流
原点计算：最近一个有定位的父级元素为原点参考，如果没有就以（0，0）为原点参考
块级元素的宽度变成本身的宽度，不占据一整行（内联块级）。
2.相对定位（position：relative）
不脱离文档流
根据自身在文档流中的位置作为原点计算
3.固定定位（position：fixed）
脱离文档流
固定定位的元素原点只依照（0，0）
定位的默认值为（position：static）//没有定位（静态定位）
z-index：-1~9999
隐藏元素：
溢出隐藏：overflow：hidden
隐藏：display：none 出现：display：block
（让出空间，不占据文档流，影响过渡效果）
隐藏：visibility：hidden一般与opacity一起使用 出现：visibility：visible
（视觉上的隐藏，占据空间，不影响过渡效果）
注：透明度设置：
opacity：设置属性，整个元素包含内容都会变透明
rgba（）：对属性值进行透明度的设置，只改变某个属性
选择器内容：
子元素选择器：选中的是直接子元素，不能选中隔代的后代子元素 ：父元素>子元素
结构性伪类选择器：
1.nth-child(n):以每一个父类为单位：
必须是指定元素
必须是该父类下的第N个元素， 会考虑所有元素的排位
2.nth-of-type（n）：以每一个父类为单位
必须是指定元素
是该父类下指定的第n个元素。 只考虑同类型元素的排位，不考虑别的元素。
目标性伪类选择器：
input[type=’checkbox’]:checked
三种移入效果
1.自己改变自己
div:hover
2.改变子元素
div:hover p(子元素){}
3.改变相邻的弟弟元素
div:hover+footer(弟弟元素){}
将HTML代码整合的标签
使用方法形如：渐变
background-image：linear-gradient（）
使用方法形如：
background-image：linear-gradient（to bottom right, red, #000）
background-image:linear-gradient（red 10%,green 85%,blue 90%）
red是前面，中间的green的意思是过渡，blue是后面
另注意：
background-size：（cover contain）
background-origin原点：（content-box，padding-box，border-box）