当前位置：首页 > news >正文

【前端】CSS学习笔记

news 2025/6/22 2:11:23

CSS的简介
- CSS的概念
- 语法
CSS的引入方式
- 内联样式（行内样式）
- 内部样式
- 外部样式（推荐）
选择器
- 全局选择器
- 元素选择器
- 类选择器
- ID选择器
- 合并选择器
- 后代选择器
- 子选择器
- 相邻兄弟选择器
- 通用兄弟选择器
- 伪类选择器
- - :link
  - :visited
  - :hover
  - :active
  - :focus
  - :first-child
  - :last-child
  - :nth-child(n)
  - :nth-of-type(n)
  - :not(selector)
字体属性
- color
- font-size
- font-weight
- font-style
- font-family
- line-height
- letter-spacing
- word-spacing
背景属性
- background-color 属性
- background-image属性
- background-repeat属性
- background-size属性
- background-position属性
文本属性
- text-align
- text-decoration
- text-transform
- text-indent
表格属性
- 表格边框
- 折叠边框
- 表格宽度和高度
- 表格文字对齐
- 表格填充
- 表格颜色
CSS盒子模型（Box Model）
- 概念
弹性盒子模型（flex box）
- 定义
- 弹性容器（Flex Container）
- 弹性项目（Flex Items）
- 主轴（Main Axis）和交叉轴（Cross Axis）
- 弹性容器的属性
- - justify-content
  - align-items
  - flex-wrap
- 弹性项目的属性
- - flex-grow
  - flex-shrink
  - flex-basis
  - flex
  - flex-decoration
文档流
- 文档流产生的问题
- - 高矮不齐，底边对齐
  - 空格折叠
  - 元素无间距
- 脱离文档流
浮动
- 定义
- 浮动的原理
- 元素向左浮动
- 当容器不足时

CSS的简介

CSS的概念

CSS(Cascading Style Sheets)层叠样式表，又叫级联样式表，简称样式表
CSS文件的后缀名为.css
CSS用于HTML文档中元素样式的定义

语法

CSS规则由两个主要部分构成：选择器，以及一条或多条声明

<head><style>选择器{属性名：属性值;属性名：属性值;}</style>
</head>

选择器：要修饰的对象（东西）
属性名：修饰对象的哪一个属性（样式）
属性值：样式的取值

CSS的引入方式

内联样式（行内样式）

要使用内联样式，需要在相关的标签内使用样式（style）属性。style属性可以包含任何CSS属性

<p style="color:red;font-size:20px;">我是内联样式的方案</p>

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表

<head><style>p {color:red;font-size:20px;}</style> 
</head>

在上面的代码中，之后所有的<p>标签都会生效这个样式

外部样式（推荐）

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部

现在有如下两个页面，我希望让这两个页面的<p>标签都能应用同样的样式。

<body><p>首页</p><a href="./product.html">产品</a>
</body>

<body><p>产品</p>
</body>

在这里插入图片描述
可以在同级目录下创建一个.css文件

在里面设置所希望p标签的样式

p{color:red;font-size:30px;
}

接着回到两个页面的html文件中，在头部用<link>标签引入public.css文件

<head><link rel="stylesheet" href="./public.css">
</head>

这样子就成功给不同页面的同一标签加上同样的效果了
在这里插入图片描述

选择器

全局选择器

可以与任何元素匹配，优先级最低，一般做样式初始化

*{margin: 0;padding: 0;
}

元素选择器

HTML文档中的元素，p、b、div、a、img、body等
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”

p{font-size = 30px;
}

类选择器

通过给HTML元素添加class属性，然后使用类选择器来匹配具有相同class值的元素。类选择器在HTML中可以被多个元素使用，因此它可以用于为一组元素设置相同的样式，也可以用于区分不同的元素组，给它们设置不同的样式。类选择器的优先级高于元素选择器，低于ID选择器。

/* 类选择器以英文句点（.）开头，后面紧跟类名 */
.my-class {color: red;font-weight: bold;
}

在HTML中使用：

<p class="my-class">这是一个使用了类选择器设置样式的段落。</p>
<span class="my-class">这是一个使用了相同类选择器设置样式的span元素。</span>

ID选择器

HTML元素可以通过id属性来唯一标识，ID选择器就是用来匹配具有特定id值的元素。每个HTML文档中，id值必须是唯一的，因此ID选择器通常用于为单个元素设置独特的样式。ID选择器的优先级高于类选择器和元素选择器。

/* ID选择器以英文井号（#）开头，后面紧跟ID名 */
#my-id {background-color: lightblue;padding: 20px;border: 1px solid gray;
}

在HTML中使用：

<div id="my-id">这是一个使用了ID选择器设置样式的div元素。</div>

合并选择器

合并选择器，也被称为群组选择器，它允许你将多个选择器组合在一起，同时为这些选择器所选中的元素应用相同的样式。这样可以避免重复编写相同的样式规则，提高CSS代码的简洁性和可维护性。合并选择器使用逗号（,）来分隔不同的选择器。

/* 同时选择 p 元素、class 为 "my-class" 的元素以及 id 为 "my-id" 的元素 */
p,
.my-class,
#my-id {/* 这里设置的样式会同时应用到上述三种选择器选中的元素上 */text-align: center;line-height: 1.6;margin-bottom: 10px;
}

在HTML中使用：

<p>这是一个段落，会应用合并选择器设置的样式。</p>
<div class="my-class">这是一个使用了类选择器的div元素，同样会应用样式。</div>
<span id="my-id">这是一个使用了ID选择器的span元素，也会应用样式。</span>

后代选择器

后代选择器用于选择某个元素的所有后代元素。后代元素是指包含在该元素内部的所有元素，不管嵌套多少层。后代选择器使用空格来分隔选择器，选择器的顺序是从祖先元素到后代元素。它可以更精确地选择特定元素下的子元素，从而设置不同的样式。

/* 选择div元素内部的所有p元素 */
div p {color: green;font-style: italic;
}

在HTML中使用：

<div><p>这是div内部的段落，会应用后代选择器的样式。</p><ul><li><p>这也是div内部的段落，同样会应用样式。</p></li></ul>
</div>

子选择器

子选择器与后代选择器类似，但它只选择元素的直接子元素，而不是所有后代元素。子选择器使用大于号（>）来分隔选择器，选择器的顺序是从父元素到子元素。

/* 选择div元素的直接子元素p */
div > p {border: 1px solid orange;margin-top: 10px;
}

在HTML中使用：

<div><p>这是div的直接子元素段落，会应用子选择器的样式。</p><div><p>这不是div的直接子元素段落，不会应用上述样式。</p></div>
</div>

相邻兄弟选择器

相邻兄弟选择器使用加号（+）来连接两个选择器。它用于选择紧接在某个元素之后的相邻兄弟元素，即该元素后面紧邻的具有相同父元素的元素。也就是说，被选择的元素必须和前面的元素拥有相同的父元素，并且在文档流中紧挨着前面元素之后。

/* 选择紧接在 h2 元素之后的相邻 p 元素 */
h2 + p {color: purple;font-size: 18px;
}

在HTML中使用：

<h2>标题2</h2>
<p>这是紧跟在 h2 后面的段落，会应用相邻兄弟选择器的样式。</p>
<p>这个段落不会应用相邻兄弟选择器的样式，因为它不是紧挨着 h2 元素的。</p>
<div><p>这个段落虽然也是 p 元素，但它不是紧接在 h2 后面的兄弟元素，不会应用上述样式。</p>
</div>

通用兄弟选择器

通用兄弟选择器使用波浪号（~）来连接两个选择器。它可以选择某元素之后的所有同级兄弟元素，这些元素需要满足两个条件：一是与前面的元素具有相同的父元素，二是在文档流中出现在前面元素之后。它提供了一种更灵活的方式来为多个同级元素设置样式，只要它们处于目标元素之后，无论相隔多远，都可以被选中。

/* 选择在 h2 元素之后的所有 p 兄弟元素 */
h2 ~ p {color: #666;font-style: italic;margin-top: 10px;
}

在 HTML 中使用：

<h2>标题</h2>
<p>这是在 h2 元素之后的第一个 p 元素，会应用通用兄弟选择器的样式。</p>
<div>这里是一个 div 元素，不会被选中。</div>
<p>这是在 h2 元素之后的第二个 p 元素，同样会应用样式。</p>
<p>这是在 h2 元素之后的第三个 p 元素，也会应用样式。</p>

伪类选择器

伪类选择器是CSS中一种特殊的选择器，它允许你基于元素的状态或信息来选择元素，而不是仅基于元素的结构或属性。以下是一些常见的伪类选择器及其用法：

:link

用于选择未被访问过的链接。

a:link {color: blue;text-decoration: none;
}

上述代码将未访问过的链接的颜色设置为蓝色，并且去掉下划线。

:visited

用于选择已被访问过的链接。

a:visited {color: purple;
}

此代码将已访问过的链接的颜色设置为紫色。

:hover

当鼠标悬停在元素上时使用此伪类。常用于为元素添加交互效果，比如改变颜色、添加下划线或显示隐藏内容等。

a:hover {color: red;text-decoration: underline;
}

当鼠标悬停在链接上时，该链接的颜色会变为红色并添加下划线。

:active

选择正在被用户激活的元素，通常是在鼠标按下但未松开时。

button:active {background-color: #ccc;
}

当按钮被按下时，其背景颜色会变成灰色。

:focus

选择获得焦点的元素，例如用户通过键盘的Tab键或点击输入框时，输入框会获得焦点。

input:focus {border: 2px solid orange;
}

当输入框获得焦点时，会添加一个橙色的边框。

:first-child

选择父元素的第一个子元素。

ul li:first-child {font-weight: bold;
}

对于无序列表，会将列表中的第一个列表项的字体加粗。

:last-child

选择父元素的最后一个子元素。

ul li:last-child {border-bottom: none;
}

对于无序列表，会将列表中的最后一个列表项的底部边框去掉。

:nth-child(n)

选择父元素的第n个子元素，其中n可以是数字、关键字（如odd或even）或公式（如2n+1）。

table tr:nth-child(even) {background-color: #f2f2f2;
}

对于表格，会将偶数行的背景颜色设置为浅灰色，这在表格样式设计中可以用来实现隔行变色的效果，提高表格的可读性。

:nth-of-type(n)

选择父元素中同类型元素的第n个元素。与:nth-child不同，它只考虑同类型的元素，而不是所有子元素。

div p:nth-of-type(2) {font-style: italic;
}

在一个包含多种元素的div中，会将第二个p元素的字体设置为斜体。

:not(selector)

用于排除某些元素，选择不满足括号内选择器条件的元素。

p:not(.highlight) {color: black;
}

会将没有 highlight 类的段落元素的颜色设置为黑色，而具有 highlight 类的段落将不受此样式影响。

字体属性

color

规定文本的颜色
有如下四种设置方式：颜色名称，十六进制，RGB值，RGBA值
在这里插入图片描述

font-size

设置文本的大小

h1{font-size:40px;}
h2{font-size:30px;}

注意：chrome浏览器接受最小的字体是12px

font-weight

设置文本的粗细

值	描述
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100~900	定义由细到粗 400等同默认，而700等同bold

H1 {font-weight:normal;}
div{font-weight:bold;}
p {font-weight:900;}

font-style

指定文本的字体样式，它主要用于控制文本的字体风格，如正常、斜体或倾斜。

p {font-style: italic;}
span {font-style: oblique;}
h1 {font-style: normal;}

italic：使文本呈现为斜体样式。通常，当字体支持斜体时，会使用字体的斜体变体。如果字体没有斜体变体，浏览器可能会模拟斜体效果。
oblique：类似于 italic，但 oblique 更像是将正常字体进行倾斜处理，而不是使用专门的斜体变体。在实际使用中，italic 和 oblique 的区别可能不太明显，具体取决于字体的支持情况。
normal：将文本恢复到正常的字体样式，即不使用斜体或倾斜。

font-family

用于指定元素的字体。可以使用多个字体名称，以逗号分隔，作为一个字体栈。浏览器会按照字体栈的顺序依次查找字体，如果第一种字体不可用，会尝试使用下一个字体，依此类推。

body {font-family: Arial, Helvetica, sans-serif;}

p{font-family:"微软雅黑";}

在这个示例中，浏览器会首先尝试使用 Arial 字体，如果 Arial 字体不可用，会尝试使用 Helvetica 字体，如果两者都不可用，会使用 sans-serif 这个通用字体族。
你可以指定具体的字体名称，如 Times New Roman、Verdana 等，也可以使用通用字体族，如 serif、sans-serif、monospace、cursive、fantasy 等。通用字体族是一组具有相似外观的字体集合，这样可以确保即使指定的具体字体不可用，也能有一个合适的替代字体。

line-height

设置文本行与行之间的距离，也称为行高。可以使用不同的单位，如像素（px）、百分比（%）、无单位数字（推荐，相对字号）等。

p {line-height: 20px;}
div {line-height: 150%;}
h1 {font-size: 30px;line-height: 1.5;
}

对于 line-height: 20px;，行高将固定为 20 像素，无论字体大小如何。
对于 line-height: 150%;，行高将是元素字体大小的 150%。例如，如果字体大小是 16px，行高将是 24px（16 * 1.5）。
对于 line-height: 1.5;，行高是字体大小的 1.5 倍，这是一种更灵活的设置方式，因为当字体大小改变时，行高会自动调整。

letter-spacing

控制字符之间的间距，可以使用不同的单位，如像素（px）、em 等。

p {letter-spacing: 2px;}
h1 {letter-spacing: -1px;}

正的 letter-spacing 值会增加字符之间的间距，而负的 letter-spacing 值会减少字符之间的间距。

word-spacing

与 letter-spacing 类似，但它控制的是单词之间的间距，而不是字符之间的间距。

p {word-spacing: 5px;}
h1 {word-spacing: -2px;}

正的 word-spacing 值会增加单词之间的间距，负的 word-spacing 值会减少单词之间的间距。

背景属性

background-color 属性

该属性设置背景颜色

div {width: 400px;height: 400px;background-color: red;
}

background-image属性

设置元素的背景图像

.box2 {width: 200px;height: 200px;background-image: url("1.jpg");
}

在这里插入图片描述
因为容器的大小没有图片的大小大，所以只显示出了一部分

background-repeat属性

该属性设置如何平铺背景图像

值	说明
repeat	默认值
repeat-x	只向水平方向平铺
repeat-y	只想垂直方向平铺
no-repeat	不平铺

.box2 {width: 1000px;height: 500px;background-image: url("1.jpg");background-repeat: repeat-x;
}

在这里插入图片描述

background-size属性

该属性设置背景图像的大小

值	说明
length	设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值 auto
percentage	计算相对位置区域的白分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值 auto
cover	保持图片纵横比并将图片缩放成完全禮盖背景区域的最小大小
contain	保持图片纵横比并将图像缩放成适合背景定位区域的最大大小

.box2 {width: 200px;height: 200px;background-image: url("1.jpg");background-size: cover;
}

在这里插入图片描述
虽然给的容器大小小于图片的大小，但通过cover，就可以把图片缩小到刚好放入容器中

background-position属性

该属性设置背景图像的起始位置，默认值是：0% 0%。

值	说明
left top	左上角
left center	左中
left bottom	左下角
right top	右上角
right center	右中
right bottom	右下角
center top	顶部居中
center center	正中心
center bottom	底部居中
x% y%	使用百分比设置位置，第一个值是水平位置，第二个值是垂直位置。 0% 0% 表示左上角，100% 100% 表示右下角，50% 50% 表示正中心。例如，`background-position: 25% 75%;` 表示将背景图像的起始位置设置为水平方向上距离左边 25%，垂直方向上距离顶部 75% 的位置。
xpos ypos	使用长度值（px、em 等）设置位置，第一个值是水平位置，第二个值是垂直位置。例如，`background-position: 10px 20px;` 表示将背景图像的起始位置设置为水平方向上距离左边 10 像素，垂直方向上距离顶部 20 像素的位置。

.box2 {width: 200px;height: 200px;background-image: url("1.jpg");background-position: right bottom;
}

在这里插入图片描述
从结果来看，当容器大小小于图片的时候，由于设置了background-position属性，展示的部分为图片的右下角

文本属性

text-align

指定元素文本的水平对齐方式

值	描述
left	文本居左排列，默认值
right	把文本排列到右边
center	把文本排列到中间

text-decoration

规定添加到文本的修饰，下划线、上划线、删除线等

值	描述
underline	下划线，在文本的下方添加一条直线。
overline	上划线，在文本的上方添加一条直线。
line-through	删除线，在文本的中间位置添加一条贯穿文本的直线。
none	无修饰，去除文本默认的或之前设置的任何文本修饰效果，如链接默认的下划线。
blink	闪烁效果，使文本呈现闪烁的状态（该值在现代浏览器中兼容性较差，部分浏览器已不支持）。
underline overline	同时添加下划线和上划线，在文本的上方和下方都添加一条直线。
wavy underline	波浪形下划线，在文本下方添加一条波浪形状的线。
double underline	双下划线，在文本下方添加两条平行的下划线。

h3 {text-align: center;text-decoration: double underline;text-decoration-color: red;
}

在这里插入图片描述

text-transform

控制文本的大小写

值	描述
capitalize	定义每个单词开头大写，即每个单词的首字母会被转换为大写形式，其余字母为小写。
uppercase	将文本中的所有字母都转换为大写形式。
lowercase	将文本中的所有字母都转换为小写形式。
none	不进行大小写转换，文本将保持原始的大小写形式。

text-indent

规定文本块中首行文本的缩进

p{text-indent: 2em}

在这里插入图片描述

表格属性

创建一个表格，（table>tr3>td3{单元格}）快捷生成

<table><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>

在这里插入图片描述

表格边框

border属性

table,td {border: 1px solid red;
}

在这里插入图片描述

折叠边框

border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开

表格宽度和高度

width和height属性定义表格的宽度和高度

table,td {border: 4px solid green;
}
table{border-collapse: collapse;width: 500px;height: 300px;
}

在这里插入图片描述

表格文字对齐

text-align属性设置水平对齐方式，向左，右，或中心

td{text-align:center;}

垂直对齐属性设置垂直对齐

td{height:50px;vertical-align:bottom;}

表格填充

如果在表的内容控制空格之间的边框，应使用td和th元素的填充属性

td { padding:15px;}

表格颜色

下面的例子指定th元素的文本和背景颜色

td{text-align:center;background-color:yellow;color:black;
}

在这里插入图片描述

CSS盒子模型（Box Model）

概念

CSS 盒子模型是一种用于描述 HTML 元素布局的概念模型，它将每个 HTML 元素看作是一个矩形的盒子，这个盒子包含了元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。
在这里插入图片描述

内容（Content）：
这是盒子的核心部分，包含了元素的实际内容，如文本、图像或其他 HTML 元素。其大小可以通过 width 和 height 属性来设置。
内边距（Padding）：
是内容区域与边框之间的空间，用于在内容和边框之间创建一定的间隔，避免内容紧贴边框。可以使用 padding-top、padding-right、padding-bottom 和 padding-left 属性分别设置上、右、下、左内边距，也可以使用 padding 属性一次性设置四个方向的内边距。
边框（Border）：
位于内边距和外边距之间，围绕着内容和内边距，可以为元素添加可见的边界。可以使用 border-width、border-style 和 border-color 属性分别设置边框的宽度、样式和颜色，也可以使用 border 属性一次性设置边框的所有属性。
外边距（Margin）：
是盒子与其他元素之间的空间，用于控制元素之间的距离。可以使用 margin-top、margin-right、margin-bottom 和 margin-left 属性分别设置上、右、下、左外边距，也可以使用 margin 属性一次性设置四个方向的外边距。

以下是一份关于弹性盒子模型（flex box）的更完善的笔记：

弹性盒子模型（flex box）

定义

弹性盒子是 CSS3 的一种新的布局模式，它为元素的布局提供了更加灵活和强大的方式，尤其适用于一维布局（水平或垂直方向）。与传统的布局方式（如使用 float 和 position）相比，弹性盒子模型在响应式设计、对齐和分布元素方面具有更大的优势，可以轻松地实现元素的排列、对齐、分配空间等操作，使页面布局更加简洁和易于维护。

弹性容器（Flex Container）

定义：使用 display: flex; 或 display: inline-flex; 可以将一个元素定义为弹性容器。
- display: flex; 会将元素变成块级弹性容器，它会占据其父元素的整个宽度。
- display: inline-flex; 会将元素变成内联级弹性容器，其宽度由内容决定。

.container {display: flex;
}

当一个元素成为弹性容器后，它的子元素（称为弹性项目）会按照弹性布局的规则进行排列和布局。

弹性项目（Flex Items）

定义：弹性容器内的子元素就是弹性项目。
属性影响：弹性容器的属性会影响弹性项目的布局，如 justify-content、align-items 等，这些属性会控制弹性项目在容器内的位置、间距和对齐方式。

.container {width:200px;height: 100px;background-color:#555;display: flex;
}
.item {width:50px;height: 50px;margin: 10px;background-color: lightblue;
}

<div class="container"><div class="item"></div><div class="item"></div><div class="item"></div>
</div>

没设置弹性盒子
在这里插入图片描述
设置了弹性盒子

主轴（Main Axis）和交叉轴（Cross Axis）

主轴：弹性项目的排列方向就是主轴。可以通过 flex-direction 属性来设置主轴的方向，其取值有：
- row（默认）：从左到右水平排列。
- row-reverse：从右到左水平排列。
- column：从上到下垂直排列。
- column-reverse：从下到上垂直排列。
交叉轴：与主轴垂直的方向就是交叉轴。当主轴是水平方向时，交叉轴是垂直方向，反之亦然。
示例代码：

.container {display: flex;flex-direction: column; /* 主轴为垂直方向 */
}

弹性容器的属性

justify-content

作用：用于控制弹性项目在主轴上的对齐方式。
取值：
- flex-start（默认）：将弹性项目对齐到主轴的起始位置。
- flex-end：将弹性项目对齐到主轴的结束位置。
- center：将弹性项目在主轴上居中对齐。
- space-between：将第一个弹性项目放在主轴的起始位置，最后一个放在结束位置，其他项目均匀分布在它们之间。
- space-around：将弹性项目均匀分布在主轴上，在每个项目的两侧有相等的间距。
- space-evenly：将弹性项目均匀分布在主轴上，所有间距相等。
示例代码：

.container {display: flex;justify-content: center; /* 弹性项目在主轴上居中对齐 */
}

align-items

作用：用于控制弹性项目在交叉轴上的对齐方式。
取值：
- flex-start：将弹性项目对齐到交叉轴的起始位置。
- flex-end：将弹性项目对齐到交叉轴的结束位置。
- center：将弹性项目在交叉轴上居中对齐。
- baseline：将弹性项目按照它们的基线对齐。
- stretch（默认）：如果弹性项目未设置高度或设置为 auto，将拉伸项目以填满交叉轴。
示例代码：

.container {display: flex;align-items: flex-end; /* 弹性项目在交叉轴上靠末端对齐 */
}

flex-wrap

作用：控制弹性项目是否换行。
取值：
- nowrap（默认）：不换行，弹性项目将尝试压缩在一行内。
- wrap：当弹性项目在一行内放不下时，会换行显示。
- wrap-reverse：当弹性项目在一行内放不下时，会换行显示，但换行的方向与 wrap 相反。
示例代码：

.container {display: flex;flex-wrap: wrap; /* 弹性项目超出容器宽度时换行 */
}

弹性项目的属性

flex-grow

作用：定义弹性项目的放大比例，即当有多余空间时，该属性决定了弹性项目如何分配多余的空间。
取值：默认为 0，表示不放大；如果设置为正数，该项目将按比例分配多余空间。
示例代码：

.item1 {flex-grow: 1; /* 当有多余空间时，该项目会放大 */
}
.item2 {flex-grow: 2; /* 该项目会比 item1 放大的程度更大，因为其 flex-grow 值更大 */
}

flex-shrink

作用：定义弹性项目的缩小比例，即当空间不足时，该属性决定了弹性项目如何缩小。
取值：默认为 1，表示可以缩小；如果设置为 0，该项目不会缩小。
示例代码：

.item1 {flex-shrink: 0; /* 当空间不足时，该项目不会缩小 */
}

flex-basis

作用：定义弹性项目在分配多余空间之前的初始大小。可以设置为具体的长度（如 200px）或相对值（如 30%）。
示例代码：

.item {flex-basis: 200px; /* 弹性项目的初始大小为 200 像素 */
}

flex

作用：是 flex-grow、flex-shrink 和 flex-basis 的简写属性。
示例代码：

.item {flex: 1 1 200px; /* 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 200px; */
}

flex-decoration

功能：flex-direction 属性用于指定弹性容器（Flex Container）内弹性项目（Flex Items）的排列方向，也就是确定弹性布局的主轴（Main Axis）方向。通过设置该属性，可以控制弹性项目是水平排列还是垂直排列，以及排列的顺序。
语法：flex-direction: row | row-reverse | column | column-reverse;
取值及含义：
- row（默认值）：弹性项目从左到右水平排列。这是最常见的排列方式，适用于水平布局，例如在创建一个水平导航栏或一组水平排列的卡片时，可以使用该值。
- row-reverse：弹性项目从右到左水平排列。与 row 相反，用于实现元素从右向左的水平排列，可在某些特殊的布局需求中使用，如从右向左的语言环境。
- column：弹性项目从上到下垂直排列。常用于创建垂直的布局结构，例如侧边栏或垂直排列的信息列表。
- column-reverse：弹性项目从下到上垂直排列。适用于需要元素从下向上的垂直排列，例如一些倒序排列的信息展示。

文档流

文档流是文档中可显示对象在排列时所占用的位置/空间
例如：块元素自上而下摆放，内联元素，从左到右摆放
标准流里面的限制非常多，导致很多页面效果无法实现

文档流产生的问题

高矮不齐，底边对齐

<body><span>大家好，我们一起学前端</span><img src="1.jpg" alt="">
</body>

在这里插入图片描述
在上面这个例子中，我们发现文本和图片没有高矮对齐

空格折叠

<p>大家好，我是一个          p标签</p>

在这里插入图片描述
实际的效果是只显示了一个空格

元素无间距

<img src="1.jpg" alt="">
<img src="1.jpg" alt="">

在这里插入图片描述
两张图片之间出现了默认的间隙，不是我所预期的

脱离文档流

使一个元素脱离标准文档流有三种方式

浮动
绝对定位
固定定位

浮动

定义

float属性定义元素在哪个方向浮动，任何元素都可以浮动

.div1{float: left;}
.div2{float: right;}

浮动的原理

浮动以后使元素脱离了文档流
浮动只有左右浮动，没有上下浮动

元素向左浮动

脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象
在这里插入图片描述
设置浮动后，上述图片中间有缝隙的问题就解决了。

img {width: 300px;height: 300px;float: left;
}

在这里插入图片描述

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

在这里插入图片描述

正常情况的布局是从上到下
在这里插入图片描述
给<div>标签加上float:left;后就变成了水平排列
常应用于横向的无序列表作为网页顶部导航栏

当容器不足时

当容器不足以横向摆放内容时，会在下一行摆放