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 .

相关推荐
Java中文社群几秒前
绝了!分享一个超赞的UI框架!
前端
狂炫一碗大米饭8 分钟前
每个前端开发人员都应该知道的 6 大 CSS 框架
css·scss
Zayn10 分钟前
JavaScript 小数精度问题
前端·javascript
西维11 分钟前
高效使用AI从了解 Prompt / Agent / MCP 开始
前端·人工智能·后端
110546540128 分钟前
35、自主移动机器人 (AMR) 调度模拟 (电子厂) - /物流与仓储组件/amr-scheduling-electronics
前端·javascript
SuperYing30 分钟前
还在为调试组件库发愁吗?yalc 帮你一把
前端·npm
跟橙姐学代码36 分钟前
Python 高手都偷偷用的 Lambda 函数,你还在傻傻写 def 吗?
前端·python
Eddy37 分钟前
useEffect最详细的用法
前端
一枚前端小能手42 分钟前
🎨 用户等不了3秒就跑了,你这时如何是好
前端
Eddy44 分钟前
什么时候应该用useCallback
前端