最MC论坛

标题: 新闻转载盒子模型尺寸设置及代码书写格式介绍 [打印本页]

作者: 五连环画 时间: 2022-1-27 06:35
标题: 新闻转载盒子模型尺寸设置及代码书写格式介绍

盒子模型尺寸设置及代码书写格式介绍，子模型就是把HTML页面的元素看作一个矩形盒子，矩形盒子是由内容()、内边距()、边框()、外边距()四部分组成，需要掌握盒子模型中的各个属性设置。

爱站云的相关问题可以到网站了解下，我们是业内领域专业的平台，您如果有需要可以咨询，相信可以帮到您，值得您的信赖！

盒子模型学习目标：

能够知道盒子模型中的各个属性的设置。

1、盒子模型是什么

盒子模型即把HTML页面的元素看作一个矩形盒子，矩形盒子是由内容()、内边距()、边框()、外边距()四部分组成。盒子模型示意图如下：

2、盒子模型相关样式属性

盒子的内容宽度()，注意：不是盒子的宽度

盒子的内容高度()，注意：不是盒子的高度

盒子的边框()

盒子内的内容和边框之间的间距()

盒子与盒子之间的间距()

设置宽高：

设置盒子的宽高，此宽高是指盒子内容的宽高，不是盒子整体宽高

设置边框:

设置一边的边框，比如顶部边框，可以按如下设置：

说明:

其中10表示线框的粗细；表示线性；表示边框的颜色

设置其它个边的方法和上面一样，把上面的''换成''就是设置左边，换成''就是设置右边，换成''就是设置底边。

四个边如果设置一样，可以将四个边的设置合并成一句：

设置内间距

设置盒子四边的内间距，可设置如下：

上面的设置可以简写如下：

四个方向的内边距值。*

后面还可以跟个值，2个值和1个值，它们分别设置的项目如下：

设置外间距

外边距的设置方法和的设置方法相同，将上面设置项中的''换成''就是外边距设置方法。

盒子的真尺寸

盒子的和值固定时，如果盒子增加和，盒子整体的尺寸会变大，所以盒子的真尺寸为：

盒子宽度=+左右+左右

盒子高度=+上下+上下

盒子模型总结：

盒子模型的5个主要样式属性?：内容的宽度(不是盒子的宽度)

?：内容的高度(不是盒子的高度)

?：内边距。

?：边框。

?：外边距

盒子的真尺寸只会受到宽度、高度、边框、内边距四个属性的影响，不会受到外边距属性的影响。

欢迎光临最MC论坛 (http://www.zuimc.com/)