CSS的三个重点

在学习CSS时，有三个概念需要重点理解，分别是盒模型、定位、布局

1.盒模型 (Box Model)

定义：

CSS 盒模型是指每个 HTML 元素在页面上被视为一个矩形盒子。这个盒子由多个部分组成，包括内容区、内边距（padding）、边框（border）和外边距（margin）。

组成部分：

• 内容区 (Content)：实际显示的内容，如文本、图像等。
• 内边距 (Padding)：内容与边框之间的空间，增加内边距会使内容与边框之间的距离增大。
• 边框 (Border)：围绕内容和内边距的边框，可以设置宽度、样式和颜色。
• 外边距 (Margin)：盒子与其他元素之间的空间，增加外边距会使元素之间的距离增大。

计算方式：

盒模型的总宽度和高度可以通过以下公式计算：

    总宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距总高度 = 内容高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

2.位置 (position)

定位属性：

CSS 提供了多种定位方式，主要包括：

• static：默认值，元素按照文档流正常排列。
• relative：相对定位，元素相对于其正常位置进行偏移。
• absolute：绝对定位，元素相对于最近的已定位祖先元素进行定位。
• fixed：固定定位，元素相对于浏览器窗口进行定位，滚动页面时保持在同一位置。
• sticky：粘性定位，元素在特定的滚动位置时表现为相对定位，超出后表现为固定定位。

3.布局 (Layout)

布局模型：

CSS 提供了多种布局模型，主要包括：

• 流式布局：使用文档流（如 block 和 inline 元素）进行布局，元素按照顺序排列。
• 浮动布局：使用 float 属性实现多列布局，常用于早期的网页设计。
• 弹性布局 (Flexbox)：使用 display: flex 创建灵活的布局，适合一维布局（水平或垂直）。
• 网格布局 (Grid)：使用 display: grid 创建二维布局，适合复杂的网格结构。

4.低代码中的这些概念

在低代码学习中，也是要理解这些概念才可以搭建出需要的页面布局，比如熟悉布局组件，分别能起什么作用

如何应用盒模型

如何设置定位

什么样的布局是你需要的

先学习基础的理论知识，再结合工具去实践，这样才可以彻底的用好工具