在css中哪个属性会影响dom读取文档流的顺序.direction，writing-mode

Posted 2023-04-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在css中哪个属性会影响dom读取文档流的顺序.direction，writing-mode相关的知识，希望对你有一定的参考价值。

参考技术A writing-mode
writing-mode这个CSS属性，我们是不是很少见到，很少用到！我们往往称不常见的东西为“生僻”，就像是不常见的文字我们叫“生僻字”，因此不常见的CSS属性，我们可以叫做“生僻属性”，writing-mode给我们的感觉就是一个“生僻属性”，很弱，可有可无。
但是，实际上，我们都错了，大错特错，writing-mode很弱？卧槽，别开玩笑了，writing-mode可以说是CSS世界里面最逆天的CSS属性了，直接颠覆CSS世界的众多规则。
而writing-mode之所以给人“生僻”的感觉，是有原因的。
实际上writing-mode这个CSS属性在上古时代就诞生了，IE5.5浏览器就已经支持了本回答被提问者采纳

JS的事件流的概念(重点)

在学习jQuery的事件之前，大家必须要对JS的事件有所了解。看下文

事件的概念

HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。

什么是事件流

事件流描述的是从页面中接收事件的顺序

1、DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：

① 事件捕获阶段；

② 处于目标阶段；

③ 事件冒泡阶段

那么其实呢，js中还有另外一种绑定事件的方式：看下面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
    <script>

    window.onload = function(){

        var oBtn = document.getElementById(\'btn\');

        oBtn.addEventListener(\'click\',function(){
            console.log(\'btn处于事件捕获阶段\');
        }, true);
        oBtn.addEventListener(\'click\',function(){
            console.log(\'btn处于事件冒泡阶段\');
        }, false);

        document.addEventListener(\'click\',function(){
            console.log(\'document处于事件捕获阶段\');
        }, true);
        document.addEventListener(\'click\',function(){
            console.log(\'document处于事件冒泡阶段\');
        }, false);

        document.documentElement.addEventListener(\'click\',function(){
            console.log(\'html处于事件捕获阶段\');
        }, true);
        document.documentElement.addEventListener(\'click\',function(){
            console.log(\'html处于事件冒泡阶段\');
        }, false);

        document.body.addEventListener(\'click\',function(){
            console.log(\'body处于事件捕获阶段\');
        }, true);
        document.body.addEventListener(\'click\',function(){
            console.log(\'body处于事件冒泡阶段\');
        }, false);

    };

    </script>
</head>
<body>
    <a href="javascript:;" id="btn">按钮</a>
</body>
</html>

当我们点击这个btn的时候，看看页面都输出了什么：