登录免费注册



前端开发语言-HTML/CSS

首页  思维导图  详情



前端开发语言-HTML/CSS

2018-09-07 16:47:38   2  举报





AI智能生成

HTML/CSS思维导图大全

前端 CSS HTMl JavaScript

模版推荐

作者其他创作

大纲/内容

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边框变粗

解决办法

不定宽高图片处理

媒体查询

响应式图片

 Collect

Get Started

HTML请求到数据库完整流程

 Collect

Get Started

HTML+CSS项目化内容

 Collect

Get Started

html

 Collect

Get Started

CSS













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document