css的一些复习
css，全称Cascading Style Sheets，层叠样式表。
css选择器是从右往左解析的，解析速度会比较快。
选择器
选择器权重
!important 优先级最高
元素属性 优先级高
相同权重 后写的生效
行高
留坑
背景
背景颜色
渐变色背景
多背景叠加
背景图片和属性（雪碧图）
background:red url(image.png);这里不需要逗号
background:no-repeat;还可以选择repeat-x,repeat-y。
background-position:center center;当然也可以用px来确定位置。
background-size:100px 50px;
多分辨率适配：大图缩小（background-size
base64 和 性能优化：background: url(base64)
使用base64减少了http请求，但是文件的体积会变大，浏览器也多了一个解读base64的任务，所以不能一味地认为base64就是优于直接放图片地址。小图片，比如loading图就比较适合base64。而且一般转base64会放在构建的时候做。
边框
边框的属性： 线型 大小 颜色
背景图
边框衔接的原理：斜切的（三角形
.box2{
height:0px;
border-bottom: 10px solid red;
border-right:10px solid transparent;
border-left:10px solid transparent;
width:0px;
}
.box3{
height:0px;
border-bottom: 10px solid transparent;
border-right:10px solid red;
border-top:10px solid transparent;
width:0px;
}
overflow
visible:内容会超出容器，无滚动条
hidden:超出内容被隐藏，无滚动条
scroll:有滚动条
auto:溢出时有滚动条
换行
overflow-wrap:normal;
word-break:normal;
white-space:nowrap;//这个可以使长内容不换行
一些装饰性属性
字重（粗体） font-weight
斜体 font-style:italic
下划线 text-decoration
指针 cursor
hack
checkbox的美化
- label id
- 隐藏input
- :checked + label
input+label{}
input:checked + label{}
布局
display:block/inline/inline-block
block有独立宽高，默认情况下占据一行
inline默认不会占据一行
inline-block对内表示为block，可以设置宽高，对外表示为inline，可以与其他元素排在一行。
position:static/relative/absolute/fixed
static静态布局，最基本的定位方式，也就是没有定位。
relative相对定位，相对于其原来的位置进行定位。
absolute生成绝对定位的元素，相对于static以外的第一个父元素进行定位，脱离文档流。
fixed生成绝对定位的元素，相对浏览器窗口进行定位。
z-index:只在定位元素上生效（除了static），相当于一条z轴，值越高则再屏幕的越上面。下拉单和遮罩使其应用。
表格布局 table
flexbox
- 一种现代的布局语法
- 弹性盒子
- 盒子是并列的
- 需要指定宽度
- 兼容问题
flex-direction控制flex项目沿着主轴的排列方向，row || column || row-reverse || column-reverse。
flex-wrap可以控制flex容器内是否换行：nowarp不换行，wrap换行，wrap-reverse换行但是是反向的。
flex-flow是以上两个属性的速记属性，类似于border。
justify-content类比text-align，flex项目在主轴上的对齐方式，flex-start,flex-end,center,space-between,space-around
flex的属性很多，未完待续。
float
- 元素会浮动
- 元素脱离文档流
- 元素不脱离文本流
可以联想到文本环绕图片的效果，当然这就是float本来的用途，只不过我们用float来布局而已
清除浮动的方法
.clearfix::after{
content:'aaa';
clear:both;
display:block;
height:0px;
visibility: hidden;
}
//注意一步一步的变化过程
//content可以是任意内容，可以是空格，这里设置文字是为了观察变化的过程
//为了触发ie的hasLayout可以再添加一行
.clearfix { *zoom:1; }
inline-block布局
inline-block布局也是一种很不错的布局方式，可以像文本一样排block元素，不用清除浮动，但是存在间隙，可以通过设置父元素的字体大小为0解决这个问题。
响应式布局
折行：把横向的变成纵向的，如原来inline-block实现的一行东西，可以改成block加上居中实现纵向排列。
隐藏：在移动端隐藏一些不是很重要的内容，如广告和个人信息。
具体方法：rem/viewport/media query
