如何将字典格式的数据输出成json文件，并美化格式？...，横轴向右为正，纵轴向下为正。...2、整理数据，表明父级到子级的消费情况 因为桑基图的绘制是需要父级和子级节点之间的数据，所以我们需要先整体下数据： 下面的图形是5大主块的整理数据： 下面的图形是各个子块对应的父级和子级数据整理：...3、读取数据 然后将上面的两个数据放在一起，我们通过pandas读进来： 4、找到数据的父类和子类中总共有多少个不同的元素，并进行索引的设置 将父类和子类的中元素全部加起来，再用集合set去重，找出全部的节点名称...接下来我们需要对每个节点进行索引的设置： 将节点和索引进行字典形式的组合： 分别根据父类节点和子类节点来生成对应的索引数据： df["父类索引"] = df["父类"].map(index)
:nowrap; 元素尺寸 尺寸分为两类 「内部」尺寸：尺寸由内部元素决定 「外部」尺寸：尺寸由外部元素决定 在外部尺寸的范畴内，针对宽度的又分为两类: 正常流宽度 格式化宽度 而外部尺寸的块级元素一旦...margin属性的auto计算就是为「块级元素左中右对齐」而设计的。...只需要在父级元素中设置特定的属性，对应的子元素就会在垂直方向上居中显示。 那就是flex布局。... 我是一个多行文本信息 bala bala 在父级元素，一劳永逸的设置子元素居中样式 .flex-center {...利用一个伪类::before采用「幽灵节点」来实现。
block 设置元素为块级元素，块级元素可以独占⼀⾏，可设宽⾼，默认宽为父元素宽。 inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。...这个元素的所有直系子元素将成为网格元素 list-item 像块类型元素一样显示，并添加样式列表标记。 table 此元素会作为块级表格来显示。...修改此属性，会产生回流与重绘 修改此属性不会产生重排，只会产生重绘 继承性 非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示； 继承属性，可通过设置visibility:visible...*/ 我是用来测试伪元素的作用 伪类： 将特殊的效果添加到特定选择器上。...替换元素的尺寸从内而外分为3类：固有尺寸、HTML尺寸和CSS尺寸。
根元素：html 非溢出的可见元素：overflow 不为 visible 设置浮动：float 属性不为 none 设置定位：position 为 absolute 或 fixed 定义成块级的非块级元素...以下这个列表越往下层叠优先级越高，视觉上的效果就是越容易被用户看到（不会被其他元素覆盖）： 层叠上下文的 border 和 background z-index < 0 的子节点 标准流内块级非定位的子节点...::after 伪元素为在父元素的最后一个子元素后面生成一个内容为空的块级元素，然后通过 clear 将这个伪元素移动到所有它之前的浮动元素的后面，画个图来理解一下。...水平垂直居中 让元素在父元素中呈现出水平垂直居中的形态，无非就 2 种情况： 单行的文本、inline 或者 inline-block 元素； 固定宽高的块级盒子； 不固定宽高的块级盒子； 以下列到的所有水平垂直居中方案这里写了个...单行的文本、inline 或 inline-block 元素 水平居中 此类元素需要水平居中，则父级元素必须是块级元素(block level)，且父级元素上需要这样设置样式： .parent {
页面元素常见的水平居中方式 块元素外边距auto自动居中 为块元素添加margin:auto属性，兼容性好，PC端常用技术 内联元素text-align文本居中 父元素设定text-algin:center...为父元素添加padding-top去控制子元素 给父元素设置溢出隐藏（overflow:hidden）触发bfc机制 给父元素或者子元素添加浮动，让其脱离标准流 将父元素转变为行内块元素，display...作用域的分类 全局作用域：代码中任何地方都能访问到的变量 局部作用域：函数内可访问的变量 ES6中的块级作用域：通过let或const声明，所声明的变量在指定块中被访问 作用域链的概念 作用域链：变量取值是在创建这个变量的函数的作用域中取值...var不存在块级作用域，let和const存在块级作用域。 谈谈对闭包的认识 闭包的概念 一个函数访问了此函数的父级及父级以上的作用域中的变量，这个函数就是闭包。...注意：HTML中的每个标签元素，属性，文本都可以看做是一个DOM的节点，构成了DOM树。
important ---- 流、元素 块级元素 常见的块级元素 「块级元素和display为block的元素不是一个概念」 元素默认的display值是list-item...从「定义」上：内联元素的内联特指外在盒子 从「表现」上：可以和文字在一行显示 幽灵空白节点 在H5文档声明中，内联元素的所有解析和渲染表现就，如同每个「行框盒子」的前面有一个空白节点一样，这个空白节点...通过设置的width为100%，自适应父容器。...」--正确的解法是把子元素的z-index设置为负数，这样父元素是一个块级元素，z-index<0 的子元素会在块级元素之下，就可以实现我们想要的效果。...:78px; // 不能缺 } 多个块级元素-水平居中 // xx 会被后续的特定的类名替换 块1 <
，例如HTMLElement接口是所有HTML元素的基本接口，而SVGElement接口是所有SVG元素的基础，大多数功能是在这个类的更深层级的接口中被进一步制定的。...属性 所有属性继承自它的祖先接口Node，并且扩展了Node的父接口EventTarget，并且从ParentNode、ChildNode、NonDocumentTypeChildNode和Animatable...Element.prototype.getElementsByClassName(): 参数中给出类的列表，返回一个动态的HTMLCollection，包含了所有持有这些类的后代元素。...Element.prototype.insertAdjacentHTML(): 将文本解析为HTML或XML，并将结果节点插入给定位置的树中。...Element.prototype.scrollTo(): 滚动到给定元素内的一组特定坐标。 Element.prototype.setAttribute(): 设置当前节点的命名属性的值。
# CSS 优先级 内联 > ID 选择器 > 类选择器 > 标签选择器 具体到计算层面，优先级由 A、B、C、D 的值来决定，计算规则如下： A 存在内联样式 A 值为 1，否则为 0 B 值为 ID...伪类：以冒号为前缀，被添加到一个选择器末尾的关键字，样式在特定状态下才被呈现到指定的元素 CSS 2.1 E:first-child 匹配父元素的第一个子元素 E:link 匹配所有未被点击的链接...默认宽度为内容宽度，不可设置宽高，同行显示 inline-block 默认宽度为内容宽度，可以设置宽高，同行显示 list-item 像块类型元素一样显示，并添加样式列表标记 table 此元素会作为块级表格来显示...，如果自身定义了 font-size 按自身来计算（浏览器默认字体是 16px），整个页面内 1em 不是一个固定的值 rem：相对单位，可理解为"root em",相对根节点 html 的字体大小来计算...，并且所有表达式的值都是 true，那么该媒体查询的结果为 true，那么媒体查询内的样式会生效。
vertical-align 属性值 “除 Inherit 继承 之外，vertical-align 的属性值可以归为以下 4 类 线类，如 baseline、top、middle、bottom； 我们可以把每一个行框盒子的后面想象有一个看不见的节点...如上图所示，第一个元素基线是子元素”文本“的基线，而第二个是盒子的底边缘，默认基线对齐，两个元素基线位置不一致，所有会产生上图现象，知道了原因，我们只需设置元素的 vertical-align 属性为...文本类 “text-top，指的是盒子的顶部和父级内容区域的顶部对齐，即与 content-area 顶部对齐。...那如果父级的高度是随着内容的变化而变化的怎么办？此时无法给父级设置一个特定的值，也不能使用百分比，因为 line-height 是根据字体的大小来计算的。...按照之前的讲解，我们可以借助空白节点，空白节点我们看不见，但是如果可以给它设置一个高度，让它与父级高度一致，就解决了这个问题。怎么给高度呢？答案是借助伪元素。
::first-line | 选择文本的第一行 ::first-line 伪元素在某块级元素的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。...子元素只可以是元素节点或文本（包括空格）,注释或处理指令都不会产生影响。....innerDiv p:first-of-type { color: orangered; } 上面表示将 .innerDiv 内的第一个元素为 p 的颜色设置为橘色。...当代码类似Parent tagName:last-of-type的作用区域包含父元素的所有子元素中的最后一个选定元素，也包括子元素的最后一个子元素并以此类推。....innerDiv p:last-of-type { color: orangered; } 上面表示将 .innerDiv 内的的最后一个元素为 p 的颜色设置为橘色。 ?
top; } // 除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的和值都可以...，p是img的父节点 12....: 100px; } // 要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。...该方法优点在于结构简洁，不理想的地方：1.由于使用场景不同，负缩进的值可能会不一样，不易抽象成公用样式；2.当该元素为链接时，在非IE下虚线框将变得不完整；3.如果该元素被定义为内联级或者内联块级，不同浏览器下会有较多的差异...设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并； 22.
兼容性：IE8+、FireFox、Chrome、Safari、Opera 通用兄弟选择器 概念：选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素 语法格式：元素 ~ 后面所有兄弟相邻元素...属性值为 "value”或以 "value-" 开头的元素 兼容性：IE8+、FireFox、Chrome、Safari、Opera 三、伪类选择器 1、动态伪类 锚点伪类 :link,...概念：匹配没有子元素（包括文本节点）的每个元素 兼容性：IE9+、FireFox、Chrome、Safari、Opera 否定选择器（:not） 概念：匹配非指定元素/选择器的每个元素...Element::first-line 概念：根据 "first-line" 伪元素中的样式对 Element 元素的第一行文本进行格式化 说明："first-line" 伪元素只能用于块级元素...Element::first-letter 概念：用于向文本的首字母设置特殊样式 说明："first-letter" 伪元素只能用于块级元素 Element::before 概念
，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式 修改常规流中元素的...如果是单行文本, line-height 设置成和 height 值 .vertical { height: 100px; line-height: 100px; } 已知高度的块级子元素...50%*/ margin-top: -150px; /*自身高度一半*/ } 未知高度的块级父子元素居中，模拟表格布局 缺点：IE67不兼容，父级 overflow：hidden 失效 .container...，那么撑开容器高度的是 line-height 而不是容器内的文字内容 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中 line-height 和 height...例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px 百分比：将计算后的值传递给后代 设置元素浮动后，该元素的 display 值会如何变化？
通配符、子选择器、相邻选择器等，权值为0001。 继承的样式没有权值，通配选择器定义的规则优先级高于元素继承过来的规则的优先级。 !...可以通过直接给父元素设置height，实际应用中我们不大可能给所有的盒子加高度，不仅麻烦，并且不能适应页面的快速变化；另外一种，父容器的高度可以通过内容撑开（比如img图片），实际当中此方法用的比较多。...这里强调一点，即在父级元素末尾添加的元素必须是一个块级元素，否则无法撑起父级元素高度。...给父元素使用overflow:hidden 这种方案让父容器形成了BFC（块级格式上下文），而BFC可以包含浮动，通常用来解决浮动父元素高度坍塌的问题。 设置zoom:1清除浮动原理?...如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 优缺点：em的值并不是固定的，它会继承父级元素的字体大小。
本来为译文，原文请戳这里 这篇文章解释了Flutter中Semantics的概念。 难度：入门级。...isSelected 该节点是否被选中 isTextField 该节点是否文本字段 hint 在此节点上执行操作的结果的简要说明 label 节点描述 value 对值的文字性描述 ** 具有语义的隐式...如果值为false，则此语义将与父Semantics合并 explicitChildNodes false 该控件的子控件是否允许将Semantics信息添加到该控件的SemanticsNode中 如何不使用...如何将控件重组成一个Semantics? 在某些情况下，您可能还想重新组合一组控件的所有Semantics。...如何调试Semantics 最后，如果要调试app中的Semantics，可以将MaterialApp的showSemanticsDebugger属性设置为true。
1.关于es5和es6得继承问题 es5的继承是 先创建子类的实例对象，然后将父类的方法添加到this上，Parent.apply(this) es6的继承是 先创建父类的实例对象this，所以先调用父类的...HTML outerHTML设置或获取对象以及起内容的HTML形式 3.块级绑定 image.png 3.1var声明与变量提升 es6的块级绑定 变量创建的位置取决于你如何声明它 var...块级声明 块级作用域（又称为词法作用域） 块级声明，就是让所声明的变量在指定块的作用域外无法被访问 创建： 块级作用域： 在一个函数的内部 在一个代码块内部 let声明 在项目中常用let来代替...子节点，即返回节点元素 el.childNodes，返回指定节点的所有子节点，包括节点元素和文本元素 6.JavaScript语法 image.png 方法：将JavaScript代码放到文档...节点：元素节点，文本节点，属性节点 获取元素节点的方法：通过元素ID，通过标签名，通过类名字 getElementById，这个方法将返回一个与那个给定id属性值的元素节点对应的对象。
.}; 选择所有元素； 2. HTML标签选择器：p{...} 、#p{...}、.p{...}; 选择指定的所有标签，指定id，指定类的所有标签； 3....类选择器选择有特定 class 属性的 HTML 元素，如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。...子选择器： E > F{sRules}，E>F选择器为特定元素E的下一级的子元素F，不包括下下级及其更下级，“>” 左右空格无影响。 4....flex-shrink，默认为1，所有子元素的长宽超出父元素时的缩放占比（超出的长宽除以所有子元素的shrink加起来的数量，就是单份缩放的大小，为0时代表不进行缩放） flex-grow，默认为0，所有子元素的长宽超出父元素时的缩放占比...解决办法： 将父元素 container 的字体大小设置为 0，然后单独设置元素的字体大小。 在两个容器内元素的html代码之间加注释符号 ; 5.
版本 tag 标签选择器 指定类型的标签 1 #id ID选择器 指定身份的标签 1 .class 类选择器 指定类名的标签 1 * 通配选择器 所有类型的标签 2 标签名{...3.1 块级盒子 (block box) 和 内联盒子 (inline box) 块级盒子 (block box) 和 内联盒子 (inline box)会在页面流（page flow）和元素之间的关系方面表现出不同的行为...： 块级盒子（block） 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽 每个盒子都会换行 width 和 height 属性可以发挥作用 内边距...3.4 小知识点 行高 常用于设置“垂直居中” 块级标签（inline－block，block）才可以设置宽高，行级标签（inline）的宽高取决于内容 脱离标准流：浮动（float）、绝对定位（Absolute...positioning） 如果想相对于父节点进行定位：最好设置父节点的position为relative， 原则“子绝父相”。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
