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会放在构建的时候做。
## 边框
边框的属性： 线型 大小 颜色
背景图
边框衔接的原理：斜切的（三角形
```css
.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的美化
1. label id
2. 隐藏input
3. :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
1. 一种现代的布局语法
2. 弹性盒子
3. 盒子是并列的
4. 需要指定宽度
5. 兼容问题
>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
1. 元素会浮动
2. 元素脱离文档流
3. 元素不脱离文本流
>可以联想到文本环绕图片的效果，当然这就是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
