HTML+CSS初学日常知识点-八

反方向的发

已于 2022-03-16 20:47:56 修改

阅读量122

点赞数

分类专栏： css html 文章标签： css html 前端

于 2022-03-16 20:47:38 首次发布

本文链接：https://blog.csdn.net/Gaoler7/article/details/123534987

版权

html 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

一.重绘与回流

首先要了解网页是如何生成的节选自阮一峰老师文章

HTML代码转化成DOM
CSS代码转化成CSSOM（CSS Object Model）
结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息）
生成布局（layout），即将所有渲染树的所有节点进行平面合成
将布局绘制（paint）在屏幕上

这五步里面，第一步到第三步都非常快，耗时的是第四步和第五步

"生成布局"（flow）和"绘制"（paint）这两步，合称为"渲染"（render）

以下三种情况，会导致网页重新渲染

修改DOM
修改样式表
用户事件（比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等）

重新渲染，就需要重新生成布局和重新绘制。前者叫做"回流"（reflow），后者叫做"重绘"（repaint）

页面中元素的尺寸，布局，隐藏等改变而需要重新构建页面，就会引起回流

页面中元素属性发生改变，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘

回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

回流和重绘的DOM元素层级越高，成本就越高

提高网页性能，就是要降低"重排"和"重绘"的频率和成本，尽量少触发重新渲染

一般规则是：

样式表越简单，重排和重绘就越快。
重排和重绘的DOM元素层级越高，成本就越高。
table元素的重排和重绘成本，要高于div元素

CSS属性书写顺序

1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性（跟盒子相关的）：width / height / margin / padding / border / background
3. 字体文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

二.文本阴影-text-shadow

样式：

text-shadow: 0 0.5px 0 #ffffff;

效果：

text-shadow:水平方向阴影垂直阴影 [模糊距离] [ 阴影颜色 ]；

三.盒子阴影-box-shadow

投影方式：默认外投影 inset为内投影

样式：

box-shadow: 0 0 20px 5px rgba(0,0,0,0.8) ;

效果：

box-shadow: 水平阴影垂直阴影 [迷糊距离] [阴影扩展半径] [阴影颜色] [投影方式]；

四.定义字体

样式：

@font-face{
   font-family:自定义字体名称；
   src:url （字体路径）
}

使用字体：

使用字体
选择器{
 font-family: 自定义字体名称；
}

五.渐变-background-image

样式：

线性渐变
background-image：linear-gradient( 渐变角度，颜色1  颜色1位置，颜色2 颜色2位置，....)

重复线性渐变
background-image：repeating-linear-gradient( 渐变角度，颜色1  颜色1位置，颜色2 颜色2位置，....)

径向渐变
background-image：radial-gradient ( shape size at position,颜色1  位置 ，颜色2  位置，.....)

重复径向渐变
background-image：radial-gradient ( shape size at position,颜色1  位置 ，颜色2  位置，.....)

六.圆角-border-radius

代码：

border-radius:值；
四个圆角一样

border-radius:值1 值2；
1 左上右下
2 右上左下

border-radius:值1 值2 值3；
1 左上
2 右上左下
3 右下

border-radius:值1 2 3 4；
1 左上 2 右上 3 右下 4 左下

七.过渡 transition-property

transition-duration过渡持续时间单位：m秒或ms毫秒

transition-timing-function过渡速度

ease 默认 linear 匀速 ease-in 加速 ease-out 减速 ease-in-out 加减

transition-delay过渡延迟时间

八.优雅降级和渐进增强

渐进增强progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

优雅降级graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

渐进增强观点：
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在

优雅降级观点：
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略