兼容性前缀：
谷歌：webkit
火狐：moz
IE：ms
欧朋：o
一、选择器
1、类选择器 .box
2、元素选择器 div
3、id选择器 #box
4、派生选择器 div.box div#box .box
5、属性选择器 [title="容器"]
(1)*=" " 值包含什么
(2)^=" " 以什么开头
(3)$=" " 以什么结尾
6、结构伪类选择器
(1) :first-of-type
(2) :last-of-type
(3) :nth-of-type( )
[
:nth-of-type(even)=2n 第偶数个
:nth-of-type(odd)=2n+1 第奇数个
:nth-of-type(n+4) 从第四个开始一直往后所有的
:nth-of-type(-n+3) 前三个
:nth-of-type(-n+9):nth-of-type(n+4) 从第四个到第九个
]
(4) :nth-last-of-type( ) 倒数第几个
css2.0：
(1) :first-child div的第一个子节点
(2) :last-child div的最后一个子节点
(3) :nth-child div的第n个子节点
(5) :not() 除了
(6) :empty 空元素
(7) :target 激活元素、当前元素
(8) :checked 选中项
(9) :not(:checked) 未选中项
(10) :disabled 禁用项
(11) :not(:disabled) === :enabled 可选项
(12) :focus 获得焦点
(13) ::selection 选择的文本
(14) :+ 后边一个兄弟选择器(同级后一个)
(15) :~ 后边所有兄弟选择器(同级所有个)
(16) :>直系子级
(17) :*所有元素
(18) :first-letter 第一个字母
(19) :first-word 第一个词
(20) :first-line 第一行
(21) :root 根元素
二、文本
(1)文字阴影：最少写两个
text-shadow:x轴偏移量 y轴偏移量 模糊范围 颜色
(2)文字描边：（文字边框）
-webkit-text-stroke:粗细 颜色
描边：text-stroke(火狐支持，其他都不支持)
(3)文字溢出
text-ellipsis：ellipsis溢出变成三个点 clip溢出裁剪掉
单行文本截断：text-overflow:ellipsis(溢出变成三个点) clip(溢出减掉);
overflow: hidden; 溢出隐藏
white-space: nowrap; 空白不换行
多行文本截断：display:-webkit-box;
-webkit-box-orient:vertical; (调整基点：垂直方向)
-webkit-line-clamp:3 （三行，控制行数）
(4)强制换行
word-wrap:break-word 溢出文本强制换行
(5)引入外部字体：
@font-face{font-family:; src:url("");}
(6)透明度
opacity 取值范围0-1
rgba rgba(0,0,0,.5)
(7)径向渐变：由中心向外扩散，呈现圆形
radial-gradient(形状 半径，颜色 范围，...)
形状 circle圆形 ellipse椭圆
半径 可以写像素值，不能写百分比
closest-side 最近的边
closest-corner 最近的角
farthest-side 最远的边
farthest-corner 最远的角
(8)线性渐变：由一个方向向另一个方向扩散
linear-gradient(方向30deg to top/left/right/bottom,颜色 范围,...)
注意webkit前缀的方向和普通样式的方向差了90deg
background: linear-gradient(0deg, red 10%, blue 20%, yellow 30%,cyan 40%);
background: -webkit-linear-gradient(90deg, red 10%, blue 20%, yellow 30%, cyan 40%)
(9)重复渐变：在渐变的前边加上repeating-
(10)颜色：rgba
三、边框背景
1、圆角：
border-radius 50%圆形 上左、上右、下右、下左
border-top-left-radius: 30px; 上左
border-top-right-radius: 10px; 上右
border-bottom-left-radius: 20px; 下左
border-bottom-right-radius: 40px; 下右
2、边框图：border-image:图片路径url("dog2.jpg") 裁剪大小(30) 平铺方式 (repeat /round);
平铺方式：重复repeat 拉伸round
边框多色：-moz-border-colors: 只有火狐有效果
3、背景：
(1)背景图尺寸：
background-size:宽度 高度;
contain按宽平铺 cover按高平铺
(2)背景图基点： background-origin:
border-box从边框开始
content-box从内容区域开始
padding-box从内边距开始 默认值
(3)背景图裁剪 background-clip:
border-box从边框开始
content-box从内容区域开始
padding-box从内边距开始 默认值
(4)背景图固定方式：background-attachment:
fixed 不随着滚动条滚动而滚动
scroll 随着滚动条而滚动 默认值
4、多背景
background:url() no-repeat 0 0 / 50px 50px ,
url() no-repeat 0 0 / 50px 50px,
url() no-repeat 0 0 / 50px 50px;
(边框，背景图，背景色)
5、盒子界面：
box-sizing: border-box; 标准盒模型转怪异盒模型
box-sizing: content-box; 怪异盒模型转标准盒模型
(1)容器是否能够改变尺寸
resize:both默认值 都可以 vertical垂直 horizontal水平 none 都不能
(2)盒子阴影：box-shadow:
x轴偏移量 y轴偏移量 模糊范围 模糊半径 颜色 阴影的位置 默认外阴影，inset内阴影
(3)盒子倒影：box-reflect
倒影的位置：left / right / abover / below,偏移量，渐变
(4)滤镜：filter:模糊blur()
四、变形过渡
1、变形： transform 不会产生重绘
(1)位移：translate
translate/translateX/translateY/translateZ/translate3d
(2)缩放： scale (可以用倍数，不能用负数)
scale/scaleX/scaleY/scaleZ/scale3d
(3)旋转：rotate(可以用负数)
rotateX/rotateY/rotateZ/rotate/rotate3d
(4)倾斜：skew
skewX/skewY/skew
(5)变形基点：transform-origin
2、过渡：transition:时间 延迟 （不能换顺序） 属性 运动方式
(1) 过渡时间：transition-duration
(2)延迟时间：transition-delay
(3)过渡属性：transition-property
所有属性all,多个属性过渡时中间用逗号隔开
(4)过渡速度运动方式：transition-timing-function
ease加速／ease-in加速／ease-in-out先加速后减速／ease-out减速／linear匀速
3、基点：transform-origin
top/left/right/bottom/center/ px/%
4、重绘：布局发生改变了就是重绘
5、重排：样式发生了改变width/height/top/left/right/bottom/margin/padding
6、BFC：块级格式化上下文：脱离文档流float 绝对定位absolute 固定定位fixed
五、动画:animation
(1)动画名称：animation-name
(2)动画时间：animation-duration
(3)动画延迟：animation-delay
(4)动画运动方式：animation-timing-function
ease加速／ease-in加速／ease-in-out先加速后减速／ease-out减速／linear匀速
(5)动画的次数：animation-iteration-count 无限infinite
(6)动画的方向：animation-direction
反向reverse 一次正一次反（来回）alternate 正向normal
(7)动画的播放状态：animation-play-state
运动running 暂停paused
(8)动画的时间外状态：animation-fill-mode
forwards backwards both none
动画结束时停在最后一帧forwards
动画结束时返回第一帧backwards
动画立即执行第一帧，结束时停在最后一帧both
(9)3D动画:
创建景深perspective
视角perspective-origin
从上往下top/从左往右left/从右往左right/从下往上bottom/中间center
声明子元素是否支持3D效果transform-style:preserve-3d;
元素转到后面是否可见backface-visibility: hidden;
(10)写动画@keyframes
六、多列(columns)布局
(1)列数：column-count
(2)列间隙：column-gap
(3)列边框：column-rule
边框粗细column-rule-width
边框样式column-rule-style
边框颜色column-rule-color
(4)跨列：column-span:all只能跨所有列
(5)列宽：column-width
注意：当既有列宽又有列数时，列宽的样式将被覆盖
columns: 100px 3;
七、弹性盒子 display:flex
老：display:box
新：display:flex
父盒子：
(1)方向：flex-direction
横向正方向row，横向反方向row-reverse
纵向正方向column,纵向反方向column-reverse
(2)横向对齐方式：justify-content
左对齐flex-start,右对齐flex-end,居中对齐center
两端对齐space-between,等间距对齐space-around
(3)纵向对齐方式：align-items
上对齐：flex-start,右对齐flex-end,居中对齐center
等高：stretch,基线对齐baseline
(4)纵向子元素(行)对齐方式（行数>1）：align-content
上对齐flex-start,下对齐flex-end,居中对齐center
两端对齐space-between,等间距对齐space-around
(5)子元素是否换行：flex-wrap
换行：wrap,不换行nowrap
flex-flow：方向（flex-direction） 换行（flex-wrap）;
子盒子：
(6)扩展空间：flex-grow
(7)压缩空间：flex-shrink
1份 = （子元素总宽-容器宽）/总份数（每个元素占一份，flex-shrink 3 再加2份）
压缩空间=子元素宽-1份宽度*份数
宽度：flex-basis 优先级高于width，会覆盖width的样式
缩写：flex:flex-grow flex-shrink flex-basis;(不能换顺序)
flex:auto => 1 1 auto;
flex:none => 0 0 auto;
flex:2 3 100px;
顺序order：order可以为负，不能为小数，值越小越靠前，越大越靠后
(7)单独样式：align-self
八、响应式
(1)响应式网站：网页的布局会随着设备的不同进行相应（变化）
优点：开发工期短，结构不需要重构，布局通过css进行控制
缺点：结构不能灵活变换
使用场景：页面内容简单、单一的网站
(2)自适应网站：网站的布局会随着设备的不同进行变更，变化前后是两个网站
优点：结构样式可以自由变换
缺点：开发工期长、成本高，结构需要重构，
使用场景：页面内容复杂以及结构复杂的网站
媒体查询：@media (min-width) and (max-width){} screen all prient
单位：1、px+media
2、rem+js
rem:相对于html
em:相对于父级
// 算法：
// 设备宽870 100px=1rem 87 52
// 设计图宽500 54.47px 50 30
// 500*100/870=54.47
// 50*100/54.47=87
// 30*100/57.47=52
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
