【小白学HTML5】盒模型_第一讲

任何一个网站都是由一个一个的矩形框(小盒子)组成:拿京东来说:

一个盒子的基本属性有:width、height、padding、margin、border,分别为宽、高、内边距、外边距、边框。

padding:padding-left 左内边距、padding-rigth 右内边距、padding-top 上内边距、padding-bottom 下内边距

magin:magin-left 左外边距、magin-rigth 右外边距、magin-top 上外边距、magin-bottom 下外边距

在计算盒子的大小时,浏览器只计算到border,也就是边框的大小,不会计算盒子的margin,但是可以通过属性:box-sizing来设置盒子大小的计算方式。

box-sizing:content-box,默认值content-box,不计算margin的值的,只计算到border。

box-sizing:border-box,设置为盒子的实际大小,会缩放内容区的大小。目前比较流行这种写法。

相关推荐
kgduu2 分钟前
js之错误处理
开发语言·前端·javascript
德莱厄斯2 分钟前
Milkup 技术内幕:一个 Typora 风格的即时渲染 Markdown 编辑器是怎样炼成的
前端·javascript·markdown
Mintopia12 分钟前
架构师的心胸:把分歧装进系统,把人放在方案前
前端·架构
亿元程序员13 分钟前
不是说现在AI很牛吗,怎么连个高光Shader效果都写不好?
前端
孟祥_成都16 分钟前
金三银四,一个面试官连连夸赞的个人网页技术分享
前端·面试·three.js
兆子龙23 分钟前
Vite 插件系统与构建流水线源码解析:从 Rollup 插件到 HMR
前端
代码老中医29 分钟前
Node_modules 比黑洞还重,我们的硬盘到底做错了什么?
前端
兆子龙29 分钟前
Vue 3 响应式系统 Reactivity 源码深度解析:从 ref 到 effect 的完整链路
前端
用户2986985301432 分钟前
告别手动复制:.NET 将网页数据一键导出为 Excel
后端·html·excel
Smoothcloud_润云32 分钟前
GORM 事务管理与 Repository 模式完整指南
前端·数据库·代码规范