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 .

相关推荐
陆枫Larry4 分钟前
小程序 scroll-view 设置 padding 右侧不生效?用一层包裹解决
前端
晴殇i19 分钟前
CommonJS 与 ES6 模块引入的区别详解
前端·javascript·面试
Selicens20 分钟前
git批量删除本地多余分支
前端·git·后端
wuhen_n25 分钟前
KeepAlive:组件缓存实现深度解析
前端·javascript·vue.js
前端付豪27 分钟前
Nest 项目小实践之图书展示和搜索
前端·node.js·nestjs
wuhen_n27 分钟前
Vue Router与响应式系统的集成
前端·javascript·vue.js
青青家的小灰灰1 小时前
金三银四面试官最想听的 React 答案:虚拟 DOM、Hooks 陷阱与大型列表优化
前端·react.js·面试
HelloReader1 小时前
深入理解 Tauri 架构与应用体积优化实战指南
前端
lemon_yyds1 小时前
vue 2 升级vue3 : ref 和 v-model 命名为同名
前端·vue.js
codingWhat1 小时前
小程序里「嵌」H5:一套完整可落地的 WebView 集成方案
前端·uni-app·webview