目录
- 1.盒模型 (Box Model)
- 2.位置 (position)
- 3.布局 (Layout)
- 4.低代码中的这些概念
在学习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.低代码中的这些概念
在低代码学习中,也是要理解这些概念才可以搭建出需要的页面布局,比如熟悉布局组件,分别能起什么作用
如何应用盒模型
如何设置定位
什么样的布局是你需要的
先学习基础的理论知识,再结合工具去实践,这样才可以彻底的用好工具