HTML5_CSS3实用知识

HTML5

• 标签兼容性：html5 很多标签在浏览器里面使用都有兼容性问题。另外，有些标签有自带样式且无法更改，如进度条标签的背景颜色等等。对于兼容性问题，我们可以创建自定义标签 document.createElement('tagName')。
• 输入域的表单列表：datalist、option。
• 自定义属性：data-*，解决自定义属性混乱无管理的现状。dom.dataset.xxx来获取和设置数据。
• 文件读取：通过 FileReader 对象可以读取本地存储的文件，使用 File 对象来指定所要读取的文件或数据。File 对象可以是来自用于一个 <input type="file" /> 元素上选择文件后返回的 FileList 对象，也可以来自由拖放操作生成的 DataTransfer。
• a 标签使用注意事项：<a href="xxx" target="_blank" rel="noopener noreferrer"> XXX </a>。

CSS3

• 重点：背景设置、边框圆角及阴影、边框图片设置、文本修饰（阴影 text-shadow）、选择器（属性选择器、目标选择器 :target、选中后改变背景颜色 ::selection）、线性渐变和径向渐变（linear-gradient、radial-gradient）、2D 3D转换（transform）、过渡（补间动画 transition）、动画（animation、@keyframes）、伸缩布局（display: flex）。
• flex: auto; --> flex-grow: 1; flex-shrink: 1; flex-basis: auto;。
• aspect-ratio：https://zhuanlan.zhihu.com/p/348250741 (opens new window)。
• backface-visibility：指定当元素背面朝向观察者时是否可见。MDN (opens new window)。
• background：属性被指定多个背景层时，使用逗号分隔每个背景层，https://developer.mozilla.org/zh-CN/docs/Web/CSS/background (opens new window)。
• 盒子模型：由四个部分组成：content、padding、border、margin。box-sizing -- 标准盒子模型：盒子总宽度 = width + padding + border + margin；IE 怪异盒子模型：盒子总宽度 = width + margin。
• 单位：在 css 单位中，可以分为相对长度单位（em、ex、ch、rem、vw、vh、vmin、vmax、%、px）、绝对长度单位（cm、mm、in、pt、pc）。
• 【1】CSS像素（css pixel, px）: 适用于 Web 编程，在 CSS 中以 px 为后缀，是一个长度单位。在 CSS 规范中，长度单位可以分为两类，绝对单位以及相对单位。px 是一个相对单位，相对的是设备像素（device pixel）。【2】设备像素：又称为物理像素，指设备能控制显示的最小物理单位，不一定是一个小正方形区块，也没有标准的宽高，只是用于显示丰富色彩的一个“点”而已。单位为pt。【3】设备独立像素（Device Independent Pixel）：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素。【4】dpr（device pixel ratio），设备像素比：代表设备独立像素到设备像素的转换关系，在 JavaScript 中可以通过 window.devicePixelRatio 获取。dpr = 设备像素 / 设备独立像素。
• BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块独立渲染区域，并且有一套属于自己的渲染规则。BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。
• 元素水平垂直居中：利用定位 + margin: auto；利用定位 + margin: 负值；利用定位 + transform；flex 布局；table 布局；grid 布局。
• transition：并不是所有的属性都能使用过渡的，如display: none -> display: block。
• 减少回流和重绘：避免设置多项内联样式；使用 position 属性的 fixed 值或 absolute；避免使用 table 布局；使用 CSS3 硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘。
• 响应式界面：content is like water。实现响应式布局的方式：媒体查询、百分比、vw / vh、rem。
• CSS 性能优化的实现可以从选择器嵌套、属性特性、减少 http 请求这三面考虑，同时还要注意 CSS 代码的加载顺序。
• 使用 CSS 形式实现视觉差滚动效果的方式：background-attachment、transform: translate3D。
• CSS 变量：在 :root 选择器中声明变量【变量名称必须以两个破折号（--）开头，且区分大小写！】；var() 函数用于插入 CSS 变量的值，语法 --> var(name, value)。