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

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

如何应用盒模型

如何设置定位

什么样的布局是你需要的

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

相关推荐
zhangjr05751 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
不爱学习的YY酱1 小时前
【操作系统不挂科】<CPU调度(13)>选择题(带答案与解析)
java·linux·前端·算法·操作系统
木子七1 小时前
vue2-vuex
前端·vue
麻辣_水煮鱼1 小时前
vue数据变化但页面不变
前端·javascript·vue.js
BY—-组态1 小时前
web组态软件
前端·物联网·工业互联网·web组态·组态
一条晒干的咸魚2 小时前
【Web前端】实现基于 Promise 的 API:alarm API
开发语言·前端·javascript·api·promise
WilliamLuo2 小时前
MP4结构初识-第一篇
前端·javascript·音视频开发
Beekeeper&&P...2 小时前
web钩子什么意思
前端·网络
啵咿傲2 小时前
重绘&重排、CSS树&DOM树&渲染树、动画加速 ✅
前端·css
前端Hardy3 小时前
HTML&CSS:数据卡片可以这样设计
前端·javascript·css·3d·html