HTML 页面布局

慢慢生活,慢慢变好

------ 24.5.28

页面布局

盒子:

页面中所有的元素(标签),都可以看做是一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局

盒子模型组成:

内容区域(content)、内边距区域(padding)、元边框区域(border)、外边距区域(margin)

布局标签:

实际开发网页中,会大量频繁的使用divspan这两个没有语义的布局标签

标签:<div><span>

特点:

div标签:

① 一行只显示一个(独占一行)

② 宽度默认是父元素的宽度,高度默认由内容撑开

③ 可以设置宽高(width、height)

span标签

① 一行可以显示多个

② 宽度和高度默认由内容撑开

③ 不可以设置宽高(width、height)

小结

CSS盒子模型

组成:内容(content)、内边距(padding)、边框(border)、外边距(margin)

CSS属性

width:设置宽度

height:设置高度

border:设置边框的属性,如:1px solid #000;

padding:内边距Amargin:外边距

**注意:**如果只需要设置某一个方位的边框、内边距、外边距,可以在属性名后加上-位置,如:padding-top、padding-left、padding-right .

相关推荐
夜焱辰5 小时前
浏览器端 Agent 的文件版本管理:不用 Git,基于 OPFS + SQLite 自己造了一个
前端·人工智能
梦想的颜色5 小时前
TypeScript 完全指南(下):从类型体操到生产级配置
前端·javascript·typescript
Hi~晴天大圣6 小时前
npm使用介绍
前端·npm·node.js
888CC++7 小时前
如何在 C 语言中进行程序调试?
前端·javascript·算法
喵个咪7 小时前
基于 Taro 的 Headless CMS 多端前端架构:技术解析与二次开发导引
前端·react.js·taro
狂炫冰美式7 小时前
你还在古法PPT吗,试试HTML呢?免费编辑导出工具给 xdm 放这了
前端·后端·github
万少8 小时前
未来组织的分水岭不是员工数量,而是人才密度
前端·后端·面试
任磊abc8 小时前
nextjs16配置eslint+prettier
前端·eslint·nextjs·prettier
x***r1518 小时前
Another-Redis-Desktop-Manager.1.3.7安装步骤详解(附Redis可视化连接与Key管理教程)
前端·bootstrap·html
Captaincc8 小时前
你真的知道自己把 AI 用在了哪里吗?这是 Vibe Usage 想回答的问题
前端·vibecoding