目录
在学习CSS时，有三个概念需要重点理解，分别是盒模型、定位、布局
1.盒模型 (Box Model)
定义：
CSS 盒模型是指每个 HTML 元素在页面上被视为一个矩形盒子。这个盒子由多个部分组成，包括内容区、内边距（padding）、边框（border）和外边距（margin）。
组成部分：
- 内容区 (Content)：实际显示的内容，如文本、图像等。
- 内边距 (Padding)：内容与边框之间的空间，增加内边距会使内容与边框之间的距离增大。
- 边框 (Border)：围绕内容和内边距的边框，可以设置宽度、样式和颜色。
- 外边距 (Margin)：盒子与其他元素之间的空间，增加外边距会使元素之间的距离增大。
计算方式：
盒模型的总宽度和高度可以通过以下公式计算：
bash
总宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
总高度 = 内容高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距2.位置 (position)
定位属性：
CSS 提供了多种定位方式，主要包括：
- static：默认值，元素按照文档流正常排列。
- relative：相对定位，元素相对于其正常位置进行偏移。
- absolute：绝对定位，元素相对于最近的已定位祖先元素进行定位。
- fixed：固定定位，元素相对于浏览器窗口进行定位，滚动页面时保持在同一位置。
- sticky：粘性定位，元素在特定的滚动位置时表现为相对定位，超出后表现为固定定位。
3.布局 (Layout)
布局模型：
CSS 提供了多种布局模型，主要包括：
- 流式布局：使用文档流（如 block 和 inline 元素）进行布局，元素按照顺序排列。
- 浮动布局：使用 float 属性实现多列布局，常用于早期的网页设计。
- 弹性布局 (Flexbox)：使用 display: flex 创建灵活的布局，适合一维布局（水平或垂直）。
- 网格布局 (Grid)：使用 display: grid 创建二维布局，适合复杂的网格结构。
4.低代码中的这些概念
在低代码学习中，也是要理解这些概念才可以搭建出需要的页面布局，比如熟悉布局组件，分别能起什么作用
如何应用盒模型
如何设置定位
什么样的布局是你需要的
先学习基础的理论知识，再结合工具去实践，这样才可以彻底的用好工具