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

Day1

news 2025/11/21 2:44:54

从今天开始记录

$ HTML$ 篇：

$ src $ 和 $ href $ 区别

主要功能：加载外部资源
1.$ src $ 当浏览器解析到该元素的时候，会暂停其他资源的加载和处理，直到该资源加载完成。
2. $ href $ 指向外部资源所在的位置，和当前元素位置建立链接，当浏览器识别到他指向的位置，将其下载的时候不会阻止其他资源加载解析。

$ script $ 标签中 $defer$ 和 $async$ 的区别
主要功能：都表示异步加载外部 $js$ 脚本，不会阻碍页面的加载解析。

执行顺序: 多个标签 $async$ 不能保障先后的执行顺序，但是 $defer$ 可以.
是否立即执行：$async$ 加载完脚本后会立即执行，但是 $defer$ 是要等文档解析完成之后才执行.

$CSS$ 篇

隐藏元素的方式

$display: none :$ 元素在文档中不存在，不会占据位置。交互失效。
$visibility: hidden :$ 元素在文档中的位置还保留，仍然会占据空间。交互禁用。
$opacity: 0 :$ 将透明度设为0。仍然可以交互。
$z-index:$ 负值 : 直接将元素放置到最下层，利用其他的元素来遮盖。可以触发交互。
$position: absolute $ : 将元素定位到可视区域外。无法交互。

文本溢出

单行文本溢出

overflow: hidden;//溢出隐藏
text-overflow:ellipsis;//溢出的部分用省略号表示
whtie-space:nowrao;//规定段落中的文本不进行换行

多行文本溢出

overflow: hidden;//溢出隐藏
text-overflow:ellipsis;//溢出的部分用省略号表示
display:-webkit-box;//作为弹性伸缩盒子模型显示

$ Sass $ 和 $Less $ 的区别

都是 $ CSS $ 预处理器，是 $ CSS $ 上的一种抽象层。他们是一种特殊的语法/语言编译成了 $ CSS $ 。他们增加了 $ CSS $ 的复用性。

编译环境: $ Sass $ 是在服务器端处理。$Less$ 需要引入 $less.js$ 来处理 $Less$ 代码输出 $CSS$ 到浏览器，也可以在开发服务器将 $Less$ 语法编译成为 $ CSS $ 文件，输出 $ CSS $ 文件到生产包目录。
变量符号不一样， $Less$ 的是 $@$ ,而 $Scss$ 的是 $ $ $ 。
$Sass $ 支持条件语句，可以使用 $ if $ $else$ $ for $循环等。

水平垂直居中

利用绝对定位:

绝对定位

.parent{position :relative;
}
.child{position : absolute;left: 50%;top: 50%;// 将元素左上角定位到页面中间。transform: translate(-50%,-50%);
}

2.绝对定位（2）

绝对定位2

.parent{position :relative;
}
.child{position : absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;//对应方向实现平分，适用于有宽高的情况。
}

$flex$ 布局

flex布局

.parent{
display: flex;
justify-content: center;
align-items: center;//通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。}