7.1 元素框基础
不管什么元素，CSS 都假定每个元素都生成一个或多个矩形，我们称之为元素框（element box）。
各元素框的中心是内容区域，四周有可选的内边距、边框、轮廓和外边距。之所以说这些区域是可选的，是因为它们的宽度都可以设为零，即把它们从元素框上删除。
外边距、边框和内边距都分别针对每一边的属性。margin（外边距） 、 border（边框） 、 padding（内边距）。
外边距区域始终是透明的，因此透过它能看到父元素。即margin 始终是透明的，无法设置颜色。
内边距不能是负值，但是外边距可以。 即padding 值不能是负值，但margin 值可以。
7.1.1 重要概念概览
常规流动： 即渲染西方语言时，从左至右，从上到下的顺序，以及传统的HTML 文档采用的文本布局方式。
非置换元素： 内容包含在文档中的元素。
置换元素： 为其他内容占位的元素（内容不在文档中）。多数表单元素也是置换元素，如 <input type="radio"> 。
根元素：位于文档树顶端的元素。在HTML 中就是html 。
块级框： 在常规流动模式下，块级框在框体前后都“换行”，因此块级框是纵向堆叠的。display: block; 声明能把任何元素生成的框体变成块级框。
行内框： strong 或 span 等元素生成的框体。行内框前后不换行。display: inline 声明能把任何元素生成的框体变成行内框。
行内块级框： 内部特征像块级框，外部特征像行内框。行内块级框的行为与置换元素相似，但不完全相同。比如说把一个 div 元素像行内图像那样插入一行文本，这样一想你就明白了。
单元格框：略。
7.1.2 容纳块（p264）
还有一种框体需要深入说明，因为涉及的知识够多，所以单开一节。这种框体是容纳块。
每个元素的框体都是相对容纳块放置，说的简单点就是，容纳块是元素框体的“布局上下文”。
为了确定框体的容纳块，CSS定义了一些列规则。
在使用常规流动方式渲染的西文文本中，容纳块由离元素最近的那个生成列表项目或块级框的祖辈元素的边界构成。
如：
<body>
<!-- p元素的块级框的容纳块是div元素的块级框，因为这是祖辈元素的框体中，
离p元素最近的，而且生成的是块级框或或列表项目。类似的，div 元素的容纳块是body 元素的框体。
因此，p元素的布局依赖 div 元素的布局，而 div 元素的布局又依赖 body 元素的布局
-->
<div>
<p>This is a paragraph.</p>
</div>
</body>
html 对应的是初始容纳块，它的独到之处是，其尺寸由视区决定，而非根元素中内容的尺寸。初始容纳块与其他容纳块的差异极小，而且通常并不重要，但是你要知道有这么一种容纳块。
7.2 调整元素的显示方式
为 display 属性设值可以影响用户代理显示元素的方式。
7.2.1 改变显示方式
通过display 可以改变元素的显示方式，但不改变元素的本性。也就是说，把段落生成的框体变成行内框，并不会把段落变成行内元素。（改变的只是框体，不是元素）
了解这些知识后，下面深入讨论不同的宽体： 块级框， 行内框， 行内块级框，列表项目框。
7.2.2 块级框
box-sizing 属性能作用于所有能设定width 或 height的元素，它定义了应该如何计算一个元素的总宽度和总高度。
在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。
box-sizing 属性可以被用来调整这些表现:
content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
注: border-box不包含margin。
<!DOCTYPE html>
<html>
<head>
<style>
.d1,
.d3,
.d5 {
margin: 26px;
height: 100px;
width: 100px;
border: 2px solid red;
}
.d2,
.d4,
.d6 {
margin-top: 15px;
height: 60px;
width: 100%;
}
.d2 {
border: 5px solid grey;
margin-left: -5px;
/* 默认值
content-box就是元素的width和height决定了元素的宽高，
这意味着元素的border和padding等不能算在元素的width和height中 ，
padding和border的改变不能改变width和height的值。
即元素的width 属性值 = content宽
*/
box-sizing: content-box;
}
.d4 {
border: 5px solid grey;
/* 设置border-box 时，可以理解为，固定了border 的边缘，不会再向外部扩展，只会向内和content 分高宽值
即padding左右宽之间的距离不变
即元素的width 属性值 = 左右border宽 + 左右padding宽 + content宽
*/
box-sizing: border-box;
}
.d6 {
border: 5px solid grey;
/* 元素的width 属性值 = 左右padding宽 + content宽 */
box-sizing: padding-box;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2"></div>
</div>
<div class="d3">
<div class="d4"></div>
</div>
<div class="d5">
<div class="d6"></div>
</div>
</body>
</html>
7.2.3 横向格式化
使用content-box 时，为 width 设定的值是内容区的宽度，而不是整个元素框的可见宽度。
设为 border-box 时，这两种情况下，常规流动方式下块级框各组成部分的横向尺寸始终等于容纳块的宽度。
7.2.4 横向格式化属性
横向格式化属性有七个，margin-left ， border-left ， padding-left ， width ，padding-right ， border-right ， margin-right 。
这七个属性影响块级框的横向布局，这七个属性的值加在一起等于元素容纳块的宽度。而这一宽度通常影响块级元素的父元素的 width 值（因为块级元素的父元素几乎都是块级元素）。
这七个属性只有内容区和margin 的宽度可以设置值为 auto （即width 和 margin 要么设置为 auto ，要么设置具值）。剩下的属性要么设置具体值，要么使用默认值（零）。
7.2.5 使用 auto
假设七个属性值一定，比如是500px ， width 为100px ， margin-right 为 100px ， padding 和 border 未设置（即为零），margin-left 的值设为 auto ，那么它最终的值是 300px 。
因为auto 的那个属性值的具体长度要能满足元素框的宽度等于父元素的宽度。
从某种意义上说， auto 可用于补全综合所缺的尺寸。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 500px;
}
p {
margin-right: 100px;
margin-left: auto;
width: 100px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
按照CSS 权威指南的说法，如果上述代码中的 margin-left 设为 100px 的话， margin-right 将被强制设为 auto ， 窗口表现上似乎是这样，但盒模型没有显示，只是提示 margin-right 的值依旧为 100px 。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 500px;
height: 60px;
background-color: antiquewhite;
}
p {
margin-left: 100px;
margin-right: 100px;
width: 100px;
height: 36px;
background-color: azure;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
如果左右margin 都设为 auto ，那么 width 的值是满足总宽度所需的任何值。（width在父元素中会左右居中）
如果三个属性值都设置为 auto ，那么 width 将等于 父元素 width 。
如果设置margin-left 为具体值，width 设为 auto ，不设置margin-right ，那么width 将填充剩下所以的空间。
7.2.6 多个auto 、7.2.7 负外边距
略
7.2.8 百分数
百分数的意思是，把元素的宽度设为容纳块宽度的占比。
7.2.9 置换元素
块级置换元素的处理方式，前面的针对非置换块级元素的规则都成立，不过有个例外： width 为 auto 时，置换元素的 width 等于内容自身的宽度。
7.2.10 纵向格式化
略
7.2.11 纵向格式化属性
在常规流动模式下，如果把margin-top 或 margin-bottom 设置为 auto ，二者都自动计算为 0 ， 这也就意味着流动模式下，元素无法轻易在容纳块中纵向居中。
height 要么设为 auto ，要么设为某种类型的非负值。
7.2.12 百分数高度
在常规流动模式下，如果把块级框的高度设为百分数，百分数是相对框体的容纳块的高度而言的。
然而，如果未明确容纳块的高度，那么百分数高度将被重置为 auto 。
如果把margin-top 或 margin-bottom 设为百分数，那么依旧相对于容纳块的width 属性值。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: antiquewhite;
}
p {
margin-left: 25%;
margin-right: 25%;
/* 查看盒模型，margin-top 值为 10% * 100px(容纳块width) margin-bottom亦然 */
margin-top: 10%;
margin-bottom: 25%;
width: auto;
height: 10px;
background-color: rgb(97, 15, 230);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
7.2.13 自动调整高度
在常规流动模式下，声明 height: auto 的块级框是最简单的，此时，框体的高度恰好能放得下里面的内容。
常规流动模式下的块级框如果高度是自动调整的，而且子代都是块级元素，那么默认的高度是从最上边的那个块级子代元素的上边框外侧（border-top）到最下边那个块级子代元素的下边框外侧之间的距离。
因此，子元素的外边距（margin）游离在所属元素的外部。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: antiquewhite;
}
p {
height: auto;
background-color: rgb(97, 15, 230);
}
</style>
</head>
<body>
<div><!-- 两个 p 元素只能看到一个，因为此时的元素 height 刚好能放下里面的内容，
第二个p 元素内容为空，故而height 为 0 ，换言之，值为auto 时，浏览器根据内容自动调节高度
-->
<p>我歌且谣</p>
<p></p>
</div>
</body>
</html>
7.2.14 折叠纵向外边距
纵向格式化的另一个重要特征是，相邻的纵向外边距会折叠。只有外边距有这种折叠行为。较小的外边距会被较大的外边距折叠（重叠）。
标签：11,p262,--,border,元素,100px,width,auto,margin From： https://www.cnblogs.com/wgqy/p/17081239.html