前端开发语言-HTML/CSS
2018-09-07 16:47:38 2 举报AI智能生成
HTML/CSS思维导图大全
作者其他创作
大纲/内容
CSS布局
让IE8支持HTML5
清除浮动详解
清除兄弟元素浮动
闭合子元素浮动
给最后一个元素设置clear:both
给父元素新建一个BFC
显示类型-display
块级元素
行内元素
深入了解linline-block
水平间隙问题
解决方法
代码不换行
设置font-size
对齐问题
vertical-align
网格布局系统
flexbox
container的属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
item的属性
order
flex-grow
flex-shrink
flex-basis
align-self
grids布局系统
position
relative
absolute
fixed
深入z-index
z-index
层叠上下文
重排和重绘问题
CSS 属性的读、写操作分开
通过 class 或者 csstext 来批量更新样式
其他方法
CSS动画
transform
二维2D变换
translate
定位居中
scale
rotate
skew
transform: matrix(a, b, c, d, e, f);
transform-origin
transition
transition-property
transition-duration
transition-timing-function
linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier(n,n,n,n)
transition-delay
animation
关键帧
动画性能优化
60fps 与设备刷新率
浏览器渲染
CSS 图层
渲染过程
重新渲染路径
动画属性
重排（reflow）
触发重排的属性
盒子模型相关属性会触发重布局
定位属性及浮动也会触发重布局：
改变节点内部文字结构也会触发重布局：
重绘（repaint）
触发重绘的属性
composite
目前只有两个属性属于 composite 类：
优化技巧
减少动画元素
尽量使用 fixed、absolute 定位
尽量只改变transform和opacity
恰当开启硬件加速效果
响应式
viewport
retina 显示屏
关键词
5.5 英寸
1920 x 1080 像素分辨率
像素密度——PPI
Retina HD 显示屏
devicePixelRatio（设备像素比）
面临问题
图片虚化
解决办法
1px边框变粗
解决办法
不定宽高图片处理
媒体查询
响应式图片
0 条评论
下一页
