css学习过程|AAO!

学习路径

css用于美观html，html是毛坯房那么css就是装修

分割线------------------------------------------------------------------------------------------------------------------------------------

内联式（内嵌式）：只针对单一div起作用

嵌入式：针对所有body

<style>

div{

#######：

####：

}

</style>

外联式: <link rel="" href="">

我是分割线-----------------------------------------------------------------

选择器

.a1{background-color:red;

}

.d1 h1{

}

伪类样式（伪类用于定义元素的特殊状态，比如鼠标悬停（:hover）、被选中（:checked）、第一个子元素（:first-child）等

将 flex-wrap 属性设置为 nowrap，防止元素换行）

使用 justify-content: space-around 使四个仪表盘在容器内均匀分布。

将 flex-wrap 属性设置为 nowrap，防止元素换行。

position: absolute; /* 绝对定位 */

使用外层容器包裹并缩放

内边距padding

将需要缩放的元素用一个外层容器包裹起来，对这个外层容器进行缩放操作，而内层元素保持原来的绝对定位设置。这样内层元素的绝对定位是相对于外层容器初始大小的，缩放外层容器不会影响内层元素的定位逻辑

<tr> 和 <td> 是 HTML 表格中的标签。
- <tr> 代表表格行（Table Row），它用于定义表格中的一行。
- <td> 代表表格单元格（Table Data），它用于定义表格中的一个单元格，通常包含文本或数

了将监控画面放在维修日志和功耗管理中间，并且保持其他布局不变，我们可以通过调整#d3-wrapper中元素的顺序来实现。同时，还需要对一些样式进行微调，以确保整体布局的合理性。以下是修改后的代码：

可以通过调整块级元素内的元素顺序来调整布局

关于布局的问题

1. 使用 flex 布局

在包含这三个模块的父元素上应用display: flex属性，子元素默认会在一行排列，同时还可以通过其他属性控制间距等。假设这三个模块的父元素是<div id="parent">，可以这样修改 CSS：

全屏后布局会乱，通常有以下几种原因：

1. 绝对定位元素问题

在原代码中，有不少元素使用了position: absolute进行定位，比如.设备状态 h5等。在进入全屏模式后，浏览器窗口尺寸发生了巨大变化，这些绝对定位元素的位置可能不会根据新的窗口大小自动调整，从而导致布局混乱。例如.设备状态 h5设置的top和left值是基于初始窗口大小确定的，全屏后就可能偏离预期位置。

2. 元素尺寸和比例问题

页面中的元素，像表格、视频、各个功能区块等，其width和height属性的设置可能没有充分考虑到全屏后的情况。比如视频在全屏前设置了固定的百分比宽度和高度，全屏后如果没有相应的适配机制，就可能出现拉伸、变形或者布局错乱。此外，像.监控画面及其子元素.jiankong1、.jiankong2等，在不同尺寸下如果没有合适的响应式设置，也会导致布局问题。