在线客服
扫描二维码
下载博学谷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能找到工作吗？当然可以，像是爬虫抓取、测试都是可以从事的的方向。还需要学习什么技能？想要有广阔的发展空间，最好还是结合web开发、云计算、人工智能、自动化运维一起学，只有学会利用Python，把它作为一个语言工具才能最大发挥它的价值。下面我们来看看Python适合与哪些技能一起学。
6776
2019-09-27 21:45:10
Python单行代码实现具体功能
众所周知Python编程语言应用广泛，组我诶一门优秀的编程特城的函数式编程语言，Python可以大大提高Python开发工程师编程速度并且改进软件质量。与此同时很多同学们都听说过Python编程语言易学易用，具体在那些方面有所体现呢？小编在这里为大家提供几条Python编程中单行代码就可以实现具体功能的案例。让大家对Python的强大有更深入的了解。
17208
2019-12-13 18:58:37
为什么Python现在这么火？
Python可以说是目前最火的网红编程语言，虽然它在近几年在逐渐流行起来，但其实它已经发展了近三十年。那么，为什么Python现在这么火呢？一方面人工智能和大数据的崛起带红了Python，另一方面无论是软件开发者还是非编程工作者都发现了在当下这个时代掌握一门编程语言的必要性。而Python简洁的语法，让它备受学习者的青睐！
5002
2020-05-08 11:08:09
学完Python可以做什么?Python从业岗位
学完Python可以做什么?Python语言很有优势，可以从事的岗位也非常多，如、Linux运维、Python Web网站工程师、Python自动化测试、数据分析、人工智能等工作岗位。Python在是个实用工具，解决某一领域的问题都可以用Python来胶合相关的东西，或者是利用其强大的库处理得到的信息。
4219
2020-06-11 11:33:39
Python程序编写技巧 提升工作效率
Python程序编写技巧提升工作效率，在学习和工作过程中掌握一些小技巧可以大大提高工作的效率，接下来小编将介绍编程惯用法、基础用法、库的使用、内部机制、使用工具辅助项目开发、性能剖析与优化等方面的编程技巧。
4009
2020-06-29 14:23:44
