CSS的三个重点

目录

在学习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.低代码中的这些概念

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

如何应用盒模型

如何设置定位

什么样的布局是你需要的

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

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试