Css3之基础-4 Css 框模型、内边距与外边距

一、CSS 框模型

框模型 - 框模型(Box Model)定义了元素框处理元素内容、内边距、边框和外边距的方式


- width 和 height指内容区域的宽度和高度

- 增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸









二、CSS 外边距

外边距概念 - 外边距: 围绕在元素边框周围的空白区域 - 会在元素外创建额外的空白
- 外边距是透明的




外边距 margin
- 外边距: 与下一个元素之间的空间量 - margin: value; - 单边设置 - margin-top/right/bottom/left : value; - 外边距的属性值可能为px(像素)，百分比(%)或自动(auto)，也可以为负值



- 默认情况下，以下 HTML 块级元素都存在外边距
- body
- h1,h2,h3,h4,h5,h6
- p...
- 声明 margin 属性，可以覆盖默认样式



- margin 可取值为 auto,由浏览器计算外边距
- 实现水平方向居中显示的效果




外边距的简洁写法
- 外边距的简洁写法有如下几种 - margin:value(四个方向相同); - margin:value(上下) value(左右); - margin:value(上) value(左右) value(下);
- margin:value(上) value(右) value(下) value(左);




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



三、CSS 内边距

内边距概念 - 内边距: 内容区域和边框之间的空间 - 会扩大元素边框所占用的区域



内边距 padding
- 内边距: 内容与框线之间的距离 - padding : value; - 内边距属性值可以为像素、百分比，但不能为负数
- 单边设置
- padding-top/right/bottom/left : value;

内边距的简洁写法 - 内边距的简洁写法有如下几种 - padding:value(四个方向相同); - padding:value(上下) value(左右); - padding:value(上) value(左右) value(下); - padding:value(上) value(右) value(下) value(左);

总结：本章内容主要介绍了 Css 框模型、内边距与外边距。