本文介绍了HTML/CSS中的元素单位（如px、em、rpx）、flex布局的容器属性和项目属性，以及元素定位的几种方式，包括流定位、绝对定位、相对定位和固定定位，通过实例展示了它们在实际开发中的应用。
1.元素单位
目前学习到的元素单位有三种：
px:绝对单位
em:相对单位.基准点为父节点字体的大小
rpx:是微信小程序中css的尺寸单位
对于元素单位的理解将会以代码的形式进行展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.text1{
font-size: 30px;
}
body{
font-size: 60px;
}
.text2{
font-size: 3em;
}
#box{
font-size: 42px;
}
.text3{
font-size: 3em;
}
</style>
</head>
<body>
<!--
px:绝对单位
em:相对单位.基准点为父节点字体的大小
rpx:是微信小程序中css的尺寸单位
-->
<p class="text1">我是绝对单位</p>
<p class="text2">我是相对单位</p>
<div id="box">
<p class="text3">1111</p>
</div>
</body>
</html>代码解释：
代码分为两块（基本框架剔除在外），首先是样式部分
<style>
.text1{
font-size: 30px;
}
body{
font-size: 60px;
}
.text2{
font-size: 3em;
}
#box{
font-size: 42px;
}
.text3{
font-size: 3em;
}
</style>其中包含了两个元素单位：px和em，其中text3与text2是不一样因为em大小取决于上一个父元素大小
第二部分是内容部分：
<body>
<!--
px:绝对单位
em:相对单位.基准点为父节点字体的大小
rpx:是微信小程序中css的尺寸单位
-->
<p class="text1">我是绝对单位</p>
<p class="text2">我是相对单位</p>
<div id="box">
<p class="text3">1111</p>
</div>
</body>
此处内容为三个不同尺寸的三行文字
效果展示：
2.flex布局
简称弹性盒子布局：
包含两个属性：容器属性和项目属性
容器属性：
display: 这是用于开启Flex布局的关键属性。如果你想让某个元素成为flex容器，你需要设置它的display属性为flex（块级容器）或inline-flex（行内容器）。flex-direction: 这个属性决定了主轴的方向，即项目的排列方向。它可以有四个值：row（默认值，水平方向从左到右）、row-reverse（水平方向从右到左）、column（垂直方向从上到下）和column-reverse（垂直方向从下到上）。flex-wrap: 这个属性定义了子元素是否换行显示。它有三个值：nowrap（默认值，不换行）、wrap（换行）和wrap-reverse（换行，但第一行在下方）。justify-content: 这个属性定义了项目在主轴上的对齐方式。对于单行子元素，如果项目没有占满整行，这个属性可以控制这些项目在行内的对齐方式。align-items: 这个属性定义了项目在交叉轴上的对齐方式。align-content: 当有多行时，这个属性定义了行在交叉轴上的对齐方式。
项目属性：
order: 这个属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。flex-grow: 这个属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink: 这个属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis: 这个属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的原来大小。flex: 这是flex-grow,flex-shrink和flex-basis三个属性的简写，默认值为0 1 auto。align-self: 这个属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
下面是代码以及效果展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demoOne {
width: 800px;
height: 800px;
border: 2px solid red;
/* 设置弹性盒子布局，将块级元素转换为行内元素 */
display: flex;
/* flex-direction属性flex-direction属性用于设置主轴方向，通过设置主轴方向可以规定项目的排列方向。 */
/*row:默认值，主轴为从左到右的水平方向。row-reverse:主轴为从右到左的水平方向。column:主轴为从上到下的垂直方向。column-reverse:主轴为从下到上的垂直方向。 */
/* flex-direction: row; */
/* flex-direction: row-reverse; */
/* flex-direction::column; */
/* flex-direction: column-reverse; */
/* justify-content属性justify-content属性用于设置项目在主轴方向上的对齐方式，能够分配项目之间及其周围多余的空间。 */
/* flex-start:默认值，表示项目对齐到主轴起点，项目间不留空隙。flex-end:项目对齐到主轴终点，项目间不留空隙主物上爱 个目高主的起片的正 等于业后 下项目离主轴终点的距离。space acra:每不项,(的发部死且分别靠向容糕的两城，其他项目之间的间暖相等第一个项目离主轴起点和最后一个项目离终点的距离为中间项目间距的一半。 */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
/* align-items属性align-items属性用于设置项目在交叉轴上的对齐方式。*/
/*center:项目在交叉轴的中间位置对齐。flex-start:项目顶部与交叉轴起点对齐,flex-end:项目底部与交叉轴终点对齐。baseline:项目的第一行文字的基线对齐。 */
/* align-items: center; */
/* align-items: flex-start; */
/* align-items:flex-end */
/* align-items:baseline */
/* 若要设置元素水平垂直居中
display: flex;
justify-content: center;
align-items: center;
*/
}
.boxOne {
width: 100px;
height: 100px;
background-color: green;
}
.boxTwo {
width: 200px;
height: 200px;
background-color: rgb(12, 19, 203);
}
.boxThree {
width: 300px;
height: 300px;
background-color: rgb(203, 206, 11);
}
</style>
</head>
<body>
<div class="demoOne">
<div class="boxOne">1</div>
<div class="boxTwo">2</div>
<div class="boxThree">3</div>
</div>
</body>
</html>效果：
3.元素定位
元素定位在网页设计和开发中扮演着至关重要的角色。它主要通过CSS选择器或JavaScript代码来确定网页中某个元素的具体位置和样式，以达到网页整体视觉效果的美观和设计要求的实现。
元素定位分为：
- 流定位：这是最常用的定位方式，它是一种相对定位，元素的位置取决于它前面元素的位置，也取决于它自身的位置和大小。按照HTML文本的顺序排列元素即可，不需要任何额外的CSS定位属性。
- 绝对定位：在这种定位方式中，元素的位置是相对于网页的边界的，而不是相对于其他元素的位置。可以通过CSS的
position: absolute属性来实现，并使用top、right、bottom和left属性来控制元素的具体位置。 - 固定定位：固定定位的元素位置是相对于浏览器窗口的，而不是相对于网页的某个部分。它可以通过CSS的
position: fixed属性来实现，并且同样可以使用top、right、bottom和left属性来控制元素的位置。 - 相对定位：在这种定位方式中，元素的位置是相对于它本身原有的位置的。它可以使用CSS的
position: relative属性来实现，并且也可以通过top、right、bottom和left属性来调整其位置。
除了上述的CSS定位方式，还有基于元素属性和选择器的定位方式，这些在自动化测试或网页爬虫中特别常见：
- 元素属性定位：包括
id、name、class_name等，这些都是HTML元素本身的属性，可以通过这些属性直接定位到特定的元素。 - 元素标签定位：即
tag_name，通过HTML的标签名来定位元素。 - 链接定位：包括
link_text和partial_link_text，这种定位方式特别适用于通过链接文本来定位元素。 - 选择器定位：包括
xpath和css_selector。这两种方式更为灵活，可以定位到页面上几乎任何位置的元素。XPath是一种在XML文档中查找信息的语言，同样可以用于HTML；而CSS选择器则基于CSS规则来定位元素
这里我们重点展示绝对定位，相对定位，以及固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 2000px;
}
.fix {
width: 200%;
height: 200px;
background-color: aqua;
position: fixed;
bottom: 0px;
}
.rel-father{
width: 300px;
height: 300px;
background-color: blue;
border: 5px solid black;
margin: 50px auto;
position: relative;
}
.rel-child01,.rel-child02,.rel-child03{
width: 100px;
height: 50px;
background-color: yellow;
border: 2px solid red;
}
.rel-child01{
position: absolute;
left: 0px;
top: 0px;
}
.rel-child02{
position: absolute;
right: 0px;
top: 0px;
}
.rel-child03{
position: absolute;
left: 0px;
bottom: 0px;
}
/* 绝对定位 */
.abs-father{
width: 300px;
height: 300px;
background-color: blueviolet;
border: 5px solid gold;
position: relative;
}
.abs-child1{
width: 100px;
height: 100px;
background-color: bisque;
position: absolute;
left: 0px;
top: 0px;
}
.abs-child2{
width: 100px;
height: 100px;
background-color: bisque;
position: absolute;
right: 0px;
top: 0px;
}
.abs-child3{
width: 100px;
height: 100px;
background-color: bisque;
position: absolute;
left: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<!-- 通过定位属性position可以实现元素的精准定位
fixed:固定定位
relative：相对定位，相对于其原文档流的位置进行定位
ansolute:绝对定位，相对于上一个已经定位的父元素进行定位
static：静态定位（默认定位方式）
-->
<!-- 固定定位 -->
<div class="fix"></div>
<!-- 相对定位 -->
<div class="rel-father">
<div class="rel-child01">child01</div>
<div class="rel-child02">child02</div>
<div class="rel-child03">child03</div>
</div>
<!-- 绝对定位 -->
<div class="abs-father">
<div class="abs-child1">abs1</div>
<div class="abs-child2">abs2</div>
<div class="abs-child3">abs3</div>
</div>
</body>
</html>固定定位：<div class="fix"></div>位于页面底部（bottom：0px）固定
相对定位：
<div class="rel-father">
<div class="rel-child01">child01</div>
<div class="rel-child02">child02</div>
<div class="rel-child03">child03</div>
</div>
有一个父元素，其中子元素按照其原来元素位置相对定位
绝对定位：
<div class="abs-father">
<div class="abs-child1">abs1</div>
<div class="abs-child2">abs2</div>
<div class="abs-child3">abs3</div>
</div>
有一个父元素，其中子元素按照其父元素位置相对定位
效果展示：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
