讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > html教程 > 正文

什么是盒子模型？

零下一度
发布： 2017-06-28 09:16:47
原创
4008人浏览过

什么是盒子模型？

　　网页中的任何一个标签都相当于是一个盒子模型，而所有的盒子模型都存在五个必要的属性：width,height,padding,border,margin.

那么在一个网页中如何计算一个盒子模型实际所占的宽度呢？？？？

　　例如：

　　　　　

对于上面div所占宽度应该是：width+2*padding+2border=300+2*20+2*1=342px;

 

padding:内边距：内容和边框之间的距离。

padding的四个属性：padding-top,padding-bottom,padding-left,padding-right.

width:宽.

height:高.

border:边框.

常见的边框写法：border:1px solid #ccc;分别表示边框的宽度，线型，颜色。

常见线型有：solid(实线)，dashed(虚线),dotted(点线)。

边框的三个基本属性:border-width(边框的宽度),border-style(边框的线型),border-color(边框的颜色);

SmartB2B行业电子商务
SmartB2B行业电子商务

SmartB2B 是一款基于PHP、MySQL、Smarty的B2B行业电子商务网站管理系统，系统提供了供求模型、企业模型、产品模型、人才招聘模型、资讯模型等模块，适用于想在行业里取得领先地位的企业快速假设B2B网站，可以运行于Linux与Windows等多重服务器环境，安装方便，使用灵活。 系统使用当前流行的PHP语言开发，以MySQL为数据库，采用B/S架构，MVC模式开发。融入了模型化、模板

SmartB2B行业电子商务 0
查看详情 SmartB2B行业电子商务

maigin:外边距.

margin的四个基本属性：margin-top,margin-bottom,margin-left,margin-right.

在使用margin时需要注意的点:

　　1.塌陷:margin塌陷存在于块级元素之间。如果元素变成了行内元素或者行内块元素，则不会塌陷。如果元素脱离了标准文档流也不会塌陷。

　　2.通过margin让盒子居中：margin:0 auto;

　　　使用margin:0 auto 让盒子居中需注意：盒子必须要有明确的width。盒子必须处于标准文档流中。margin:0 auto是让盒子居中，而不是让盒子里面的内容居中。

　　　让盒子里面的文字居中可以使用：text-align:center;(向左向右：text-align:left/right;)

Tips:如果想要移动子元素的位置，非必要情况下推荐使用父元素的padding，而不是子元素的margin，如果必须使用margin，父元素就必须要有border

使用准则：在使用CSS的时候，尽可能的简写。

padding:10px 20px;  表示上下的padding为10px，左右的padding为20px。

padding:10px 20px 30px; 表示上的padding为10，下的padding为30px，左右的padding为20px.

padding：10px 20px 30px 40px;分别表示上，右，下，左的padding。

 

以上就是什么是盒子模型？的详细内容，更多请关注php中文网其它相关文章！

相关标签：
css

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：关于table布局的实例详解 下一篇：CSS中的onmouseover和hover有什么区别？
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
jimdo如何添加html5表单_jimdo表单html5代码嵌入与字段设置【实操】 可通过嵌入HTML5表单代码、启用字段验证属性、添加CSS样式反馈及替换提交按钮并绑定JS事件四种方式在Jimdo实现自定义表单行为。
2025-12-23 20:14:41
902
html5怎么写备注_HT5用给代码添加注释说明【备注】 HTML5注释需用，script内用//或//，style内用//，禁在属性值中写HTML注释，编辑器可识别折叠代码。
2025-12-23 20:14:02
928
响应式HTML5按钮适配不同屏幕方法【方法】 实现响应式HTML5按钮需五种方法：一、CSS媒体查询按max-width断点调整样式；二、用rem/vw等相对单位替代px；三、Flexbox控制容器与按钮伸缩；四、CSS变量配合requestAnimationFrame优化的JS动态适配；五、Tailwind等框架的响应式工具类。
2025-12-23 20:11:32
612
jimdo能否添加html5弹窗_jimdo弹窗html5代码实现与触发条件【技巧】 可在Jimdo实现HTML5弹窗的四种方法：一、用内置“弹窗链接”模块；二、通过HTML区块注入精简dialog结构（需配合内联CSS）；三、外部托管HTML+iframe嵌入；四、纯CSS:target伪类无JS方案。
2025-12-23 20:09:09
831
html5怎么跳出页面_HT5用location.href或a标签实现页面跳转跳出【跳出】 HTML5页面跳转有五种方法：一、location.href直接跳转并替换历史；二、location.replace()跳转且不保留当前页历史；三、a标签href跳转，支持新窗口及历史回退；四、a标签+JavaScript事件控制条件跳转；五、metarefresh实现定时自动跳转。
2025-12-23 20:06:03
553
html5文件运行不出来怎么回事_析html5文件运行失败原因【解析】 首先检查文件扩展名和编码格式，确保为.html且使用UTF-8编码；接着验证HTML5结构完整性，包含及正确闭合的标签；然后排查外部资源路径是否正确，利用开发者工具查看404错误；排除浏览器兼容性问题，优先在现代浏览器中测试并避免未广泛支持的API；检查JavaScript语法错误与执行顺序，确保脚本无报错并在DOM加载后运行；最后确认是否需本地服务器环境，对AJAX等功能使用Python等工具启动HTTP服务测试。
2025-12-23 20:04:02
375
html5空行怎么表示_HTML5用换行或p标签占位表示空行分隔【表示】 HTML5中空行通过块级元素默认外边距或显式空白结构实现：一、用空标签；二、用带margin的；三、用配合line-height；四、用CSS伪元素生成装饰性空行。
2025-12-23 20:01:02
137
html5怎么设置月份_HTML5用input type="month"让用户选择年月月份【设置】 HTML5的inputtype="month"提供原生年月选择器，格式为“YYYY-MM”，支持value默认值、min/max范围限制、name表单提交，并需JavaScript降级兼容旧浏览器。
2025-12-23 20:00:13
475
html5怎么打包运行_HT5用Webpack或Gulp打包后浏览器打开运行【打包】 应通过HTTP服务运行打包后的HTML5页面，而非双击打开：一、Webpack配webpack-dev-server启动本地服务；二、Gulp配BrowserSync提供实时重载；三、用Python/Node.js轻量HTTP工具托管dist目录；四、仅当必须双击运行时，才配置publicPath为‘./’并手动管理资源路径。
2025-12-23 19:49:02
176
Html5如何监听蓝牙_Html5蓝牙监听实现方法【硬件交互】 需通过WebBluetoothAPI实现蓝牙数据实时监听：一、用CharacteristicValueChanged事件监听支持Notify/Indicate的特征；二、轮询readValue()应对不支持通知的特征；三、监听GATT连接状态确保链路稳定；四、统一管理多特征订阅防内存泄漏。
2025-12-23 19:44:37
602
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部