CSS的定义是由三个部分构成：选择器（selector），属性（properties）和属性的取值（value）
选择器是一种匹配模式，用于选择需要添加样式的目标对象。行内样式不需要用选择器， 内部或外部CSS需要用选择器。
- 包含选择器E1 E2（后代关系）,选择所有被E1包含的E2
- 子选择器E1>E2（父子关系）,选择所有作为E1子对象的E2，不包含孙子对象
- 相邻选择器E1+E2（邻居关系），选择紧贴在E1元素之后E2元素（第一个紧跟的邻居元素）
- 兄弟选择器E1~E2（兄弟关系），选择E1元素后面的所有兄弟元素E2，可以有多个
- 分组选择器E1,E2,E3（并列关系），将同样的样式应用于多个选择器
- E1[attr]属性选择器，div[title] { color: blue;}，选择具有title属性的div标签
- E1[attr=value]，具有attr属性且属性值等于value的E1，如span[class=demo] { color: red;}
E:link 未访问的链接 a:link{color:black;text-decoration: none;}
E:visited 已访问的链接 a.red:link class等于red的a元素
E:hover 鼠标悬停状态
E:active 选定的激活状态
E:focus焦点，一般用于input，input:focus
E:after 选择器在被选元素的内容后面插入内容
E:before 选择器在被选元素的内容前面插入内容，通常使用 content 属性配合，来指定要插入的内容
<p>歌词的内容，歌词的内容，歌词的内容，歌词的内容，歌词的内容，歌词的内容，歌词的内容</p>
p:before
{
font-size: 18px;
color: red;
font-weight: bold;
content: "以下是歌词：";
}
p:after
{
font-weight: bold;
content: '----歌词结束了。';
}
CSS样式是有优先级的，遵循顺序：行内样式 > id选择器 > 类选择器 > 标签选择器
text-transform英文大小写，p { text-transform :capitalize;}
text-transform:none| capitalize| uppercase| lowercase
none 默认。
capitalize 文本中的每个单词以大写字母开头。
uppercase 全部转为大写字母。
lowercase 全部转为小写字母。
text-decoration :none| underline| blink| overline| line-through
text-indent 文本缩进，p { text-indent :2em; }
white-space 是否自动换行，white-space :normal| pre| nowrap
text-overflow 文本溢出标识，text-overflow : clip | ellipsis
三大件配合使用,当文本溢出时显示省略标记（...）
text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
background-color :transparent| color，没有none哦
background-image :none| url (url)
background-repeat :repeat| no-repeat| repeat-x| repeat-y
border : border-width|border-style|border-color，如1px solid #000
box-sizing：content-box | border-box
content-box标准盒模型,padding和border不被包含在定义的width和height之内,对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )
border-box怪异盒模型,padding和border被包含在定义的width和height之内,对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
鼠标形状cursor,div { cursor:pointer; }
浮动的元素可以向左或向右移动，直到它的外边缘碰到父级盒子（父容器）或另一个浮动元素的边框为止。
只要设置了浮动，就将盒子脱离了文本流。由于浮动框不在文本流中，所以文本流中的其它元素，表现出就像浮动框不存在一样，自动上移，占有浮动框的位置。解决的办法：使用clear属性清除浮动带来的效果。
overflow :visible| auto| hidden| scroll
display : block| none|inline
position :static| absolute | fixed| relative
z-index :auto| number 设置对象的层叠顺序,number越大越在上面
位置控制 left right top bottom,与position搭配使用
当对象是相对定位时，以当前对象为基准，表示偏移量。盒子仍在标准文本流中，它对父块和兄弟盒子没有任何影响。
当对象是固定定位时，以浏览器为基准，表示与浏览器边框之间的距离。绝对定位的框从标准流中脱离，其他的盒子就好像这个盒子不存在一样。
当父对象有设置定位，表示与父对象之间的距离，子绝父相
雪碧图，又叫精灵图技术，是把很多小图标放到一个大图中去，这样请求图片只请求一次，防止浪费和频繁请求资源。
引入小图标的办法，在div中设置整个大背景图，然后设置大小和定位，显示小图标
主要解决的问题是，精确找到小图标在整个大图中的位置
可以使用firework软件，打开一张图后，使用切图工具，就能准确知道这个图标的大小和定位，在div里设置background-image属性即可，url（） -96px -45px;
解决父元素高度坍塌的问题
造成的原因是子元素脱离文档流，浮动或定位了
解决办法1：父元素开启BFC，使用overflow :hidden
解决办法2：浮动的子元素后面添加个空div，设置清除浮动<div style="clear:both"></div>，会造成多一个div
解决办法3：使用after伪类，在坍塌的父元素上加一个clearfix的class，然后给该class设置伪类
clearfix:after{
content:"";
display:block;
clear:both
}
transition动画效果，一般和伪类一起使用，transform旋转
比如实现点击，展开收缩的效果，图标点一下展开，再点一下收缩
<div class="zhedie iconfont icon-zhedie" @click="show=!show" :class="{active:show}"></div>
.zhedie {
transition: all 0.5s ease;
}
.active {
transform: rotate(90deg);
}
data里定义一个show:false
再比如下拉框右边的三角，鼠标移动到盒子上以后，三角旋转
<div class="box"></div>
.box {width: 300px;height: 40px;margin-top: 20px;border: 1px solid #ccc;position: relative;}
.box::after{ //使用after伪元素来做那个三角
content: "";
position: absolute;
right: 10px;
bottom: 15px;//以上是定位位置
width: 16px;
height: 16px;
border-right: 1px solid red;
border-bottom: 1px solid red;//做一个正方形，右边和下边给边框
transform: rotate(45deg);//再旋转45度，就成了向下的箭头
transition: all 0.5s;//给一个动画，谁用用到谁身上
}
.box:hover::after{
transform: rotate(225deg);//鼠标移动到box上，after伪类旋转225度
bottom:5px;
}
下面是一个旋转进入效果，鼠标放上去，文字从下面旋转进入
.box{
width: 100px;
height: 100px;
margin: 100px auto;
border: 1px solid blue;
overflow: hidden;
}
.box::after{
display: block;
width: 100px;
height: 100px;
content: "haha";
color:red;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all 0.6s;
}
.box:hover::after{
transform: rotate(0deg);
}
动画显示大小的写法
.box:hover { transform: scale(0.6,0.6); }
p:nth-child(3)， 选择p同级元素中的（从前到后的）第3个元素
p:nth-of-type(3)，选择p同级元素中的（从前到后的）第3个p元素，如果里面有别的标签，建议使用
第一个是不管谁都得算上，第二个只管看p元素
last-child 代表在一群兄弟元素中的最后一个元素
last-of-type 代表在一群兄弟元素中的最后一个指定类型的元素。
table{border-collapse:collapse;}
表格的边框被合并为一个单一的边框
scoped里面实际上是给当前组件加了一个随机的样式属性，所以不会影响到别的组件
elementui和vantui，包括vux等ui组件，当无法修改默认样式的时候，就可以使用vue的深度选择器
scss里面这样写 .zywclassname ::v-deep .hm-button:first-child
less里面这样写 .zywclassname /deep/ .hm-button:first-child
如果纯css这样写 .zywclassname >>> .hm-button:first-child
最好不要使用去掉scoped的方法
