第六届字节跳动青训营-前端基础-《深入CSS下》笔记

块级盒子和内联级盒子

在学完盒模型之后，看一下盒模型里面有两种非常常见的布局规则。一个是行级、一个叫块级的。那这两个是两种不同的摆放方式，一个一个盒子是有不同的摆放规则的。那么在块级的盒子呢它有它自己的规则。就是说块级的盒子它不会和其他的盒子并排排放。

Block Level Box（块级盒子）和Inline Level Box（内联级盒子）是CSS

中用于描述元素显示和布局的概念。

Block Level Box指的是元素在文档流中以块的形式呈现，它会在页面中独占一行，从上到下排列。常见的块级元素包括div、p、h1-h6等，它们可以设置宽度、高度、内外边距等属性，可以容纳其他块级元素或内联级元素。

Inline Level Box指的是元素在文档流中以内联的形式呈现，它会在一行中根据内容的大小自动排列。常见的内联级元素包括span、a、img等，它们通常不会独占一行，可以与其他内联级元素在同一行显示。内联级元素的宽度、高度、内外边距等属性会受到内容的影响，无法直接设置。

通过理解和区分Block Level Box和Inline Level Box，可以更好地控制元素的布局和样式，实现页面的设计和排版。

行级元素与块级元素

盒子是css的概念、元素是html的概念，它们不是一个东西，但是他们是存在关联性的。

行级元素（Inline Element）和块级元素（Block Element）是HTML中常见的两种元素类型，它们在页面中的布局和显示方式有所不同。

行级元素（Inline Element）：

行级元素通常不会独占一行，它们会根据内容自动排列在一行中。
行级元素的宽度和高度由内容决定，无法直接设置。
行级元素可以设置水平方向的内外边距（margin和padding），但不会影响到其他元素的布局。
常见的行级元素有span、a、em、strong、img等。块级元素（Block Element）：
块级元素会独占一行，从上到下排列。
块级元素的宽度默认是100%（除非设置了固定宽度），高度由内容和内外边距决定。
块级元素可以设置宽度、高度、内外边距等属性，可以容纳其他块级元素或行级元素。
常见的块级元素有div、p、h1-h6、ul、li等。

行级元素和块级元素在页面布局和样式设计中起着不同的作用。通过合理使用它们，可以实现灵活的页面结构和样式效果。

display属性

display属性是CSS中用于控制元素的显示方式的属性。它可以指定元素应该以何种方式显示在页面中。

display属性的常见取值包括：

block：将元素显示为块级元素，会独占一行，默认情况下宽度为父元素的100%。
inline：将元素显示为内联级元素，不会独占一行，会根据内容自动排列在一行中。
inline-block：将元素显示为内联块级元素，不会独占一行，可以设置宽度、高度、内外边距等属性。
none：将元素隐藏，不占据页面空间，相当于元素不可见。
flex：将元素显示为弹性盒子，可以使用弹性布局来进行灵活的排列和对齐。
grid：将元素显示为网格容器，可以使用网格布局来进行复杂的页面布局。除了上述常见取值外，display属性还有其他一些取值，如table、table-cell、table-row等，用于控制元素的表格布局。通过使用display属性，可以灵活地控制元素的显示方式，实现不同的布局效果和样式设计。

常用流Normal Flow

常用流（Normal Flow）是指HTML文档中元素按照默认的布局方式在页面上流动排列的方式。在常用流中，元素会根据其在HTML中的出现顺序按照从上到下、从左到右的顺序进行排列。

常用流的特点包括：

块级元素会独占一行，从上到下排列，相邻的块级元素会自动换行。
行级元素会在一行中根据内容的大小自动排列，如果一行放不下则会自动换行。
元素的大小由其内容和内外边距决定，宽度默认为父元素的100%。
元素的位置由其在HTML中的出现顺序决定，后出现的元素会在前面的元素之后显示。

常用流是HTML文档中最常见的布局方式，它是基于文档流的默认布局模型。通过合理地使用常用流，可以实现简单的页面布局和排版效果。如果需要更复杂的布局，可以使用CSS的定位、浮动、弹性布局等技术来改变元素在常用流中的位置和排列方式。

块级排版上下文

块级排版上下文（Block Formatting Context，BFC）是CSS中一种布局上下文，它决定了块级元素在页面中的布局和相互影响的方式。

块级排版上下文的特点包括：

块级排版上下文中的元素会按照一定的规则进行布局，不会与外部元素重叠。
块级排版上下文中的元素会根据其包含的内容计算出高度，不会被浮动元素覆盖。
块级排版上下文中的元素会包含其所有的子元素，即使子元素浮动或定位也不会影响到外部元素。

触发块级排版上下文的条件包括：

根元素（HTML元素）和浮动元素都会自动触发块级排版上下文。
使用CSS属性display: inline-block、display: table-cell、display: flex等也会触发块级排版上下文。
使用CSS属性overflow设置为除visible以外的值也会触发块级排版上下文。

块级排版上下文的应用场景包括：

清除浮动：通过触发块级排版上下文，可以解决浮动元素造成的父元素高度塌陷问题。创建多列布局：通过触发块级排版上下文，可以实现多列布局，如使用column-count属性。
避免外边距合并：当两个相邻的块级元素的外边距发生合并时，可以触发块级排版上下文来避免合并现象。
通过合理地使用块级排版上下文，可以实现更灵活的页面布局和解决一些常见的布局问题。

BFC内排版规则

一个盒子内，它子集的盒子只能都是块级。或者都是行级。 如果都是块级那就全部从上到下去摆放。如果都是行级，那么我们就从左到右。

FlexBox

FlexBox是一种用于创建灵活的、响应式布局的CSS模块。它提供了一套强大的工具，用于在容器和其子元素之间建立灵活的关系。通过使用FlexBox，我们可以轻松地实现水平和垂直居中、等高列、自适应布局等常见布局需求。

FlexBox的核心概念包括容器和项目。容器是指应用FlexBox布局的父元素，而项目则是容器内的子元素。通过在容器上设置display: flex，我们可以将其转换为Flex容器。然后，我们可以使用各种属性来控制容器和项目的布局行为。

一些常用的FlexBox属性包括：

flex-direction：指定项目的排列方向，可以是水平（row）或垂直（column）。
justify-content：控制项目在主轴上的对齐方式，比如居中、起始对齐、末尾对齐等。
align-items：控制项目在交叉轴上的对齐方式，比如居中、起始对齐、末尾对齐等。
flex-wrap：控制项目是否换行。
flex-grow、flex-shrink和flex-basis：控制项目的伸缩性和基准大小。
align-self：控制单个项目在交叉轴上的对齐方式，可以覆盖align-items的设置。使用FlexBox可以简化布局的编写，并且提供了更多灵活性和响应性。它已成为现代Web开发中常用的布局技术之一。使用了flex布局子组件也是会根据flex来确定位置。在使用了flex布局后这个布局也不能简单的用上下左右表示。Flex布局中的主轴是指项目排列的主要方向，可以是水平方向（row）或垂直方向（column）。在主轴上，我们可以使用justify-content属性来控制项目的对齐方式，比如居中、起始对齐、末尾对齐等。侧轴是指与主轴垂直的方向，通过align-items属性可以控制项目在侧轴上的对齐方式，比如居中、起始对齐、末尾对齐等。

jusfify

Justify是一种文本对齐的方法，它通过调整文本的间距和字母的大小来使文本在页面上均匀分布。这种对齐方式通常用于排版和印刷领域，以确保文本在页面上看起来整齐和统一。在Justify对齐中，每一行的左右边距都被调整，使得文本的长度与页面的边缘对齐。这种对齐方式可以提高文本的可读性和美观度，尤其在长段落或多列文本的情况下效果更好。Justify对齐在各种出版物中广泛使用，包括书籍、杂志、报纸等。

align-items(基线对齐)

align-items是一个CSS属性，用于控制弹性盒子（Flexbox）或网格容器（Grid）中项目在交叉轴上的对齐方式。

在弹性盒子中，align-items属性定义了项目在交叉轴上的对齐方式，交叉轴是与主轴垂直的轴。它可以应用于弹性容器（即父容器），用于控制所有项目的对齐方式，也可以应用于单个项目，用于覆盖父容器的对齐方式。

在网格容器中，align-items属性定义了网格项目在交叉轴上的对齐方式，同样也可以应用于网格容器或单个网格项目。

flexbility（弹性布局）

Flexibility（弹性布局）是一种CSS布局模型，用于创建灵活和自适应的布局。它基于弹性容器和弹性项目的概念，通过将容器内的项目进行伸缩和对齐来实现灵活布局。

Flexbox（弹性盒子）是Flexibility模型的一种实现方式，它使用display: flex;属性将一个容器定义为弹性容器。在弹性容器中，项目（即弹性项目）可以根据可用空间进行伸缩，并且可以通过设置不同的属性来控制它们在容器内的对齐方式。

flex的属性

Grid布局

Grid是一种CSS布局模块，用于创建网格布局（Grid Layout）。它通过将元素组织成一个二维的网格结构，使得页面布局更加灵活和易于控制。 Grid布局提供了一个强大的网格系统，可以将页面分割为行和列，使得元素可以在这个网格中自由地定位和对齐。相比传统的布局方法，Grid提供了更直观和强大的布局控制，使得设计者可以更容易地实现复杂的布局需求。