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 .

相关推荐
Jiaberrr3 分钟前
开启鸿蒙开发之旅:交互——点击事件
前端·华为·交互·harmonyos·鸿蒙
Json____19 分钟前
学法减分交管12123模拟练习小程序源码前端和后端和搭建教程
前端·后端·学习·小程序·uni-app·学法减分·驾考题库
上趣工作室31 分钟前
vue2在el-dialog打开的时候使该el-dialog中的某个输入框获得焦点方法总结
前端·javascript·vue.js
家里有只小肥猫32 分钟前
el-tree 父节点隐藏
前端·javascript·vue.js
fkalis33 分钟前
【海外SRC漏洞挖掘】谷歌语法发现XSS+Waf Bypass
前端·xss
zxg_神说要有光1 小时前
自由职业第二年,我忘记了为什么出发
前端·javascript·程序员
袋鼠云数栈前端1 小时前
如何手写实现 JSON Parser
css·sandbox
陈随易2 小时前
农村程序员-关于小孩教育的思考
前端·后端·程序员
云深时现月2 小时前
jenkins使用cli发行uni-app到h5
前端·uni-app·jenkins
昨天今天明天好多天2 小时前
【Node.js]
前端·node.js