洞察盒子模型尺寸设置及代码书写格式

shitouchengr

盒子模型尺寸设置及代码书写格式介绍，子模型就是把HTML页面的元素看作一个矩形盒子，矩形盒子是由内容()、内边距()、边框()、外边距()四部分组成，需要掌握盒子模型中的各个属性设置。[url=http:///www.heikw.cn/]爱站云[/url]的最新消息可以到我们平台网站了解一下，也可以咨询客服人员进行详细的解答！[align=center]

                               
登录/注册后可看大图

[/align]



盒子模型学习目标：



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



1、盒子模型是什么



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







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



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



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



盒子的边框()



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



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



设置宽高：







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



设置边框:







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



说明:



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



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



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







设置内间距



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







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







四个方向的内边距值。*



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







设置外间距



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



盒子的真尺寸



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



盒子宽度=+左右+左右



盒子高度=+上下+上下



盒子模型总结：



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



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



?：内边距。



?：边框。



?：外边距



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