html5--6-28 css盒模型4

html5--6-28 css盒模型4

实例

学习要点

• 了解盒模型
• 元素内容、内边距、边框 和 外边距

---

了解盒模型的概念：

• CSS 盒模型规定了处理元素内容、内边距、边框 和 外边距 的方式。
• 最内部分是元素内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距。

元素的尺寸:

• height 设置元素的高度。属性值：auto：默认。/px、cm 等单位定义高度。/百分比
• width 设置元素的宽度属性值：auto：默认。/px、cm 等单位定义高度。/百分比
• max-height 设置元素的最大高度。属性值：auto：默认。/px、cm 等单位定义高度。/百分比
• max-width 设置元素的最大宽度。属性值：auto：默认。/px、cm 等单位定义高度。/百分比
• min-height 设置元素的最小高度。属性值：auto：默认。/px、cm 等单位定义高度。/百分比
• min-width 设置元素的最小宽度。属性值：auto：默认。/px、cm 等单位定义高度。/百分比
• 当属性值用百分比时是相对于父元素的尺寸来说的。
• 最大最小宽高主要用于动态控制缩放等情况下，这里暂做了解。

padding 属性：元素的内边距:

• padding-top 属性设置元素的上内边距（空间）。
• padding-right 属性设置元素右内边距（空白）。
• padding-bottom 属性设置元素的下内边距（底部空白）。
• padding-left 属性设置元素左内边距（空白）。
• padding 属性接受长度值或百分比值，但不允许使用负值。
• padding * 同时设定四个边距
• padding ** 分别设定上下、左右边距
• padding *** 分别设定上、左右、下边距
• padding **** 分别设定上、右、下、左边距

border属性：元素的边框，是围绕元素内容和内边距的一条或多条线。

• border属性：

可以按顺序设置如下属性：

• border-width
• border-style
• solid 定义实线。/dotted 定义点状边框/double 定义双线......
• border-color
• 关于元素的边框后边课程还会详细讲解，暂时先简单了解。

margin 属性：元素的外边距:

• 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
• margin-top 属性设置元素的上外边距（空间）。
• margin-right 属性设置元素外内边距（空白）。
• margin-bottom 属性设置元素的下外边距（底部空白）。
• margin-left 属性设置元素左外边距（空白）。
• margin 属性接受长度值或百分比值，允许使用负值。
• margin * 同时设定四个外边距
• margin ** 分别设定上下、左右外边距
• margin *** 分别设定上、左右、下外边距
• margin **** 分别设定上、右、下、左外边距

外边距的合并

• 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
• 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

溢出的处理

• overflow 如果内容溢出了元素内容区域，是否对内容的边缘进行裁剪。
• overflow-x 如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。
• overflow-y 如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。
• visible 不裁剪内容，可能会显示在内容框之外。
• hidden 裁剪内容 - 不提供滚动机制。
• scroll 裁剪内容 - 提供滚动机制。
• auto 如果溢出框，则应该提供滚动机制。