在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
盒子模型尺寸设置及代码书写格式介绍，子模型就是把HTML页面的元素看作一个矩形盒子，矩形盒子是由内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成，需要掌握盒子模型中的各个属性设置。
盒子模型学习目标：
能够知道盒子模型中的各个属性的设置。
1、盒子模型是什么？
盒子模型即把HTML页面的元素看作一个矩形盒子，矩形盒子是由内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成。盒子模型示意图如下：
2、盒子模型相关样式属性
•盒子的内容宽度(width)，注意：不是盒子的宽度
•盒子的内容高度(height)，注意：不是盒子的高度
•盒子的边框(border)
•盒子内的内容和边框之间的间距(padding)
•盒子与盒子之间的间距(margin)
设置宽高：
设置盒子的宽高，此宽高是指盒子内容的宽高，不是盒子整体宽高
设置边框:
设置一边的边框，比如顶部边框，可以按如下设置：
说明:
其中10px表示线框的粗细；solid表示线性；red表示边框的颜色
设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。
四个边如果设置一样，可以将四个边的设置合并成一句：
设置内间距padding
设置盒子四边的内间距，可设置如下：
上面的设置可以简写如下：
四个方向的内边距值。 */
padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：
设置外间距margin
外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法。
盒子的真实尺寸
盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：
•盒子宽度 = width + padding左右 + border左右
•盒子高度 = height + padding上下 + border上下
盒子模型总结：
•盒子模型的5个主要样式属性◦width：内容的宽度(不是盒子的宽度)
◦height：内容的高度(不是盒子的高度)
◦padding：内边距。
◦border：边框。
◦margin：外边距
•盒子的真实尺寸只会受到宽度、高度、边框、内边距四个属性的影响，不会受到外边距属性的影响。
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
常用的初始HTML标签有哪些？书写规范是什么？
下一篇：
列表标签有几种？分别是什么？
相关推荐 更多
Python开发的内存管理机制及调优手段？
Python 的内存管理机制及调优手段？Python内存管理机制：引用计数、垃圾回收、内存池。垃圾回收 ：引用计数、标记清除、分代回收。引用计数进行高效的内存管理手段。调优手段：手动垃圾回收、调高垃圾回收阈值、避免循环引用。
9146
2019-06-28 14:59:42
Python学习网站有哪些？Python基础教程网站推荐
Python学习网站有哪些？Python基础教程网站推荐：菜鸟教程、PHP中文网、PHP中文网、W3C、Reddit、博学谷、python中文学习大本营、Python 3 Module of the Week、Welcome to Python for you and me、CheckiO is a code game coders。
8069
2019-09-23 19:06:02
如何有效提升数据分析效率？五大Python技巧
如何有效提升数据分析效率？相信这是所有数据分析工作者都想解决的问题。本文整理了五大Python技巧，分别是Pandas Profiling；使用 Cufflinks 和 Plotly 绘制 Pandas 数据；IPython 魔术命令；Jupyter 中的格式编排；Jupyter 快捷键。相信这些技巧能很好地帮助大家提高数据分析的效率，下面赶紧来看看吧！
6600
2019-11-10 15:41:09
怎么开始学习Python开发？0基础入门Python
怎么开始学习Python开发这个问题，在各大社群网站上常常看到想要转行IT，或者是想学习编程但不知如何开始的网友。对于新手来说，掌握Python基础是关键，了解HTML，CSS，JavaScript，Ajax，jQuery，React，SQL，服务器脚本等知识。
6085
2020-05-15 17:41:38
自学Python半年能学出来吗?能找工作吗？
自学Python分两种情况，零基础和有编程基础，零基础想要自学Python半年达到想找工作的水平比较难，零基础的人群参加系统的Python培训班至少5-6个月的时间才能具备相关岗位的专业技能；若有一定的编程基础想拓宽专业技能，有编程思维那么自学Python完全是没有问题的。
6674
2021-06-02 13:59:12
