css块级元素与行级元素

CSS中的块级元素（block-level elements）指的是默认情况下在页面中会生成一个独立的块，并且会占据一行或多行的元素。

块级元素的特点是：

每个块级元素都会从新的一行开始，并且会在上下都留有空间。
块级元素的宽度会默认填满父容器的宽度，除非设置了固定的宽度。
块级元素可以设置宽度、高度、内边距和外边距等属性。
块级元素可以包含内联元素和其他块级元素。

常见的块级元素有div、p、h1-h6、ul、ol、li、header、footer等。

行级元素（inline elements）指的是默认情况下不会生成一个独立的块，而是在同一行中显示的元素。

行级元素的特点是：

行级元素不会独占一行，而是根据其内容的大小决定所占据的空间。
行级元素的宽度只会根据内容的宽度来决定，默认不会填满父容器的宽度。
行级元素不可以设置宽度、高度、上下内边距和外边距，只能设置左右内边距和外边距。
行级元素只能包含其他行级元素。

常见的行级元素有span、a、em、strong、img、input等。

需要注意的是，通过CSS的display属性可以将块级元素或行级元素设置为其他类型，比如将块级元素设置为行级元素或将行级元素设置为块级元素。

css块级盒子与行级盒子

CSS中的块级盒子（block-level box）和行级盒子（inline-level box）是用来描述HTML元素在页面中的布局和排列方式的概念。

块级盒子是指那些默认情况下会独占一行的元素，例如<div>、<p>、<h1>-<h6>等。块级盒子会在垂直方向上一个接一个地排列，每个块级盒子会占据一行的宽度。

行级盒子是指那些默认情况下不会独占一行的元素，例如<span>、<a>、<strong>等。行级盒子会在水平方向上一个接一个地排列，直到一行放不下为止，然后自动换行。

需要注意的是，行级盒子可以包含其他行级盒子，但不能包含块级盒子。如果一个块级盒子嵌套在行级盒子中，那么该块级盒子会被视为行级盒子的一部分，并且会在同一行内排列。

通过CSS的布局属性（如display、float、position等）可以改变元素的盒子类型，从而改变元素在页面中的布局方式。 display属性用于控制元素的显示方式。常见的display属性值有：

block：元素以块级元素的形式显示，会独占一行。
inline：元素以行内元素的形式显示，不会独占一行。
inline-block：元素以行内块元素的形式显示，不会独占一行，但可以设置宽高。
none：元素不显示，完全隐藏。 display属性可以用于控制元素的显示方式，从而实现页面布局的需求。

行级排版

在CSS盒子模型中，行级排版上下文（IFC）是指一组行内元素在垂直方向上的排列方式。在IFC内，可以使用text-align属性来控制行内元素的水平对齐方式，而vertical-align属性则用于控制行内元素在垂直方向上的对齐方式。

对于text-align属性，可以使用以下值来指定水平对齐方式：

left：左对齐
right：右对齐
center：居中对齐
justify：两端对齐

而对于vertical-align属性，可以使用以下值来指定垂直对齐方式：

baseline：默认值，元素基线对齐
top：顶部对齐
middle：居中对齐
bottom：底部对齐
text-top：与文本的顶部对齐
text-bottom：与文本的底部对齐

当一行中的内容超过了容器的宽度时，会根据text-align属性的值来决定如何对齐。如果一行放不下所有内容，可以通过设置overflow属性来控制内容的显示方式，例如使用overflow: hidden来隐藏溢出部分，或者使用overflow: scroll来添加滚动条，再或者使用overflow-wrap:break-word换行。

同样地，如果一行中的行内元素高度不一致，可以通过设置vertical-align属性来控制它们的对齐方式。通过调整vertical-align的值，可以使行内元素在垂直方向上对齐到指定的位置。

块级格式

BFC（块级格式上下文）是CSS中的一个概念，用于描述在页面中创建一个独立的块级容器，该容器内的元素按照一定的规则进行排版。

在BFC内部的排版规则包括：

BFC的边界与外部元素的边界不会重叠，形成一个独立的容器。
BFC内部的元素垂直方向上会一个接一个地排列，不会出现浮动或者定位元素的重叠。
BFC内部的元素会在水平方向上填满其容器，不会出现浮动元素造成的换行问题。
BFC内部的元素不会影响外部的布局，其内部的浮动元素也不会影响其他非浮动元素的位置。

通过创建BFC，可以解决一些常见的布局问题，例如清除浮动、防止外部元素的干扰等。可以通过设置元素的overflow属性为auto、hidden等值，或者使用float、position等属性来触发BFC。

Flexbox布局

Flexbox是一种用于网页布局的CSS模块，它使得在容器中的元素能够自动调整其大小和位置。Flexbox使用了一个主轴和一个侧轴的概念来排列元素。

在使用Flexbox进行排版时，需要将父容器设置为display: flex;，这样子元素就会成为flex子项。然后可以使用一些属性来控制子项的排列方式。

以下是一些常用的Flexbox属性：

flex-direction：决定了子项在容器中的排列方向。可以设置为row（水平排列，默认值）、row-reverse（水平反向排列）、column（垂直排列）或column-reverse（垂直反向排列）。
justify-content：决定了子项在主轴上的对齐方式。可以设置为flex-start（默认值，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，中间留有空白间隔）或space-around（均匀对齐，子项之间留有空白间隔）。
align-items：决定了子项在侧轴上的对齐方式。可以设置为flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐，子项的文本基线对齐）或stretch（拉伸对齐，子项填充整个容器高度）。
flex-wrap：决定了子项是否换行。可以设置为nowrap（默认值，不换行）、wrap（换行）或wrap-reverse（反向换行）。
align-content：当子项换行时，决定了多行在侧轴上的对齐方式。可以设置为flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、space-between（两端对齐，中间留有空白间隔）或space-around（均匀对齐，行之间留有空白间隔）。

以上是Flexbox的一些基本属性，通过灵活地使用这些属性，可以实现各种不同的排版效果。

Grid布局

Grid布局是一种CSS布局模块，用于创建网格化的页面布局。它通过将页面划分为行和列的网格，使得元素可以更方便地定位和对齐。Grid布局提供了一套强大的属性和功能，可以实现响应式布局、自适应布局、等高布局等效果。

Grid布局的主要特点包括：

网格容器（Grid Container）：通过设置容器的display属性为grid，将其变为一个网格容器。网格容器可以包含一系列网格项目。
网格项目（Grid Item）：网格容器中的每个子元素都是一个网格项目，可以通过设置网格项目的grid-column和grid-row属性，来决定其在网格中的位置和大小。
网格轨道（Grid Track）：网格容器被划分为水平轨道（grid row）和垂直轨道（grid column），每个轨道之间可以设置间距。
网格线（Grid Line）：网格轨道的分界线称为网格线，可以通过设置网格线的名称或索引来引用。
网格区域（Grid Area）：通过指定网格项目的起始网格线和结束网格线，可以定义一个网格区域，使得多个网格项目可以占据同一个区域。
自动布局（Auto Placement）：网格项目可以使用自动布局算法，自动放置在可用的网格区域中，可以根据需要自动调整大小。
对齐和间距（Alignment and Gaps）：Grid布局提供了丰富的对齐和间距属性，可以实现网格项目的对齐、居中和间距控制。

CSS 盒模型 - 行级与块级｜ 青训营