ccs的两个概念：视觉可是化模型和css属性的计算过程

视觉可是化模型和css属性的计算过程

数据可视化模型分为：

1. 盒模型：每个元素都被表示为一个盒子，包括内容区域、内边距（padding）、边框（border）和外边距（margin）。
2. 浮动：元素可以被设置为向左或向右浮动，使得它们向左或向右移动，直到它们的边缘碰到包含块或另一个浮动元素的边缘。
3. 定位：可以使用相对定位、绝对定位或固定定位来指定元素相对于其正常位置、父元素或浏览器窗口的位置。
4. z-index：当元素重叠时，z-index 属性决定了哪个元素显示在前面。

示例代码：

/* 盒模型 */
.box {
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}
 
/* 浮动 */
.float-left {
  float: left;
}
 
.float-right {
  float: right;
}
 
/* 定位 */
.relative {
  position: relative;
  top: 10px;
  left: 20px;
}
 
.absolute {
  position: absolute;
  top: 50px;
  right: 30px;
}
 
.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}
 
/* z-index */
.high-zindex {
  position: relative;
  z-index: 10;
}
 
.low-zindex {
  position: relative;
  z-index: 1;
}

在这个例子中，.box 类定义了一个元素的宽度、高度、内边距、边框和外边距。.float-left 和 .float-right 类使元素向左或向右浮动。.relative、.absolute 和 .fixed 类分别设置了元素的定位方式。.high-zindex 和 .low-zindex 类通过 z-index 属性设置了元素的堆叠顺序。

2.csss属性的计算过程

首先理解一个概念：所有的元素能够显示在页面上，是因为css，html只不过是标记语言，只是表示了元素的含义，而通常我们的web应用每个元素都需要拥有自己的所有样式才能进行渲染。而所有的样式最终生效值通过以下步骤最后确认下来：

确定声明值--层叠冲突---继承---默认样式

1. 确定声明值（Computed Values） ：参考样式表（作者样式和默认样式）中没有冲突的样式，直接作为最终的css属性值
2. 层叠冲突（Cascade） ：还有冲突的样式，使用层叠规则（重要性---特殊性---次源（顺序）性）
3. 继承（Inheritance） ：某些 CSS 属性是可以继承的，例如字体样式和文本颜色。如果父元素具有某些样式属性，子元素可以继承这些属性，除非显式地覆盖了这些属性。
4. 默认样式（Default Styles） ：浏览器会为每种 HTML 元素定义一组默认样式，以确保页面在没有显式样式的情况下也能够有基本的呈现效果。