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

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

如何应用盒模型

如何设置定位

什么样的布局是你需要的

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

相关推荐
翻滚吧键盘11 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。30 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我2 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing2 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心2 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟2 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
小old弟2 小时前
用Sass循环实现炫彩文字跑马灯效果
前端