今天学习了html，css和js的基础，了解到CSS（层叠样式表）是一种用于描述网页样式和布局的标记语言。它通过选择器和属性来定义网页元素的外观，包括字体、颜色、大小、间距、背景等。 HTML（超文本标记语言）是一种用于创建网页结构的标记语言。它使用标签来定义网页中的各种元素，如标题、段落、图像、链接等。 JavaScript（JS）是一种用于实现网页交互和动态效果的脚本语言。它可以通过操作网页元素、处理用户输入、发送网络请求等来实现各种功能，使网页具有更丰富的交互性和动态性。 这三种技术通常一起使用，HTML用于创建网页结构，CSS用于样式和布局，JavaScript用于实现交互和动态效果，可以共同构建出功能丰富、美观的网页。
HTML
HTML中，有块级标签（div，p），行内块级标签（input），行内标签（span）等，其中 块级标签如：div，p 等单独占行，占据父容器的全部宽度，不与其他元素共享水平空间。 块级元素会在前后自动换行，使得每个块级元素单独占据一行。但是可以通过设置宽度和高度调整其在页面上的占据空间。
行内标签如：span，img 等会根据内容的长度自动换行，不会独占一行。 行内标签的宽度和高度由内容决定，无法通过设置CSS属性来改变，即不可设置高度和宽度。 行内标签会与相邻的行内元素在同一行内显示，直到一行放不下为止，即可以与其他行内元素在同一行内显示。 行内标签可以包含文本和其他行内元素，如文本、图片、超链接等。
行内块级标签如：input，button，select 等会根据内容的长度自动换行，不会独占一行。 行内块级标签可以通过设置CSS属性来调整其宽度和高度。 行内块级标签会与相邻的行内元素在同一行内显示，直到一行放不下为止，即可以与其他行内元素在同一行内显示。 行内块级标签可以包含文本和其他行内元素，如文本、图片、超链接等。
Document p{width: 250px; height: 175px; color: rgb(95, 95, 186); border: 1px solid #000;} span{width: 250px; height: 175px; color: blue; border: 1px solid #000;} input{width: 250px; height: 175px; border: 1px solid #cc0c0c;}Ro9nin
M3 你是water我是你的水如图可知块级标签单独占据了整行，行内标签和行内块级标签与相邻的行内元素在同一行内显示，且行内标签的宽度和高度由图中内容（M3）决定，无法通过设置CSS属性来改变.
CSS
伪元素（Pseudo-elements）是CSS中的一种特殊选择器，用于在元素的内容之前或之后插入额外的样式和内容。其中，::before用于在元素内容的前面插入样式和内容，::after用于在元素内容的后面插入样式和内容。
伪元素的语法为::before和::after，它们需要与选择器一起使用，以指定要插入样式和内容的元素。
可以通过CSS属性进行样式设置：伪元素可以使用CSS属性来设置其样式，如content属性用于设置插入的内容，display属性用于控制伪元素的显示方式等。效果如图所示：
Ex：/* 伪元素 ::before,::after */
.outer-clock-face::before,
.outer-clock-face::after{
content: '';
width: 10px;
height: 100%;
background-color: #55e268;
display: block;
position: absolute;
left:50%;
margin-left: -5px;
border-radius: 10px;
}
在CSS中，position: absolute和position: relative是两种常用的定位属性，它们有以下不同之处：
- 相对定位（
position: relative）： 相对定位是相对于元素在正常文档流中的位置进行定位。 相对定位不会使元素脱离文档流，仍然占据原来的空间。 使用相对定位可以通过top、right、bottom、left等属性来调整元素的位置。 相对定位的定位参考物是元素自身。 - 绝对定位（
position: absolute）： 绝对定位是相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于最初的包含块（通常是<html>元素）进行定位。 绝对定位会使元素脱离文档流，不占据原来的空间。 使用绝对定位可以通过top、right、bottom、left等属性来调整元素的位置。 绝对定位的定位参考物是最近的已定位祖先元素或最初的包含块。 决定使用相对定位或绝对定位的因素包括： 定位需求：如果需要相对于元素自身进行定位，或者只需要微调元素的位置，可以使用相对定位。如果需要相对于其他元素进行定位，或者需要脱离文档流进行定位，可以使用绝对定位。 父元素的定位：如果需要相对于父元素进行定位，父元素需要设置为position: relative或position: absolute，以创建一个已定位的祖先元素。 布局需求：相对定位不会改变其他元素的布局，而绝对定位可能会影响其他元素的位置和布局。使用绝对定位或相对定位时，可以通过z-index属性来控制元素的层叠顺序。
