weixin_49733248的博客

字体系列属性 font-family font-size font-weight font-style 文本系列属性 text-indent text-align line-hight word-spacing letter-spacing color 其他 cursor visibility

浏览器渲染机制 浏览器采用流式布局模型（Flow Based Layout）； 浏览器会把HTML解析成DOM，把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树（Render Tree）； 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上； 由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花 3 倍于同等...

BFC（Block Format Context）块级格式化上下文，是页面盒模型中的一种CSS渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。 创建BFC的方式有： html根元素 float浮动 绝对定位 overflow不为visible display为表格布局或者弹性布局； BFC主要的作用是： 清除浮动 防止同一BFC容器中的相邻元素间的外边距重叠问题 ...

首先解析收到的文档，根据文档定义构建一颗 DOM 树，DOM 树是由 DOM 元素及属性节点组成的； 然后对 CSS 进行解析，生成 CSSOM 规则树； 根据 DOM 树和 CSSOM 规则树构建 Render Tree。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 对象相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。 当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也

1.从属关系的区别: @import 只能导入样式表，link 还可以定义 RSS、rel 连接属性、引入网站图标等； 2.加载顺序区别: 加载页面时，link 标签引入的 CSS 被同时加载； @import 引入的 CSS 将在页面加载完毕后被加载； ...

WebP 是谷歌开发的一种新图片格式，它是支持有损和无损两种压缩方式的使用直接色的点阵图。使用 webp 格式的最大优点是是，在相同质量的文件下，它拥有更小的文件体积。因此它非常适合于网络图片的传输，因为图片体积的减少，意味着请求时间的减少，这样会提高用户的体验。这是谷歌开发的一种新的图片格式。 浏览器如何判断是否支持 webp 格式图片？ 通过创建 Image 对象，将其 src 属性设置为 webp 格式的图片，然后在 onload 事件中获取图片的宽高，如果能够获取，则说明浏览器支持 webp

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：margin（外边距），border（边框），padding（内边距），content（内容） 默认情况下，盒子的width和height属性只是设置content（内容）的宽和高 盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框 盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 正常盒模型 正常盒模型，是指块元素box-sizing属性为cont

JPEG,GIF,PNG,最流行的是jpeg格式，可以把文件压缩到最小 在ps以jpeg格式存储时，提供11级压缩级别。 推荐在线压缩网站：https://tinypng.com/

效果图 html部分 <div className={styles.container} style={style}> <span className={styles.text}>{label}</span> <div className={styles.button}> <label className={styles.toggle} onClick={handleClickToggle}&gt

backgtoun的属性： background-color/*背景颜色（CSS1） background-image/*背景图片（CSS1） background-position/*背景图片的位置（CSS1） background-size/*背景图片的大小（CSS3） background-repeat/*背景图片重复方式（CSS1） background-origin/*背景图片的定位区域（CSS3） background-clip/*背景背景图片绘画区域（CSS3） background-att

CSS书写顺序 　　1.位置属性(position, top, right, z-index, display, float等) 　　2.大小(width, height, padding, margin) 　　3.文字系列(font, line-height, letter-spacing, color- text-align等) 　　4.背景(background, border等) 　　5.其他(animation, transition等) css 命名规范 - BEM CSS