##css（Cascading Style Sheet）
1.样式引入
行内样式：优点--效率高； 缺点--html与css代码耦合，复用性低
内部样式表：优点--解决css和html代码耦合； 缺点--复用性低
外部样式表：优点--代码重用性高，结构性好； 缺点--执行效率低
link先加载css；在head标签里
@import先加载html，必须放在style标签的第一行，可以用来合并外部样式文件
2.选择器 参考网址
选择器优先级：行内1000，id100，class10，标签1。没有进制。！import不参与比较优先级最高
1 *（通配符选择器）
2 .（class选择器）
3 # （id选择器）
4 ，（并集选择器）
5 ~（兄弟选择器） 例：p~ul --所有前面有p的ul
6 后代选择器
空格 （后代选择器）
> (子选择器) 例：div>p --父元素是div的p
+ （直接子元素） 例：div+p --所有紧跟在div后面的p
7 属性选择器
[] (属性选择器) 例：[target] --带有target属性的所有元素
[a=b]（有a属性，且a属性的值等于b） 例：[class='btn']
[a~=b](a属性包含b单词) 例：[class~='title']
[a|=em](a属性以em字母开头的) 例：[id|=u]
（与上面区别在于[]前面多了元素名）
div[a^=b](a属性以b字母开头的div元素) 例： div[class ^='my']]
div[class$='se'](所有class属性以se字母结尾的div元素)
div[class*='se'](所有class属性包含se字母的div元素)
8 伪类选择器
：root --选择根元素
::selection --选择被用户选中的元素部分
：not（）【选择非该元素的元素】 例 p:not()
:empty 例 p：empty --选择没有子元素的p元素
:target 例 #news：target --选择当前活动的#news元素【【【不懂】】】
:enable 例 input：enabled --选择所有启用的input元素
:disabld 例 参考上一条
:checked 例 同上
:before 例 p:before --在p元素内容的前面插入内容
：after 例 p:after --在p元素内容的后面插入内容
：link 例 a:link --所有未被访问的a 的样式
：visited例 a:visited --所有访问之后的a的样式
：hover 例 a:hover --鼠标滑入a的样式
：active 例 a：activ --活动的a
：focus 例 a:focus --获得焦点的样式
：first-letter(选择首字母) 例 p:first-letter --选择p元素的内容的首字母
：first-line（选择首行） 例 p:first-line --选择p内容的首行
：first-child（选择直接子元素） 例 p:first-child --选择p元素，且p元素是其他元素的直接子元素
：last-child(选择最后一子元素) 例 参考上一条
：only-child（选择唯一子元素） 例 p:only-child --选择p元素，且p元素是其父元素唯一子元素
：nth-child（n）【选择第n个元素】 例 p:nth-child（2）--选择p元素且p元素是其父元素的第二个孩子 【可以奇偶匹配，odd参数是奇，event参数是偶数】
：nth-last-child（n）【选择倒数第n个元素】 例 p-last-child（2） --选择p元素，且p是其父元素的倒数第二个孩子
(与上面区别：上面要求选中的元素必须是其父元素的第n个元素，此处选中父元素的第n个该元素对其位置没有要求，只要有足够的该元素就ok）
:nth-of-type(n)【选择其父元素的第n个该元素】 例 p:nth-of-type(2) --选择任意元素中的第二个p元素
:nth-last-of-type(n)参考上一条
3.div盒子模型(box model)
样式表中的 width：content的宽； height：content的高；
div盒子的宽：width+padding+border+margin
div盒子的高：height+padding+border+margin
（注意：margin-top和margin-bottom不会累加，margin-left和margin-right会累加）
4隐藏元素的三种方式
display：none（不占位置，占内存，再次加载需要重新渲染）
opcity：0
visibity：hidden
5.margin是否累加，以及子元素margin对父元素的影响参考1参考2
margin累加与否：
margin-top和margin-bottom：
均为正：不累加，根据数值大的（即使给两者之间加了一个元素如div，但如果不给div一个高度或者边框或者边框也还是不累加）
一正一负：相加
均负： 大的减去小的
margin-left和margin-right累加
子元素margin对父元素的影响：
子元素margin-top时会把父元素带下来（不论父元素有没有高度）（且即使设置父元素的margin-top：0！important也没有用）
解决方案：
1、为父元素设置padding。
2、为父元素设置border。
2、为父元素设置 overflow: hidden（但当有子元素的宽和高溢出时，溢出部分就会隐藏且不占位置） 。
6.z-index属性（对象的层叠顺序）
用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面。
如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。
注意：父子关系是无法用z-index来设定上下关系的一定是子级在上父级在下。
7.相对定位和绝对定位
position：static --left、top..偏移属性无效，z-index属性也无效
position：relative --不脱标，相对自己，占据的是它没偏移前的位置（top、left、..）,z-index有效
position：absolute --脱标，相对于static以外的第一个父元素进行定位,均static则body不在文档中占据位置(top、left、..)，z-index有效
position：fixes --固定定位，相对浏览器(top、left、..)，不在文档中占据位置，z-index有效
特点：脱标，不占位置。可以直接设置宽高（即使是内联元素）
父元素是所有浮动元素宽度之和，若父元素设置宽度，宽度不够自动换行
并使父元素失去高度
清除浮动：
加高法：设置浮动元素父元素的高度，
--缺点：不能适应页面变化
清除法：clear:both(设置在受影响的元素上)（清除两侧浮动、left左侧、right右侧）
--缺点：margin失效了，受影响的元素与浮动元素之间没有间距了;
外墙法：在浮动元素父元素和受影响元素之间添加一个标签，并让标签clear：both即可（且不用设置该标签宽高）
--缺点：浮动元素的父元素依旧没有高度
内墙法：浮动元素父元素里加个div，并让该div设置clear：both即可，（且不用设置该div宽高）
--相比外墙法的优点：浮动元素的父元素有高度（推荐使用！）
溢出法：overflow：hidden（设置父元素）(此处不是溢出隐藏)[父元素不能被浮动子元素撑出高度，但是加上overflow:hidden就可以]
--缺点：特殊情况就是定位的时候，若定位的区域超出那个盒子，overflow：hidden；就会把多的部分裁切掉
float：left（浮动元素相对父元素的margin-left有效，margin-right无效；相对同级其他浮动元素均有效）
float：right（同理）
9.overflow属性参考：
overflow:visible --默认值。内容不会被修剪，会呈现在元素框之外。
overflow:hidden --内容会被修剪，并且其余内容是不可见的。
overflow:scroll --内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow:auto --如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow:inherit --规定应该从父元素继承 overflow 属性的值。
10.弹性布局
11、@media媒体查询
常用设备尺寸
高清屏：1170-
普通屏：970-1170
平板：750-970
手机：-750
12.表单
12.阴影、羽化 参考
盒子阴影：
box-shadow:5px 5px 10px gray;--（阴影水平方向偏移量，垂直方向偏移量，模糊距离，阴影颜色）
box-shadow:5px 5px 10px rgba(0,0,0,0.5);
文字阴影：
text-shadow：x,y;(羽化值，颜色)
12.img是中心还是左上角，遮罩层
13.css变形以及动画处理：旋转、倾斜、过渡、渐变、动画
13.属性碎碎念
获得距离屏幕的宽高
4013
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
