HTML、CSS的flex布局详细笔记

最新推荐文章于 2024-03-14 07:45:00 发布

校园小白

最新推荐文章于 2024-03-14 07:45:00 发布

阅读量314

点赞数 3

分类专栏： HTML/CSS/JS 文章标签： css html 笔记

本文链接：https://blog.csdn.net/m0_54149550/article/details/130835195

版权

5 篇文章 0 订阅

订阅专栏

1、flex布局

Flex布局是一种用于网页布局的弹性盒子模型，它可以灵活地调整元素在容器中的位置和大小。

Flex布局适用于现代的网页布局，特别适用于响应式设计和移动设备上的布局。它提供了一种简单而强大的方式来定义和控制元素在容器中的排列方式。

Flex布局是一种用于在容器（父元素）和其内部项目（子元素）之间进行灵活的布局的CSS属性。
在Flex布局中，通过在父元素上设置`display: flex`或`display: inline-flex`，将其变为一个Flex容器。这样的话，Flex容器的子元素就可以使用Flex属性进行布局和排列。
Flex布局是应用于父元素上的，它定义了子元素的行为。通过在父元素上设置各种Flex属性，如`flex-direction`、`justify-content`、`align-items`等，来控制子元素的布局方式、对齐方式和伸缩行为等。
子元素则通过设置各种Flex项属性，如`flex-grow`、`flex-shrink`、`flex-basis`等，来决定它们在容器中的尺寸和排列顺序。
所以说，Flex布局是给父元素（容器）设置的，通过对父元素设置Flex属性来控制子元素的布局和排列。

盒模型属性：都可以设置宽度（width）和高度（height）属性，可以通过这些属性控制元素在页面中的大小。
显示属性：块元素的默认`display`属性值为`block`，它会独占一行，并在上下方创建新的块级框。行内块元素的默认`display`属性值为`inline-block`，它会在一行内显示，并根据内容自动换行。
盒子模型属性的计算：块元素的宽度（width）和高度（height）属性会包括内容区域、内边距（padding）、边框（border）和外边距（margin）的计算。行内块元素的宽度（width）和高度（height）属性同样会包括内容区域、内边距（padding）、边框（border）和外边距（margin）的计算。
默认布局：块元素的默认布局是垂直排列，每个块元素独占一行。行内块元素的默认布局是水平排列在一行内。

总结一下就是，块元素和行内块元素的属性在大部分情况下是相似的，它们都可以设置宽度、高度、内边距、外边距等属性。然而，块元素的默认布局是独占一行，而行内块元素的默认布局是在一行内显示。此外，块元素的宽度和高度属性可以自由设置，而行内块元素的宽度和高度属性默认由内容决定。