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

相关推荐
今日无bug15 分钟前
从「拿来主义」到「亲手造轮子」:2 种 MCP 文件服务器写法对比
前端·node.js·mcp
xcyxiner16 分钟前
flutter 运行到模拟器上
android·前端·flutter
用户9210802628616 分钟前
从 COT 到 ThoughtChain:AI 应用为什么需要展示“思考过程”
前端
天真小巫17 分钟前
2026.8.23总结
前端·html
PedroQue9917 分钟前
RouterLink v2.5.0:H5端原生能力全面回归
前端·uni-app
八角丶20 分钟前
Node.js 异步上下文详解(实验驱动)
前端·node.js
用户21816970493023 分钟前
Flutter (二十五)视频播放
前端
半个落月23 分钟前
在浏览器里运行 DeepSeek-R1:推理、流式输出与停止生成(二)
前端·人工智能·react.js
绿岛之北24 分钟前
Electron 安全第四章: Preload 与 IPC
前端·electron
半个落月31 分钟前
在浏览器里运行 DeepSeek-R1:从 WebGPU 检测到模型加载(一)
前端·人工智能·react.js