语义标签:header、nav、section、aside、footer 等; 增强型表单:type='email'、type='date'、type='number' 等; 新增表单属性:placehoder、pattern、multiple 等; 音频和视频:audio、video; 绘图:Canvas; 其他:地理定位、拖放 API、Web Storage、Web Worker、WebSocket
看这里
相同点:都是用来绘制网页 2D 图形的。 不同点: 1. SVG 使用 XML 标签绘制;Canvas 使用 JavaScript 来绘制。 2. SVG 绘制的是矢量图(放大或者缩小不会失真);Canvas 绘制的是位图(能以 .png/.jpg 保存)。 3. SVG 控制标签节点,节点过多会渲染慢;Canvas 控制像素渲染,性能可能好但实现复杂。 4. SVG 支持分层和事件;Canvas 不支持,但可以用库实现。
用合适的标签描述 HTML 结构和内容。比如遇到标题就用 h1 到 h6 标签;段落用 p 标签;导航用 nav 标签等。 优点: 1. 适合搜索引擎检索(SEO) 2. 适合阅读,利于团队维护。
常用:新增选择器、flex 布局、圆角、渐变、阴影、文字溢出、背景效果、边框效果、转换、平滑过渡、动画、媒体查询等。
BFC:块级格式化上下文 触发方式: 1. 浮动元素(float 不是 none); 2. 绝对定位元素(元素的 positon 为 absolute 或 fixed); 3. 行内块元素(inline block); 4. overflow 值不为 visible 的块元素; 5. 弹性元素的 flex-item(display 为 flex 或 inline-flex 元素的直接子元素); 6. 使用最新的 display:flow-root 触发没有上面副作用。 解决什么问题: 1. 清除浮动; 2. 防止 margin 合并;
1. 最常用:flex 布局 2. 子绝父相,left:50% right:50% 配合 transform: translate(-50%,-50%) 3. 子绝父相,定位全部为 0 配合 margin: auto 4. table tr td 只有一个时自带居中 5. div 伪装 tabel 居中 display: table-cell 6. 100% 高度的子元素添加前后伪元素设置 vertical-align: middle
总结: 1. 选择器越具体,其优先级越高 2. 相同优先级,出现在后面的,覆盖前面的 3. 属性后面添加 !important 的优先级最高,少用
1. 给父元素添加 .clearfix 2. 给父元素添加 overflow:hidden 触发 BFC
content-box(标准盒模型):实际宽度 = width(content) + padding + border border-box(IE 盒模型):实际宽度 = width(content + padding + border) border-box 更符合我们人类的视觉效果(IE 算是做了回好事)
flex 是 flexible box 缩写,意为“弹性布局”。 flex 核心概念: 1. felx-container、flex-item 2. main-axis(主轴)、cross-axis(交叉轴) 3. main-start(主轴的开始位置)、main-end、cross-start、cross-end 4. main-size(单个项目占据的主轴空间)、cross-size flex-container 属性: 1. flex-direction:主轴的方向 2. flex-wrap:一条轴线上放不小如何换行 3. flex-flow:flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap 4. justify-content:主轴上的对齐方式 5. align-items:交叉轴上如何对齐 6. align-content:多根轴线的对齐方式 flex-item 属性: 1. order:项目的排列顺序。数值越小,排列越靠前,默认为 0 2. flex-grow:“成长”,item 占据剩余空间的比例 3. flex-shrink:“缩小”, item 缩小超出空间的比例 4. flex-basis:在分配多余空间之前,项目占据的主轴空间(main size) 5. flex:flex-grow, flex-shrink 和 flex-basis 的简写,默认值为 0 1 auto 6. align-self:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items 属性(很少用)