文档流 | 易学教程

详解回流和重绘及优化

阅读更多关于详解回流和重绘及优化

回流和重绘可以说是每一个web开发者都经常听到的两个词语，看了一些博客和书籍，整理了一些内容并且结合自己的体会，写了这篇文章，希望可以帮助到大家。 1. 浏览器的渲染过程 1.1 渲染过程本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，可以跳到后面。（这个渲染过程来自 MDN ）从上面这个图上，我们可以看到，浏览器渲染过程如下：解析HTML，生成DOM树，解析CSS，生成CSSOM树将DOM树和CSSOM树结合，生成渲染树(Render Tree) Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小） Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素 Display:将像素发送给GPU，展示在页面上。 1.2 生成渲染树渲染过程看起来很简单，让我们来具体了解下每一步具体做了什么。为了构建渲染树，浏览器主要完成了以下工作：从DOM树的根节点开始遍历每个可见节点。对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们。根据每个可见节点以及其对应的样式，组合生成渲染树什么是不可见节点一些不会渲染输出的节点，比如script、meta、link等。一些通过css进行隐藏的节点。比如display:none。注意

CSS样式属性

阅读更多关于 CSS样式属性

CSS属性属性1 宽和高 width 属性可以为元素设置宽度 height 属性可以为元素设置高度 PS：只有块级标签才可以设置宽度，内联标签的宽度由内容决定。属性2 字体属性文字字体： font-family 可以存放多种字体，如果浏览器不支持第一种字体会自动尝试下一种，浏览器会使用它能识别的第一种字体。如果到最后都没有浏览器支持的字体，那么就会使用浏览器的默认字体显示。 body { font-family: "Microsoft Yahei", "微软雅黑", "Arial" } 字体大小： font-size ，可以设置为数字px形式和 inherit ，设置为 inherit 表示继承父元素的字体大小值。字重： font-weight 用来设置字体的字重（粗细）。值描述 normal 默认值，标准粗细 bold 粗体 bolder 更粗 lighter 更细 100~900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值字体颜色： color 用于设置字体的颜色，颜色可以通过三种形式指定：十六进制：如：#FF000 (前两位表示Red，中间两位表示Green，最后两位表示Blue) 一个RGB值：如： RGB(255,0,0) (第一个数字表示Red，第二个数字表示Green，第三个数字表示Blue

Python自动化开发课堂笔记【Day13】 - 前端补充（HTML & CSS）

阅读更多关于 Python自动化开发课堂笔记【Day13】 - 前端补充（HTML & CSS）

伪类 1. anchor伪类：专用于控制链接的显示效果 a:link（没有接触过的链接）,用于定义了链接的常规状态。 a:hover（鼠标放在链接上的状态）,用于产生视觉效果。 a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。 a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。伪类选择器 : 伪类指的是标签的不同状态: 　　　　　　 a ==> 点过状态没有点过的状态鼠标悬浮状态激活状态 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .top{ background-color: rebeccapurple; width: 100px; height: 100px; } .bottom{ background-color: green

HTML 之 CSS

阅读更多关于 HTML 之 CSS

CSS 　　　　　　CSS：CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。一、CSS 的四种引用方式　　1.1 行内式　　　行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。 1 <p style="color: slateblue;background-color: black">hello p</p> 　　1.2 嵌入式　　　嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中，不推荐使用。格式如下： 1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 5 <style> 6 div{ 7 color: red; 8 background-color: gray; 9 } 10 </style> 11 </head> 　　 1.3 链接式　　　将一个.css文件引入到HTML文件中，强烈推荐使用。 1 <link type="text/css" rel="stylesheet" href="css.css"> 　　　css.css 是一个 CSS 文件，封装了 CSS 代码。　　1.4 导入式　　　将一个独立的

CSS基础知识

阅读更多关于 CSS基础知识

一、基础知识 1.定义 CSS：层叠样式表，定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 2.CSS语法每个CSS样式有两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 3.CSS注释 /*这是注释*/ 4.CSS的几种引入方式（1）行内样式行内式是在标记的style属性中设定CSS样式。 <p style="color: red">Hello world.</p> （2）内部样式嵌入式是将CSS样式集中写在网页的<head></head>标签的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> （3）外部样式外部样式就是将CSS写在一个单独的文件中，然后在页面进行引入即可。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 二、CSS选择器 1.基本选择器（1）标签选择器 p {color: "red";} （2）ID选择器 #i1 { background-color: red; } （3）类别选择器

CSS知识速递

阅读更多关于 CSS知识速递

CSS的四种引入方式 1.行内式行内式是在标记的style属性中设定CSS样式，这种方式没有体现出CSS的优势，不推荐使用。 <p style="background-color:red">CONTENT</p> 2.嵌入式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 3 链接式（推荐使用）将一个.css文件引入到HTML文件中，<link>标记写在<head>标记中，体现出css的优势。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 4.导入式（一般不用）　　将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记写在<head>标记中，使用的语法如下： <style type="text/css"> @import"mystyle.css"; 此处要注意.css文件的路径 </style>　　　导入式存在加载问题（在整个网页装载完后再装载CSS文件

py 的第 39 天

阅读更多关于 py 的第 39 天

---恢复内容开始--- 内容回顾：　　　　1.高级选择器　　　　　　　　后代选择器　　　　　　　　　　　　选择的是儿子、孙子，重孙子　　　　　　　　　　　　div p{} 　　　　　　　　子代选择器　　　　　　　　　　　　选择的是亲儿子　　　　　　　　　　　　div>p 　　　　　　　　组合选择器　　　　　　　　　　　　div.active{} 　　　　　　属性选择器　　　　　　　　　　　　input[type='text']{} 　　　　　　　　伪类选择器　　　　　　　　　　　　爱恨准则　　　　　　　　　　　　　　　　a:link{} 　　　　　　　　　　　　　　　　a:visited{} 　　　　　　　　　　　　　　　　a:hover{} 　　　　　　　　　　　　　　　　a:active 　　　　　　　　　　　　对a来设置字体颜色，一定要选中a 　　　　　　　　伪元素选择器　　　　　　　　　　　　　　　　p:first-letter{} 　　　　　　　　　　　　　　　　p:before{ content:' ' } 　　　　　　　　　　　　　　　　//与浮动有关系　　　　　　　　　　　　　　　　p:after{ content:' ' } 2.css的继承性和层叠行　　　　　　　　在css中，color、text-xxx、font-xxx、 line

web前端基础——CSS

阅读更多关于 web前端基础——CSS

web前端基础——CSS CSS 语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 selector { property: value; property: value; ... property: value } 例如 h1 {color:red; font-size:14px;} css的四种引入方式行内式行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。 <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 嵌入式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 链接式将一个.css文件引入到HTML文件中 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 导入式将一个独立的

Web—12-详解CSS的相对定位和绝对定位

阅读更多关于 Web—12-详解CSS的相对定位和绝对定位

CSS的相对定位和绝对定位通常情况下，我们元素的position属性的值默认为static 就是没有定位，元素出现在正常的文档流中，，这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的，不会生效，比如你设置一个距离左边距偏移100px的声明：left:100px 那么这条声明不会起到任何效果。还有z-index属性在这时也不会生效。也就是说我们平时如果不给某元素一个position属性的声明，那么它默认的就是我上述的这种情况，不过因为有了浮动，所以通常情况下我们还真不需要给元素设置position属性！但是某些特殊的情况下，我们不得不用到position属性，那我们今天就讲讲position属性的relative和absolute值首先说relative ,相对定位。怎么理解呢？如果说我对某元素设置了相对定位，那么首先这个元素他会跟其它的元素一样，出现在文档流中它该出现的位置，然后，我们可以设置它的水平或垂直偏移量，让这个元素相对于它在文档流中的位置的起始点进行移动。有一点要注意，在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。这里值得注意的一点是：偏移可不是边距，跟边距是不一样的。我们先看看下图：上图中有三个浮动的块，第二个块是设置了相对定位position:relative了的

绝对定位

阅读更多关于绝对定位

CSS 绝对定位 CSS 相对定位 CSS 浮动设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 CSS 绝对定位绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。普通流中其它元素的布局就像绝对定位的元素不存在一样： #box_relative { position: absolute; left: 30px; top: 20px; } 来源： CSDN 作者： LingYingZou 链接： https://blog.csdn.net/LingYingZou/article/details/103712793

订阅文档流