兼容性前缀:
谷歌: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