css问题

已知宽高

 

 flex

 

grid

 

css变量

body{
    --bg-color: lightblue;
    background-color: var(--bg-color);
}
:root{//全局 局部会覆盖全局
    --bg-color: red;
}

 

 

CSS盒模型和IE盒模型的区别：

• 在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
• IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

重绘（repaint）：当元素样式的改变不影响布局时 ，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此损耗较少。

• 如何触发重绘？

1. 修改背景色、颜色（background、color）
2. 设置可见度（visibility）
3. 设置背景图（background-image）
4. ……等

回流（reflow）：又叫重排（layout）。当元素的尺寸、结构或者触发某些属性时，浏览器会重新渲染页面，称为回流。

此时，浏览器需要重新经过计算，计算后还需要重新页面布局，然后进行绘制渲染，因此是较重的操作。

• 如何触发回流？

1. 添加删除 DOM 元素
2. 改变边框、边距、宽高（border、margin、padding、width、height）
3. 浏览器改变窗口（resize）
4. ……等

link 和 @import 区别：

• link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于 CSS 范畴，只能加载 CSS。
• link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
• link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。
• link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。