CSS -- Note
CSS的优先级：
内联 > id选择器 > class选择器 > 标签选择器
注释：
1、/* code */
2、//code
长度单位
px ：像素
em ：倍数（适用于文字）
颜色
单词
rgb
#abc
CSS选择器
1、常用选择器
2、基本选择器
3、层级选择器
4、伪类选择器
5、属性选择器
常用选择器
1、标签
2、id
3、class
4、组合选择器
5、关联选择器
基本选择器
1、first-child
2、last-child
3、nth-child(index),index从1开始
4、first-letter
5、first-line
层级选择器
A B =>A后代中所有的B
A,B =>共用样式
A>B =>找到A中的子元素B，不包括孙子元素及以下的元素
A+B =>和A同级的，且紧跟在A之后的B元素，中间不能隔元素。
伪类选择器
:hover
:focus
::selection 注意是两个冒号
属性选择器
elemant[attr]
element[attr=value]
element[attr~=value] ，如果attr中有一个value，注意value要和其他词有分隔，不能连着，比如name='user name'中的user
element[attr*=value]，attr中有value子串。注意与attr~=value的区别。
element[attr^=value]，以value开头的attr
element[attr$=value]，以value结尾的attr
字体
font-family
font-size
font-style
font-weight
font ,顺序：style weight size family
@font-face{
font-family: myFirstFont; //此处的font-family指的是下面引入了字体文件之后，为该字体文件中的字体定义一个名称而已，其他地方使用这里定义的名称即可使用字体文件中的字体。
src: url(sansation_light.woff);
}
背景
background
background-color
background-position
background-image
background-attachment
background-repeat
一般情况下，不会将每个小图依次下载，而是将所有的小图P在一张大图中，然后只下载一次大图，然后通过定位来选择图片。
这样会减小服务器的压力，因为如果是一个小图请求服务器一次，会造成服务器负载过重。而只下载一次大图之后，相当于只请求一次，极大地提高效率。
background-size：x y
background-origin: content-box(默认） padding-box border-box 背景图的大小和位置
文本
letter-spacing 字间距（单个字母）
word-spacing 词间距
text-align 对齐
text-decoration 下划线
text-indent 缩进
line-height 行高
color 颜色
word-break 折行
break-all 一个完整的单词会被分割为两半，以字母为单位。
break-word 一个单词不会分割，只会以单词为单位。
text-shadow 文本阴影，和box-shadow类似
边框
border-width
border-style : none solid dotted dashed
border-color
border
border-left
border-right
border-bottom
border-top
鼠标
cursor：
default
crosshair 十字架
pointer 小手
列表
list-style
list-style-type : none/disc/circle/square/decimal
浮动
让元素脱离文档流，会释放所占的空间，后面的内容会挤上来。
浮动可以让独占一行的行标签在一行显示,
float : left right
可以使用display : inline来实现。
浮动可以使用clear : left/right/both来取消浮动
clear：left表示该元素的左边没有元素，即换到下一行的行首
clear：right表示右边没有元素
clear：两边都没有元素。
一个元素浮动的范围：该元素在脱离文档流之前，在哪一行，那么浮动之后，就在那一行的left或者right。
行标签浮动之后可以设置宽高。
尺寸
使用定长（指定固定数量的px），在浏览器的窗口大小变化时，就会出现滚动条。
最好是用百分比来指定。
可以指定min-width，当窗口的宽度大于min-width时，浏览器的窗口进行变化时，不会出现滚动条，只有当小于min-width时，才出现滚动条。
文本框textarea的cols和rows可以使用width，height来指定，右下角的小三角（变化textarea的大小），可以使用resize:none来消除。
文本样式的继承
会自动继承上级或者上.....上级的文本样式，包括文字大小、颜色、字体
font-size、font-family、font-style、font-weight、color、line-height、word-spacing、text-align
如果本身自己定义了和祖先相同的属性，但是属性值不同，就会以自己定义的属性值为准，忽略从祖先继承来的属性。
height、width等属性不会继承。
要让包含文本的div的width自适应内容的宽度，可以指定width为fit-content；
行标签：
块标签
表格
注意给table、td、tr、th加border的样式后，结果是不同的，所以注意加样式的位置。
border-collapse: collapse 合并边框
border-spacing:
定位
position
absolute：首先会脱离文档流，会将曾经占用的空间释放，所以后面的内容会补上来，而设置定位的元素就会“浮动”起来，并且在没有指定位置的时候，会在原来的地方停留。如果left或者top等位置单词来指定为值时，相对于向上搜索第一个有定位的元素进行定位，即相对于那个元素为（0，0）。
relative：脱离文档流，不会将曾经占用的空间释放，所以后面的内容不会补上来，那一块空间仍保持空白。指定的位置是相对于脱离文档流之前的位置而言，即曾经的位置的左上角为（0，0）
fixed：脱离文档流，会释放曾经占用的空间，后面的内容会补上来，但是固定定位，是相对于浏览器窗口的位置定位，即浏览器的左上角为（0，0），一旦确定，不管浏览器窗口怎么变化，位置都不会改变。
top 、left、 right、bottom指定定位的位置
z-index
外层元素使用absolute、relative、fix进行定位后，内部元素使用absolute来定位。
推荐的做法是外层使用relative，内层使用absolute。
内边框
padding
padding-left
padding-top
外边框
margin
margin-left
margin-top
margin-top
margin-bottom
一个元素实际的尺寸是 width(height) + padding(left/right/top/bottom) + border(left/right/top/bottom)
滚动条
overflow
hidden : 超出宽高范围的内容会隐藏
scroll ：如果内容超出范围时，就会出现滚动条
auto : 如果内容超过范围，就会出现滚动条。和scroll没区别
visible：查出范围的内容，在范围外仍然可见。
显示
display
display : none 脱离文档流后，隐藏，不占位
visibility：hidden 没有脱离文档流，隐藏，但是仍旧占据空间。
display：inline 取消块标签独占一行的特点，让块标签在一行显示。
边框与圆角
border-radius
box-shadow : 1 2 3 4 5 inset
1：水平偏移值
2：垂直偏移值
3：模糊值
4：外延值
5：颜色
inset：内阴影
border-image：url() n1 n2 style
注意：在使用border-image时，要加一个border的边距，否则即使指定了border-image，也只会显示1px。
注意border-image的兼容性。
2D和3D
transform
translate(x,y) 移动到x，y的位置
rotate(5deg) 顺时针转5度，注意以后的坐标x，y变了，坐标轴也转了5度，之后使用translate，一新的坐标系为准。
所有的transform动画都会以transform函数变化之后的坐标系为准。
注意position坐标系始终不变。
