摘要：概览盒模型也叫框模型，规定了元素框处理元素内容内边距边框和外边距的方式。不幸的是，和在使用自己的非标准模型。当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。如果缺少右外边距的值，则使用上外边距的值。
概览
CSS 盒模型 (Box Model)也叫框模型，规定了元素框处理元素 内容、 内边距、 边框 和 外边距 的方式。
元素框的最内部分是实际的内容，直接包围内容的是内边距，内边距的边缘是边框，边框以外是外边距，外边距是透明的，因此不会遮挡其后的任何元素。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表（浏览器内置样式表）设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。
* {
margin: 0;
padding: 0;
}
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
浏览器兼容性
大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE 5.X 和 6 在使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
外边距 margin围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
可选值设置外边距的最简单的方法就是使用 margin 属性，该属性接受任何长度单位，可以是像素（px）、英寸（in）、毫米（mm）、em和auto。
在 h1 元素的各个边上设置了 1/4 英寸宽的空白
h1 {margin : 0.25in;}
为 h1 元素的四个边分别定义不同的外边距
h1 {margin : 10px 0px 15px 5px;}
这些值的顺序是从上外边距 (margin-top) 开始围着元素顺时针旋转的：
margin: top right bottom left
等价于
h1 {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 15px;
}
为 margin 设置一个百分比数值
p {margin : 10%;}
百分数是相对于父元素的 width 计算的。
值复制值复制是指 margin 的四个方位属性值部分缺省时的自动填充。
四个值部分缺省，有如下三种情况：
1 个值，其他 3 个值都由这个值（上外边距）复制得到
p {margin: 1px;} /* 等价于 1px 1px 1px 1px */
2 个值，第 3 个值（下外边距）由第 1 个值（上外边距）复制得到，第 4 个值（左外边距）由第 2 个值（右外边距）复制得到
h2 {margin: 0.5em 1em;} /* 等价于 0.5em 1em 0.5em 1em */
3 个值，第 4 个值（左外边距）由第 2 个值（右外边距）复制得到
h1 {margin: 0.25em 1em 0.5em;} /* 等价于 0.25em 1em 0.5em 1em */
归纳起来就是，上下对应，左右对应，第一个值是 top.
值合并外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和下外边距也会发生合并。请看下图：
外边距甚至可以与自身发生合并，假设有一个空元素，它有外边距，但是没有边框或内边距。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
外边距合并既能够节省页面空间又能使页面更加美观。
注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
边框 border元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。
CSS 边框有着丰富的内容，为了避免此页面过长，特将其独立出来介绍，传送门。
内边距 padding元素的内边距是在边框和内容区之间。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
内边距的使用与外边距的使用类似。
给 h1 元素的各边添加 10 像素的内边距
h1 {padding: 10px;}
您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值
h1 {padding: 10px 0.25em 2ex 20%;}
同样可以分别设置四个方位
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
内边距与外边距一样，遵循值复制的规则。
如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111149.html
摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。从元素的布局特性来分，主要可以分为三类元素块级元素，行内元素，行内块级元素。行内级元素属性取的元素。 深入css布局（1）—— 盒模型 & 元素分类 在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们...
摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。规定元素和属性是包含元素的边框内边距内容的。后来微软也慢慢转向了的标准，在以后支持了标准盒模型。行内级元素属性取的元素。 深入css布局（1）—— 盒模型 & 元素分类 在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重...
摘要：引言盒模型是页面布局中经常会使用到的一种思维模型，将等概念运用日常生活中的盒子来形容，因此称之为盒模型。一什么是盒模型我们首先来看一下在中盒模型的样子我们可以清楚的看出，盒模型由内容内边距边框外边距组成。 引言 CSS盒模型是页面布局中经常会使用到的一种思维模型，将margin、border、padding、content等概念运用日常生活中的盒子来形容，因此称之为盒模型。 一、什么是...
摘要：引言盒模型是页面布局中经常会使用到的一种思维模型，将等概念运用日常生活中的盒子来形容，因此称之为盒模型。一什么是盒模型我们首先来看一下在中盒模型的样子我们可以清楚的看出，盒模型由内容内边距边框外边距组成。 引言 CSS盒模型是页面布局中经常会使用到的一种思维模型，将margin、border、padding、content等概念运用日常生活中的盒子来形容，因此称之为盒模型。 一、什么是...
摘要：最近工作中有机会复习一下的基本知识，那么先从的盒模型开始吧，因为这是当时进现在这家公司笔试的第一题怎么把盒模型变成标准盒模型嗯，有办法，就可以啦。具体参见链接描述常见的盒模型分两类怪异盒模型和标准盒模型，两种盒模型有着很大的不同。 最近工作中有机会复习一下css的基本知识，那么先从css的盒模型开始吧，因为这是当时进现在这家公司笔试的第一题：怎么把IE盒模型变成标准盒模型？嗯，有办法，...
摘要：盒模型与本文为收集整理总结网上资源旨在系统复习盒模型与节省复习时间阅读分钟什么是盒模型每一个文档中，每个元素都被表示为一个矩形的盒子它都会具有内容区盒模型主要分两种标准盒模型盒模型怪异盒模型两者的区别标准盒模型的宽高则为内容区域的宽高盒模型 css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中，每...
阅读 786·2023-04-25 23:50
阅读 1662·2021-11-19 09:40
阅读 435·2019-08-30 13:50
阅读 2606·2019-08-29 17:11
阅读 937·2019-08-29 16:37
阅读 2868·2019-08-29 12:54
阅读 2671·2019-08-28 18:17
阅读 2510·2019-08-26 16:55
