文档流 | 易学教程

http输入地址到页面加载完

阅读更多关于 http输入地址到页面加载完

一.从浏览器接受url开始，开启网络请求线程。参考https://www.cnblogs.com/chengxs/p/11039155.html在他的基础上补充了些 1.浏览器是多进程的（1）浏览器是多进程的（2）不同类型的标签页会开启一个新的进程（3）相同类型的标签页会合并到一个进程中 2.浏览器中各个进程及作用（1）浏览器进程：只有一个进程，负责各个标签的创建和销毁；负责浏览器页面显示，负责资源的下载和管理。（2）第三方插件进程：每个第三方插件使用都会创建一个对应的进程（3）GPU进程：最多一个进程，负责3D绘制和硬件加速（4）浏览器渲染进程：每个tab页对应一个进程，主要负责html，css，js的解析，执行和渲染，以及事件处理等 3.浏览器渲染进程每个tab页是一个浏览器内核进程，该进程是多线程的：GUI线程，JS引擎线程，事件触发线程，定时器线程，异步的http网络请求线程。JS引擎线程是内核线程中的一个线程，所以常说JS引擎是单线程的。 4.解析url url：统一资源定位符。包括：protocol，host，port，path，query，fragment 二.开启网络请求线程到发出一个完整的http请求。 1.每一次网络请求需要开辟单独的线程进行，比如URL解析到http协议，就会新建一个网络线程去处理资源下载。 URL会根据解析得协议

CSS中position和float的使用

阅读更多关于 CSS中position和float的使用

近期会更新一系列博客，对基础知识再度做个巩固和梳理。一、 position定位（一）： position的属性　　 1.absolute：生成绝对定位的元素，相对于最近一级定位不是static的父元素来进行定位；　　 2.relative：生成相对定位的元素，相对于其所在普通的文档流位置进行定位；　　 3.static:默认值，没有定位，元素出现在正常的文档流中; 　　 4.fixed:老IE不支持，和absolute一致，相对于窗口进行定位，当出现滚动条时，不随着滚动而滚动；　　 5.sticky:(CSS3)有兼容性问题，它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（二）：关于 position使用一般会引发的问题　　 1.假如有一个默认100%宽度的div,一旦加上absolute绝对定位，该元素立马inline-block化，默认宽度就会自适应元素内部宽度，会导致页面的宽高塌陷。　　 2.由于absolute绝对定位的灵活性，对于普通的页面布局，有时出于省事的原因很容易造成absolute/relative/top/left/z-index的滥用,这样会使后期的扩展和维护造成麻烦（三）： position代码示例　　 1.relative相对定位。　　

css学习

阅读更多关于 css学习

伪类： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css学习</title> <style> input:focus{ background: #0E5C2F; } </style> </head> <body>  <input type="text"> </body> </html> 伪元素使用： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css学习<

CSS定位及文档流

阅读更多关于 CSS定位及文档流

今天看到一个面试题问哪种css的属性不会让div脱离文档流，答案有position分别是relative，abosolute，fixed及float的选项当时看到题不是太明白什么是文档流，查了下normal flow，其实就是html中从上到下，从左到右的显示顺序在这个过程中, 行内元素水平排列, 直到当行被占满然后换行; 块级元素则会被渲染为完整的一个新行（比如DIV就是一个块级元素）接下来再看看CSS中的浮动机制float，float会让当前元素漂移到左右，其它的布局会感知不到这个元素了，所以是脱离了正常的文档流的。接下来看看css中3种定位机制，abosolute是相对于第一个父元素进行定位（注意是有非static的position的，比如relative或者absolute的），fixed是相对于浏览器窗口进行定位，这2个都会脱离文档流。而relative是相对于该元素正常位置进行定位，其周边的元素不会变，所以使用了relative定位的元素是不脱离文档流的。参考文档： http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html https://tink.gitbooks.io/fe-collections/content/ch03-css/normal-flow.html 来源： oschina

Html CSS学习（五）position定位

阅读更多关于 Html CSS学习（五）position定位

Html CSS学习（五）position定位 position用来对元素进行定位，其值有以下几种： static：无特殊定位，对象遵循正常文档流，top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixe：对象脱离正常文档流，使用top，right，botton，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。一、static定位页面代码如下： <div class="father"> <div class="children"> 子容器1 </div> <div class="children"> 子容器2 </div> </div> CSS代码如下： <style> .father{ width: 200px; height: 300px; border: 1px solid red; } .children{ margin: 10px; width: 150px; height: 100px; border: 1px solid blue; } </style> 页面效果如下：

关于CSS的外边距合并问题

阅读更多关于关于CSS的外边距合并问题

本文转载于: 猿2048 网站关于CSS的外边距合并问题　　首先，需要明确的是只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。　　而在普通文档流中，这又分两种情况，分别是父子元素之间和相邻元素之间。　　　　 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0 ; padding: 0 ; } #box{ /* border:2px solid red; */ width: 400px; height: 400px; } #img{ width: 40% ; display: block; margin - bottom: 100px; } #img2{ width: 40% ; display: block; margin - top: 50px; } </style> </head> <body> <div id="box"> <img src="1.jpg" id="img"> <img src="1.jpg" id="img2"> </div> </body> </html> 先把代码贴上，引用一张领袖的图片

回流、重绘及其优化

阅读更多关于回流、重绘及其优化

回流、重绘及其优化渲染过程渲染引擎通过通过网络请求接收渲染内容解析HTML抽象DOM tree 抽象出Render tree 布局（layout）render tree 绘画render tree 抽象DOM tree 渲染引擎的第一步是解析html文档并将解析的元素转换为dom树中的实际dom节点。抽象CSSOM tree 当浏览器解析dom的时候，遇到link标签，引用外部的css样式表，引擎会将css抽象成cssom 构建渲染树 HTML中的可视指令与来自cssom树的样式数据结合使用来创建渲染树。为了构建渲染树，浏览器大致如下：从dom树的根开始，遍历每个可见节点。某些节点不可见（例如，脚本标记，元标记等），并且由于它们未反映在呈现的输出中而被省略。display:none 也会使节点省略对于每个可见节点，浏览器找到适当的匹配cssom规则并应用它们它会发布带有内容和计算样式的可见节点每个渲染器代表一个矩形区域，通常对应于一个节点的CSS框。它包括几何信息，如宽度，高度和位置渲染树的布局当渲染器被创建并添加到树中时，它没有位置和大小。计算这些值称为布局。 html使用基于流的布局模型，这意味着大多数时候它可以一次性计算几何。坐标系相对于根渲染器。使用顶部和左侧坐标。布局是一个递归过程，从根元素开始，也就是html

【CSS属性#2】

阅读更多关于【CSS属性#2】

原文: http://blog.gqylpy.com/gqy/256 目录一、盒子模型二、外边距 margin 三、内填充 padding 四、浮动 float 五、清除浮动 clear 六、溢出 overflow 七、定位 position 1. 无定位 static 2. 相对定位 relative 3. 绝对定位 absolute 4. 固定 fixed 八、层叠顺序 z-index 九、透明度 opacit 一、盒子模型 margin ：用于控制元素与元素之间的距离；最基本的用途就是控制元素周围空间的间隔，从视觉上达到相互隔开的目的 padding ：用于控制内容与边距之间的距离 Border ：边框，围绕在内边距和内容外的边框 Content ：盒子的内容，显示文本和图像 ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03/3820234e-236e-4ff2-af57-94cab2575a05.png) 二、外边距 margin 属性描述 margin-top 上方外边距 margin-right 右方外边距 margin-bottom 下方外边距 margin-left 左方外边距简写： ![在这里插入图片描述](http://blog.gqylpy.com/media/ai/2019-03

前端面试题

阅读更多关于前端面试题

1.简述一下你对HTML语义化的理解？用正确的标签做正确的事情。 html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析; 及时在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的; 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO; 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。 2.iframe有那些缺点？ ①iframe会阻塞主页面的Onload事件； ②搜索引擎的检索程序无法解读这种页面，不利于SEO; ③iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。 3.对BFC规范(块级格式化上下文：block formatting context)的理解？（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染

css之定位

阅读更多关于 css之定位

定位是css当中一种操作html元素布局的方案属性position static：默认值，无特殊定位，对象遵循HTML原则； absolute：绝对定位，将对象从文档流中完全拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；　　　　　如果不存在这样的父对象，则依据网页进行定位，而其层叠通过z-index属性定义； relative：相对定位遵循正常的文档流，将依据right，top，left，bottom（相对定位）等属性在正常文档流中相对自身位置进行偏移；其层叠通过z-index属性定义； fixed：类似于绝对定位的方式，但是它的参照物是浏览器的“可视”窗口，且脱离标准文档流； inherit：规定元素的定位方式继承父元素的position的属性值； sticky：粘性定位，该定位基于用户滚动的位置；　　　它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置；定位元素的层级关系z-index auto：默认值。遵循结构，后写的定位元素层的顺序靠上； number：无单位的整数值。可为负数，数值越大，层的顺序越靠上； Tip：此属性仅仅作用于 position 属性值 relative 或 absolute,fixed

订阅文档流