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

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

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）。

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

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

由于默认情况下，span 元素和 a 元素都是 display 属性值为 inline 的非替换元素，它们都会生成行内框。当一行内无法容纳所有行内级框（一行无法放下所有行内元素标签的时候），在容器的边界处会发生换行。换行时，行内框的内容允许被拆分，在多行显示。如，span 元素的内容被拆分在多行显示。但是这里其实有一个例外，如果行内元素都是数字和字母的时候就会一直往后追加，并不会换行，这个时候要想让他换行就需要用一些样式进行控制。
在这里插入图片描述

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

如果把 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，分别加到其内容区的顶部和底部。

在这里插入图片描述