框模型与外边距

mac2024-11-14  11

1. 框模型

框:
页面一切元素皆为框。
框模型:
Box-Model,定义了元素框处理元素内容, 内边距以及外边距的方式。

对象实际宽度=左右外边距 + 左右边框 + 左右 内边距 + width; 对象实际高度=上下外边距 + 上下边框 + 上下内边距 + height

2. 外边距

1. 什么是外边距:
围绕在元素边框周围的空白区域就是外边距正常情况下, 外边距是不允许被其他元素所占据的。
2. 语法:
四个方向外边距: margin:value; 单边设置: margin-top:上外边距; margin-right: 右外边距; margin-bottom: 下外边距; margin-left: 左外边距;

取值:

1. 单位可以为:px margin-top:20px; margin:15px; 2. 单位可以为 % 3. 取值为 auto 左右外边距可以取值为 auto, 允许让会计元素水平 居中显示 4. 取值为 负值 移动元素 左外边距取值为负: 元素向左移动 上外边距取值为负: 元素向上移动 左外边距取值为负: 元素向上移动 上外边距取值为正: 元素向下移动
3. 外边距的简洁写法:
margin:value;四个方向外边距相同 margin:v1 v2 v3;v1上下外边距 v2左右外边距 margin:v1 v2 v3;v1上 v2左右 v3下 margin:v1 v2 v3 v4;
4. 默认具备外边距的元素
编写网页时,一般会进行CSS重写,及改变一些元素的 默认样式。比如 取消某些元素的默认外边距。

这是有默认外边距的

命令显示图:

示例网页图:

这是解决外边距的

命令显示图:

示例网页图:

5.
1. 外边距合并:
当两个垂直外边距相遇时,他们将形成一个外边距, 称为外边距合并。 合并后的外边距的高度等于两个外边距中高度较大者。

合并后:

命令显示图:

示例网页图:

2. 外边距溢出:

在某些特殊情况下,为子元素设置上下外边距时, 有可能会作用到父元素上

特殊情况:

1. 父元素没有上或下边框‘ 2. 必须为第一个子元素或最后一个子元素设置外边距时

解决方案:

1. 为父元素增加边框(上或下) 2. 在父元素中增加子元素<table>到第一个子元素位置处 3. 通过设置父元素的上内边距来取代子元素的上外边距
3. 外行内元素和行内块元素设置外边距为:
行内块元素设置上下外边距整行内容 都跟着变。

这是有溢出的 命令显示图:

示例网页图

解决溢出的图示

示例网页图:

最新回复(0)