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

秒客网