ECMAScript、html头、dom、bom、a空链、选择器、css样式继承等、css通用属性值、文档流等

前言

平时开发基本都是 react、vue 直接手脚架一上，直接就开干了，很少接触 html头、bom、css基础等内容，实际上这里面还是有一点知识的，只不过这些大型框架让我们忽略了对他们了解，其中选择器只会标签选择器、类选择器、id选择器的也可以多了解一些了，同时还有一些常见的概念不太了解

本文主要将 ECMAScript、html头、dom、bom、a空链、选择器、css样式继承、css可见性、css通用属性值、文档流、BFC（块级格式化上下文）与层叠上下文、包含块 等常见的一些零碎知识点

ECMAScript、javascript

这里提到了ECMAScript是因为当初我也不知道他是干啥的，只是认为他就是javascript一部分，不仅如此，发现了不少一样的，都不知道

ECMAScript 实际上就是 javascript 的标准规范，可以理解为是一个JavaScript使用文档，能协助以及规范开发者正确使用 javascript，毕竟 javascript 简单而又灵活的特性，没有标准也更容易成为毒瘤

javascript：都笑称他和 java 很像，实际上很多开发语言都很像，他只是和 java 名字有点像，实际上没啥关系，它是一门脚本语言，又被称为解释性语言，解释执行，因此比一些编程语言效率低不少，但丝毫不影响他的地位，毕竟简单易上手的特性，以及现在庞大的生态，让他发挥着自己的光芒

现在的 JavaScript 生态极其庞大，例如：前端(react、vue)、移动端(RN)、小程序、脚本、后端(nodejs)、桌面端(Electron)、3d应用(threejs)、游戏等

html头基础

html过去用的比较多，现在一般都是 react、vue 直接写项目，直接改动设置的非常少，因此了解的也相对更少，这里也是多了解了一些，并记录一下

js 复制代码

//标记文档类型
<!DOCTYPE html>
// html 标签
//<html lang="en">
<html lang="zh-CN">
  //head标签头
  <head>
    //设置网页编码为 UTF-8 这样能识别很多类型文本，可以保证页面正常显示，unicode 对于中文就无能为力
    <meta charset="UTF-8" />
    
    //设置视口宽度为设备宽度（响应式设计），默认比例scale缩放为1
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <meta name="keywords" content="我是搜索关键字内容" />
    
    <meta name="description" content="我是网页内容" />
    
    <meta
      name="description"
      content="我是网页内容,我是创建的react、vue app"
    />
    
    // http-equiv 相当于http的文件头作用，content传递一些头内容
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    
    //网页重定向 5s 之后跳转，一些卖的简单网站会跳转，可能就是这样，当然也可能是js跳转
    <meta http-equiv="refresh" content="5;https://www.baidu.com" />
    
    //icon图标
    <link rel="icon" href="favicon.ico" />
    
    // touch 的图标
    <link rel="apple-touch-icon" href="logo192.png" />
    
    //链接外部样式
    <link rel="stylesheet" href="main.css" />
    
    <title>我是标题</title>
    
    //html样式类信息
    <style>
        body { 
            font-family: Arial, sans-serif; 
        }
    </style>
    
    //脚本信息
    <script>
     //脚本js信息
    </script>
  </head>
  //给用户看的内容 body
  <body>
    <div id="root"></div>
  </body>
</html>

html 的高度一般是自适应的，如果想要页面高度占满，则需要 html、body 同时设置 100%

js 复制代码

//这里额外设置一个 root id选择器
html, body, #root {
    width: 100%;
    height: 100%
}

dom

DOM：(Document Object Model, 文档对象模型)是文档内容（HTML或XML）在编程语言上的抽象模型，它提供了操纵文档的API，可以让开发者们更好的理解可操作文档内容，可以参考这篇文章

DOM节点：简称节点（Node），是DOM模型的组成单元。HTML的基本单元是标签，节点常常与标签对应，但连续的文本内容也是一个文本标签。

DOM树：DOM树是DOM结构的表示形式，DOM把文档的每个节点根据父子关系连接，形成DOM树。

dom 常见方法

js 复制代码

-   document -- 入口节点。
-   document.documentElement -- HTML节点。
-   document.head -- head节点。
-   document.body -- body节点。

//通过selector来查找 dom
const element = document.querySelector*

//通过name、id等查找
const element = document.getElementBy*

//可以读取和更新样式等信息
element.style.fontSize

//也可以自己手动创建
document.createElement('div')

//下面两个获取元素信息的方法，浏览器为了获取准确信息，会强制回流重新计算，需要注意不必要的使用
//获取元素的宽高等
element.clientWidth
//获取元素的rect信息
element.getBoundingClientRect()

bom

BOM：(浏览器对象模型,Browser Object Model) 主要讲的是浏览器暴露给我们操作和获取浏览器信息的API，由下边6部分组成：

Location

Location的属性

属性	描述	栗子
hash	获取锚点，就是url的#后边	#detail?id=1
host	url的端口 + 端口	www.baidu.com:8080
hostname	主机路径	www.baidu.com
href	完整url	www.baidu.com?id=1
pathname	返回当前 URL 的路径部分	/index.html
port	端口	8080
protocol	协议	http或htttps
search	协议	获取search(query)参数，简单来说就是url的?后边 id=1&name

Location的方法

方法	描述
assign	加载新的文档
reload	重新刷新页面
replace	用新的文档替换当前文档

Navigator

属性	说明
appCodeName	返回浏览器的代码名
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值
platform	返回运行浏览器的操作系统平台
userAgent	返回由客户机发送服务器的user-agent 头部的值

Screen

属性	说明
availHeight	返回屏幕的高度（不包括Windows任务栏）
availWidth	返回屏幕的宽度（不包括Windows任务栏）
colorDepth	返回目标设备或缓冲器上的调色板的比特深度
height	返回屏幕的总高度
pixelDepth	返回屏幕的颜色分辨率（每象素的位数）
width	返回屏幕的总宽度

History

属性	说明
back	返回上一页
forward	返回下一页
go	加载 history 列表中的某个具体页面

a标签空链

a标签空链(#)，也是早期为了希望标签具备按钮的效果，而衍生出来的操作，现在基本很少用了，了解即可

将 href 设置为 #，也就是空链#，其仅仅在导航加入一个 #，并不会跳转，因此有了点击特效的同时，也不会跳转还同时触发了点击事件，通过设置监听点击事件，然后阻止后续行动，则可以完美让 <a> 标签具有按钮的交互效果

js 复制代码

<body>
    <a href="#" id="showContent1">显示内容 1</a>
    <a href="#" id="showContent2">显示内容 2</a>
    <div id="content1">这是内容 1</div>
    <div id="content2">这是内容 2</div>
    <script>
        const showContent1 = document.getElementById('showContent1');
        const showContent2 = document.getElementById('showContent2');
        const content1 = document.getElementById('content1');
        const content2 = document.getElementById('content2');

        showContent1.addEventListener('click', function (event) {
            event.preventDefault();
            content1.style.display = 'block';
            content2.style.display = 'none';
        });

        showContent2.addEventListener('click', function (event) {
            event.preventDefault();
            content2.style.display = 'block';
            content1.style.display = 'none';
        });
    </script>
</body>

选择器

能用到的选择器有很多，如：元素选择器、类选择器、id选择器、通配符选择器、属性选择器、后代选择器、子选择器、(相邻)兄弟选择器、伪类选择器、伪元素选择器

其中前三个也算是最常用的了，后面的都是看情况使用了(根据id查的时候也记得要跟css里面的名称一样 name .name、#name)

元素选择器(标签选择器)

根据元素(标签) 直接设置 css 样式

js 复制代码

<body />

//直接设置body标签
body {
    width: 100%;
    height: 100%;
}

类选择器

则是通过 class、className 等筛选出的dom元素，叫类选择器，css 中使用 .设置样式，需要注意的是元素本身没有 className，这是 react 中虚拟的 dom 属性，因此复制粘贴的时候也需要注意

js 复制代码

<div class="bkg" />
<div className="bkg" />

.bkg {
    width: 100%
}

id选择器

通过设置 id 属性筛选出需要的dom，叫id选择器，css 中使用 # 表示

js 复制代码

<div id="bkg" />

#bkg {
    width: 100%
}

通配符选择器

大量匹配的选择器(*)，用的很少，毕竟很少有样式这么大规模使用，甚至还会浪费一些资源

js 复制代码

//应用所有节点
* {
    width: 100%
}

属性选择器

根据 dom 的属性来确定节点设置 css 样式

[attribute]：选择具有指定属性的元素。
[attribute=value]：选择具有指定属性且属性值等于指定值的元素。

js 复制代码

<input type="text" placeholder="输入文本">
<input type="password" placeholder="输入密码">

//设置具备type属性，且内容为 text 的dom样式
input[type="text"] {
    border: 1px solid red;
}

//设置具备type属性的dom样式
input[type] {
    font-size: 16px;
}

交集选择器

多个属性取交集的的选择器，中间没有间隔符，直接连接到一起

js 复制代码

<div class="bkg" />
<div class="lala" />
<div />

//则只有标签同时为div class选择器为bkg的生效，也就是第一个生效
div.bkg {
    background: red;
}

并集选择器

并集选择器，是一个 css 样式同时应用到多个 dom 节点，因此也就是多个选择器设置同一个样式，选择器之间使用 ，隔开

js 复制代码

<div id="bkg">
    <span />
    <span class="child1" />
    <div>
        <span class="son1" />
    </div>
<div>

//child1，son1 两个节点同时生效
.child1,son1 {
    color: red;
}

后代选择器

表示对某个节点的所有后代生效，也比较常见，使用空格隔开

js 复制代码

<div id="bkg">
    <span />
    <span />
    <div>
        <span />
    </div>
<div>

//id选择器下的所有 span 后代节点全部生效，也就是满足条件的有三个 span 元素
#bkg span {
    color: black;
}

子选择器

表示对某个选择器下的子节点生效(仅仅是下面一层子节点)，也比较常见，使用>隔开

js 复制代码

<div id="bkg">
    <span />
    <span />
    <div>
        <span />
    </div>
<div>

//id选择器下的 span 子节点全部生效，也就是满足条件的这一层只有两个 span 元素
#bkg > span {
    color: black;
}

(相邻)兄弟选择器

兄弟选择器分为 相邻兄弟选择器+、通用兄弟选择器~，他们的都是在队友选择器之后，只不过相邻的生效后面一个，通用的则是生效后面所有

相邻兄弟选择器~

js 复制代码

<div id="bkg">
    <span id="child" />
    <span id="child1" />
    <span id="child2" />
    <span id="child3" />
<div>

//只有 child2 节点生效，child节点在child1前面不生效
#child1 + span {
    color: red;
}

通用兄弟选择器~

js 复制代码

<div id="bkg">
    <span id="child" />
    <span id="child1" />
    <span id="child2" />
    <span id="child3" />
<div>

//child2、child3 节点均生效，child节点在child1前面不生效
#child1 ~ span {
    color: red;
}

伪类选择器

伪类选择器使用 : 隔开，其有很多指定选择器，例如：hover、first、last、nth-child 等，

js 复制代码

a:hover {
    color: orange;
}

伪元素选择器

伪元素选择器使用 :: 隔开，最常见的就是 before、after 了

js 复制代码

a:after {
    content: '*';
}
a::after {
    content: '啦啦啦啦';
}

选择器优先级

属性冲突时则根据优先级生效，只需记住应用范围越广的优先级自然更低，尽量避免属性冲突才是关键

我们比较选择器优先级的时候，一般都会带上 !important、style，毕竟知识逐渐扩展的，因此实际上比较的就是作者样式表的优先级 了

!importment > style > id选择器 > class选择器 | 属性 > 标签选择器 > 通配符选择器*

这些样式优先级默认是有权重的，会根据实际权重来决定先后顺序，同样的权重，后添加的覆盖先添加的

ps：优先级相同时，比较的就是书写顺序了

css 样式继承

css 样式继承很多人都会忽略甚至不知道，然后傻傻的写一堆一样的样式，不仅代码多，还浪费时间，下面简单介绍下样式继承

css 样式继承主要是针对文本类的属性，文本类的属性，可以继承给后代文本，例如：color、font-family、font-size、font-style、font-weight、text-align、line-height等

其他的即使有一般用于继承的也不多，例如：cursor

css可见性

我们开发时，有时会需要显示隐藏一些 dom 节点，这就是这里讲的 css 可见性了

一般用 react、vue 直接用参数控制节点是否展示就行了，除了这些，还有一些属性对于显隐也有帮助

例如： overflow: hidden、visibility: hidden、display: none；

js 复制代码

//隐藏元素，有点像隐身了，但是还占据原来的位置
visibility: hidden; 

//不展示元素，这就和我们参数控制的类似了，直接就消失了，也不占位置
display: none;

//超出后隐藏，这个和上面的有些不一样，仅仅超出 bfc包含块 的边界后 才会隐藏🤣
overflow: hidden;

css通用属性值 initial、unset、revert

initial、inherit

initial：将一个属性恢复到浏览器的属性默认值，不需要关注以前具体设置了啥属性

但仍然需要关注样式继承问题，例如：padding 不继承样式，可以使用 initial

但是 font-size 这种可能需要继承样式，就需要使用inherit了，否则设置成 initial 则无法继承样式了

unset

unset：将一个属性取消设置，可以理解为没写过这条属性，可继承的 CSS 属性值都为 inherit ，不可继承的 CSS 属性值都为 initial

使用此方法还可以取消掉浏览器的默认设置，例如：all: unset 可以取消掉一个标签在浏览器的默认样式

revert

revert：将当前样式回归到浏览器的默认样式，例如：设置了一组按钮，但是就是有一个按钮适合系统的效果，就可以单独设置 revert

文档流(脱离文档流)

经常会听到一句文档流、标准流这个词，也经常会听说脱离文档流这个词

文档流：HTML 元素在网页中默认的排列方式和布局规则，它是理解 CSS 布局的基础概念之一，一般元素会按照其固定顺序，从上往下、从左往右排列，这种排列方式形成了正常的文档流

脱离文档流：一些元素不按照从上往下、从左往右排列，脱离了原有的位置，因此叫做脱离文档流，例如：float: left；float:right; 也会脱离文档流；当然还有flex布局、绝对布局等也会改变文档流，从文档流概念可以猜出来有哪些

清除float浮动

浮动（float）元素会脱离正常的文档流，这可能会导致其父元素高度塌陷，影响页面布局，清除浮动需要在尾部添加一个元素，并设置clear；例如 clear: both;，可以确保该元素的两侧不允许有浮动元素，从而使父元素能够包含浮动元素，避免高度塌陷
块级格式化(BFC)上下文是一个独立的渲染区域，规定了内部的块级元素如何布局，并且与外部元素相互隔离。创建 BFC 可以清除内部浮动元素对外部的影响，例如：浮动元素父元素，设置 overflow 属性，例如：overflow: auto overflow: hidden 等
伪元素(::after) 浮动元素父元素设置 after 伪元素，里面设置 clear 即可，也是比较推荐的方案

js 复制代码

.parent {
    overflow: auto;//hidden
}

.parent::after {
    content: "";
    display: block;
    clear: both;
}

BFC（块级格式化上下文）与层叠上下文

BFC（块级格式化上下文）与层叠上下文不是一个概念，虽然某些方面有些看着相似(毕竟都是上下文😂)，它们是 CSS 中两个不同且各自独立的重要概念，在网页布局和元素显示方面有着不同的作用和特性，具体区别如下：

ps：层叠上下文，前面也有讲过，篇幅略长，不多介绍了哈

定义和作用

BFC（块级格式化上下文）：它是一个独立的渲染区域，具有自己的布局规则。在 BFC 内部，块级元素按照垂直方向依次排列，并且 BFC 会隔离内部元素与外部元素的布局影响，同时解决一些布局问题，比如包含浮动元素以避免父元素高度塌陷等。

层叠上下文：它是一个三维的概念，用于决定元素在 z 轴上的堆叠顺序。处于层叠上下文中的元素，会根据特定的规则（如 z-index 值等）来确定谁在上面显示，谁在下面显示，主要影响元素之间的层叠关系和显示顺序。

BFC 的创建

根元素 html 本身就是一个 BFC。
元素设置 float 值不为 none（如 float: left 或 float: right）。
元素设置 position 值为 absolute 或 fixed。
元素设置 display 值为 inline-block、table-cell、table-caption、flex、inline-flex、grid 或 inline-grid 等。
元素设置 overflow 值不为 visible（如 overflow: hidden、overflow: auto 等）。

层叠上下文的创建

根元素 html 是一个层叠上下文的根。
元素设置 position 值为 relative 或 absolute 且 z-index 值不为 auto。
元素设置 position 值为 fixed 或 sticky。
元素设置 display 值为 flex 或 inline-flex 且其 z-index 值不为 auto 时，子元素会创建层叠上下文。

影响的方面

BFC：主要影响元素的布局和排版，例如控制元素的边距合并，处理浮动元素带来的布局问题等。
层叠上下文：主要影响元素在页面上的层叠显示顺序，决定哪些元素会覆盖在其他元素之上。

例如，在一个包含浮动元素的父容器中，通过将父容器设置为 BFC（如 overflow: hidden）可以使其包含浮动元素，避免高度塌陷；而当有多个元素设置了不同的 z-index 值且处于层叠上下文中时，它们会按照 z-index 大小等规则在垂直方向（z 轴）上进行层叠显示。

包含块

前面的文章也有讲过，直接沾过来了

我们以前应用布局的时候，经常会参考父元素，因此写文章很多基本上也会提到相对于父元素，实际上很多我们眼中的父元素，其更精确的概念应该是包含块，因为单纯的父元素他不精确，有些是浮动元素或者定位元素，就不是明显的父子关系了

包含块确定规则

常规元素和浮动元素父元素的内容盒
绝对定位 absolute: 第一个定位祖先的填充盒（padding + content）
固定定位 fixed:
- 无变形祖先-往上找找不到使用了 transform 的父元素，其就是包含块就是视口
- 有变形祖先-包含块有的祖先使用了 transform，就是变形祖先，包含块就是变形祖先

ps：看了fixed 这些是不是感觉天塌了，以前学的定位不太准了，实际上不是的，只是我们接触到得更深了，也能避免更多问题了，下面的 fixed 变形祖先实际上平时根本接触不到，因此按照以前总结也没啥问题，就当牛顿和爱因斯坦理论在合适的地方使用就好了，碰到了问题我们也知道咋回事咋解决就行了

更新一下我们的知识点，父元素换成包含块就正确了，否则全是不准确的哈

元素的 width 百分比相对的是 ~~父元素~~ 包含块 宽度
元素的 height 百分比相对的是 ~~父元素~~ 包含块 高度
元素的 margin 百分比相对的是 ~~父元素~~ 包含块 宽度
元素的 padding 百分比相对的是 ~~父元素~~ 包含块 宽度
元素的 left 百分比相对的是 ~~父元素~~ 包含块 左边缘
元素的 top 百分比相对的是 ~~父元素~~ 包含块 右边缘

视口

视口：可以理解为我们的浏览器查看网页的窗口，窗口内展示我们的网页内容，当然移动端、电视视口都是一样的

就好比在室外通过窗户、门口看室内一样，这个窗户、门口就是一个视口，看到屋内情况的视口，如果想让用户能了解到房间更多信息，因为视口大小不能变化，可以通过缩小内容，或者滚动的方式方便查看用户文档，提升体验

最后

就介绍到这里了，这也算是对基础的一些补充了，多次接触，一些不牢固的知识点，他就牢固了🤣