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

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

如何应用盒模型

如何设置定位

什么样的布局是你需要的

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

相关推荐
dasseinzumtode12 分钟前
nestJS 使用ExcelJS 实现数据的excel导出功能
前端·后端·node.js
子兮曰15 分钟前
🔥C盘告急!WSL磁盘暴增?三招秒清20GB+空间
前端·windows·docker
Jinuss15 分钟前
Vue3源码reactivity响应式篇之EffectScope
前端·vue3
stoneship19 分钟前
网页截图API-Npm工具包分享
前端
Jedi Hongbin30 分钟前
Three.js shader内置矩阵注入
前端·javascript·three.js
etcix31 分钟前
dmenux.c: integrate dmenu project as one file
c语言·前端·算法
光影少年43 分钟前
react16到react19更新及底层实现是什么以及区别
前端·react.js·前端框架
超人不会飛1 小时前
vue3 markdown组件|大模型应用专用
前端·vue.js·人工智能
じòぴé南冸じょうげん1 小时前
微信小程序如何进行分包处理?
前端·小程序
Jolyne_1 小时前
Table自定义单元格渲染分享
前端