我要精通前端-块级元素和行内元素深入学习笔记

真的发现前端天天增删改查，真的是问一些比较细节的知识，我真的懂么

1、块级元素间的margin会重叠，

<div class="head"></div>
<div class="content"></div>

.head {
			margin: 5px;
			border: 10px solid black;
			padding: 3px;
			width: 100px;
			height: 100px;
			background: red;
		}
		.content {
			margin: 5px;
			border: 10px solid black;
			padding: 3px;
			width: 100px;
			height: 100px;
			background: red;
		}

理想化的状态我以为2个块级元素之间的距离是10px，但是却不是这样，而是只有5px，而且2个设置的margin重叠了

两个盒子之间的外边距距离并没有相加反而是重叠了。这是为什么呢，看了看官方文档才明白

当两个相邻的div元素上下存在外边距时，它们的外边距会发生重叠。这种情况下，两个div元素的外边距将会合并成一个外边距，取其中较大的那个值作为最终的外边距。

怎么解决上下外边距重叠问题

1、使用内边距（padding）替代外边距。

2、将元素转为行级元素或者行块级元素

3、给其后的元素设置float浮动

二、行内元素

<span class="content"></span>

.content {
			margin: 5px;
			border: 10px solid black;
			padding-left: 100px;
			width: 100px;
			height: 100px;
			background: red;
		}

就会发现，我设置的样式有一些直接失效了，大小没有了作用，而且有一部分边框也被遮挡住了。。这个也是完全和我想的不一样，我想的可能就是行内元素那一定是行内的。其实这个是因为行内元素默认的display属性值为"inline"‌。在CSS中，每个元素都有一个默认的display属性值，这取决于元素的类型。例如，
元素的默认display属性值为"block"，而 元素的默认display属性值为"inline"‌。

行内元素的特点

行内元素（inline elements）通常不会独占一行，而是与其他元素在同一行显示。它们的特点包括：

‌1.不独占一行‌：行内元素不会导致文本换行，而是与其他行内元素并排显示。

‌2.宽度和高度不可设置‌：行内元素不能设置宽度和高度，其宽度和高度由内容决定。只能通过设置其内边距，边框，外边距来调整它们的水平距离。可以通过边框，垂直方向上的内边距来设置内联元素的高度。

‌3.可以包含在块级元素中‌：行内元素可以包含在块级元素中，并且不会影响块级元素的宽度和高度。

三、行内框理解，

根据元素自身的特点，行内级元素又被分为非替换元素 和替换元素。

非替换元素：直接包含在文档中，浏览器在渲染页面时，会读取元素的内容，并直接显示在页面上。说白了，非替换元素的内容就是文本。如：

<span>这里是span元素的内容</span>

替换元素：仅仅是内容的占位符，它只个空元素，并没有实际内容。浏览器在渲染页面时，会根据元素及相关属性，来判断要显示的内容。替换元素的一个典型例子就是 img 元素。如：

<img src = "logo.jpg" />

在渲染页面时，浏览器发现是 img 元素，就会读取其 src 属性的值，并按照 src 属性的指示，读取图像文件 logo.jpg 的内容，显示在 img 元素所在的位置。如果查看HTML代码，却看不到图像的实际内容。

大多数的表单元素，如 input、textarea、select 等，都是替换元素。通过CSS的content属性插入的对象，是匿名替换元素。

1.什么情况下会生成行内框

如果一个元素的 display 属性的取值为 inline、inline-block、inline-table、inline-flex，它就会生成一个行内级框：display 属性值为 inline 的非替换元素生成的行内级框，称作行内框；行内级替换元素、行内块元素（inline-block）、行内表格元素（inline-table）、行内弹性盒（inline-flex），生成的行内级框，称作原子行内级框（Atomic Inline-level Box）。

1.1 先说inline

**特点：**行内框的内容允许被拆分，并在多行显示。假设在一个段落中，有一个 span 元素和一个 a 元素：

<p>
<span>我是 display 属性值为 inline 的非替换元素，</span>
<a href="#">我是超超超超级链接</a>
</p>

由于默认情况下，span 元素和 a 元素都是 display 属性值为 inline 的非替换元素，它们都会生成行内框。当一行内无法容纳所有行内级框（一行无法放下所有行内元素标签的时候），在容器的边界处会发生换行。换行时，行内框的内容允许被拆分，在多行显示。如，span 元素的内容被拆分在多行显示。

但是这里其实有一个例外，如果行内元素都是数字和字母的时候就会一直往后追加，并不会换行，这个时候要想让他换行就需要用一些样式进行控制让其进行换行。

1.2标题inline-block原子行内级框

而原子行内级框具有原子性，其内容永远作为一个整体，在同一行内显示，不允许被拆分。这就是它之所以被称为原子行内级框的理由。当然，这是有道理的，想想你有什么理由要把一幅图像、或一个文本输入框、或一个表格拆分开来（换行）进行显示。也就是说图片就算是很大也不会被拆开

如果把 a 元素的 display 属性设置为 inline-block，它就会生成原子行内级框。当选中这个元素的时候，其实就是把这2行当成一个整体当成一块，就算没有文字内容的地方也会被块选中。

一个行内非替换元素内容区的宽度，仅由其内容决定，而其高度由 font-size 属性决定，并且等于 font-size 属性的值。width 和 height 属性对行内非替换元素无效，因此无法通过 width 和 height 属性，来改变其宽度和高度。假设一个行内级元素 span 的 font-size为 24px，则其内容区的高度就是 24px。

如果 line-height 大于 font-size，则行距为正值，使行内框的高度增加。把上述 span元素的 line-height 属性值设置为 36px：

span {
   font-size: 24px;
   line-height: 36px;
   border: 1px dashed #ccc;
}

<span class="head">1111111111111</span>

由上述规则可知，行内框的高度为 36px，内容区的高度为 24px，行距 = line-height - font-size = 12px，半行距为 6px，分别加到其内容区的顶部和底部。

如果 line-height 小于 font-size，则行距为负值，使行内框的高度减小。假设把上述 span元素的 line-height 属性值设置为 12px：

span {

font-size: 24px;

line-height: 12px;

border: 1px dashed #ccc;

}

由上述规则可知，行内框的高度为 12px，内容区的高度为 24px，行距 = line-height - font-size = -12px，半行距为 -6px，分别加到其内容区的顶部和底部。

从上图可以看出，如果 line-height 小于 font-size，则行内框的高度小于内容区的高度，使内容溢出到行内框的外面。在堆叠的行中，这种情况会导致相邻两行的内容发生重叠。

1.2.1 原子行内级框可以设置宽度或者是高度

原子行内级框的情况则完全不同，不仅可以通过 width 和 height 属性来设置框内容区的宽度和高度，而且可以通过垂直方向的外边距、边框、内边距，来增加框的高度。

假设有一幅图像，其固有尺寸是 20px20px，通过width 和 height 属性，将其显示尺寸设置为40px40px：

<img src="img/biggrin.gif">

img {
   width: 40px;
   height: 40px;
   border: 1px dashed #ccc;
}

此时，图像的显示尺寸将是 40px40px，而不是其固有尺寸 20px20px。

当然，如果没有显式声明的 width 和 height 属性，内容区的宽度则由其内容决定。也可以只设置 width 或 height 属性中的某一个，这样的话，另一个值将会根据内容的尺寸自动调整。

假设为上述的图像添加 40px 的垂直内边距和 10px的边框，由于内边距和边框都会增加框的高度，则得到框的高度就是 140px

小总结：因此可以说，除了在行内显示外，原子行内级框的表现，更像一个块级框。然而，无论是行内框，还是原子行内级框，水平方向的外边距、边框、内边距对它们都有效，都会增加它们的宽度。