【小白学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,设置为盒子的实际大小,会缩放内容区的大小。目前比较流行这种写法。

相关推荐
gnip6 分钟前
js模拟重载
前端·javascript
Naturean9 分钟前
Web前端开发基础知识之查漏补缺
前端
curdcv_po10 分钟前
🔥 3D开发,自定义几何体 和 添加纹理
前端
单身汪v16 分钟前
告别混乱:前端时间与时区实用指南
前端·javascript
鹏程十八少41 分钟前
2. Android 深度剖析LeakCanary:从原理到实践的全方位指南
前端
我是ed42 分钟前
# cocos2 场景跳转传参
前端
shenshizhong42 分钟前
鸿蒙南向开发 编写一个简单子系统
前端·harmonyos
MrSkye42 分钟前
🔥深入浅出function.call() - 手写实现竟然只需要这5步!🔥
前端·javascript·面试
ZsTs1191 小时前
被面试官问 CSS 核心?10 个基础模块笔记(Flex/Sticky/BFC 全拆解 + 陷阱提示)
前端·面试
袋鱼不重1 小时前
手把手搭建Vue轮子从0到1:5. Ref 模块的实现
前端·vue.js·源码