文档流 | 易学教程

CSS标准文档流

阅读更多关于 CSS标准文档流

标准文档流介绍我们在制作 HTML 网页的时候，都必须遵循一个流的规则如：从左至右、从上至下规则。让我们进入 HTML 网页的标准文档流基本原理实践。代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>标准文档流</title> </head> <body> <h1>微笑是最初的信仰</h1> <span>微笑是最初的信仰</span> </body> </html> 结果图标准文档流要注意的事项空白折叠现象。高矮不齐，底部对齐。让我们进入空白折叠现象实践。代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie

文档流&文字&CSS常用命令

阅读更多关于文档流&文字&CSS常用命令

文档流文档流就是文档内元素流动方向流动方向内联元素从左往右流，宽度不够，之字形，且元素会被截断块元素从上往下流动，一排一排注意事项内联元素中有英文单词，流动时宽度不够，英文单词会整体迁移，不会被打断若想打断上述联结，请使用css属性 /*想打断的内联元素*/{ word-break: break-all; display: inline-block; } 脱离文档流类似悬浮在页面上一样 position: fixed; position: absolute; 关于字体一般，页面默认字体大小 16px 字体一般都分为上部、中部、下部文字（汉字、西文）都相对基线（下部）对齐不同字体有自己规定的建议行高，可以自行 line-height 规定 CSS常用命令字体相关设定字体样式 /*各类选择器*/{ font-family: kai; } 字体加粗 /*各类选择器*/{ font-weight: bold; } 字体大写 /*各类选择器*/{ text-transform: uppercase; } 背景相关背景位置与自适应 /*各类选择器*/{ background-position: center center;/*水平方向*/ /*垂直方向*/ background-size: cover;/*背景自适应*/ background:

前端基础-css(2)

阅读更多关于前端基础-css(2)

一、标准文档流　　宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下，像 “织毛衣”。而设计软件，想往哪里画东西，就去哪里画　　标准文档流下有一些现象，比如空白折叠现象、高矮不齐底边对齐现象等　　标准文档流等级森严，标签分为两种等级：　　　　- 行内元素　　　　- 块级元素。 1、块级元素和行内元素的区别　　行内元素：　　　　a、与其他行内元素并排；　　　　b、不能设置宽、高，默认的宽度，就是文字的宽度；　　块级元素：　　　　a、独占一行，不能与其他任何元素并列；　　　　b、能接受宽、高。如果不设置宽度，那么宽度将默认变为父级的100%； 2、块级元素和行内元素的分类　　在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。　　a、从HTML的角度来讲，标签分为：　　　　文本级标签：p、span、a、b、i、u、em；　　　　容器级标签：div、h系列、li、dt、dd；　　 PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h系列和ul，p里面也不能放p。　　b、现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：　　　　行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素；　　　　块级元素

回流、重绘及其优化

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

回流、重绘及其优化渲染过程渲染引擎通过通过网络请求接收渲染内容解析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]CSS Position 详解

阅读更多关于 [CSS]CSS Position 详解

一. CSS position 属性介绍 CSS中position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。有static，relative，absolute和fixed四种取值，默认是static。二. position: static static：没有定位，元素出现在正常的文档流中，忽略left，right，top，bottom和z-index。所以对元素position属性设定static时，left属性不起作用，但是元素出现在正常的流中。三. position: fixed fixed：生成固定定位的元素，相对于浏览器窗口定位，即浏览器窗口滚动也不会影响元素位置，元素的位置与文档流无关，因此不占据空间，可能会和其他元素发生重叠。窗口滚动不会影响content元素位置，content元素一直在contaniner元素的右下角。四. position: relative reletive：元素相对其自己正常位置定位，元素在正常的文档流中。没有设置left和top时的正常位置。设置了left和top属性，元素位置移动，向右移动50px，向下移动20px。但是元素预留的空间保持正常流动，也就是不会对其他元素产生影响。五. position: absolute absolute：元素绝对定位，相对于static定位以外的第一个父元素

看起来小但是并不小的问题

阅读更多关于看起来小但是并不小的问题

HTML <!DOCTYPE> 定义和用法必须是 HTML 文档的第一行，位于 <html> 标签之前。 <!DOCTYPE> 不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。常用的DOCTYPE声明 HTML 5 <!DOCTYPE html> HTML 4.01 Strict 该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional 该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Frameset 该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。 <!DOCTYPE HTML PUBLIC "-/

CSS 基础

阅读更多关于 CSS 基础

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

边框的css属性盒子模型

阅读更多关于边框的css属性盒子模型

Border 边框 css属性边框颜色 border-color：red/#ffffff/rgb() 默认为黑色边框样式 border-style:solid（实线）dashed(虚线) 默认为none 边框粗细 border-width：1px；默认是3px Border的简写 border:border-width border -style border-color; Div 块盒子 1.就是标签名没有特殊的标签属性 2.主要用来排版布局 3.宽度是100%，chrome浏览器默认有8px的外边距，清除这8px用 4.这种天生占用宽度为100%的标签我们把它叫块级元素比如 div p h1-h6 ul ol li等等特点 : 独占一行可以设置宽高。 5.大小宽高不是100%，是按照内容的多少决定大小的，这种标签叫内敛元素 (行级元素) 比如 a span 特点：不独占一行不可以设置宽高。块级元素 div分析外边距 margin 内边距 padding 边框 border Div的真实宽度=width+margin-left+margin-right+border*2+padding-left+padding-right；文档流元素从上到下（主要说块级元素），从左到右（主要说行级元素）的一种排列方式，我们把它叫标准文档流。他是浏览器天生具有的一种功能。

前端笔记3

阅读更多关于前端笔记3

1.CSS样式 - display - 用来设置元素的显示类型 - 可选值： none 元素不会在页面显示，并且不会占据页面的位置 block 元素作为块元素显示 inline 元素作为内联元素显示 inline-block 元素作为行内块元素显示 - visibility - 用来设置元素的显示状态 - 可选值： visible 默认值，元素在页面中可见 hidden 元素在页面中隐藏，但是会占据页面的位置 - overflow - 设置元素如何处理溢出的内容 - 可选值： visible 默认值，溢出的内容会在父元素以外的位置显示 hidden 溢出的内容会被裁剪不会显示 scroll 会为父元素添加水平和垂直双方向的滚动条以完整的查看内容 auto 会根据需要自动添加滚动条 2.文档流 - 文档流指的是网页中的一个位置，文档流可以说是网页的基础，我们所创建的元素默认情况下都在文档流中。 - 元素在文档流中的特点：块元素 1.块元素在文档流中自上向下垂直排列 2.块元素在文档流中默认宽度是父元素的100%，默认高度被内容（子元素）撑开内联元素 1.内联元素在文档流中自左向右水平排列，如果一行不足以容纳所有的元素，则另起一行继续自左向右水平排列 2.内联元素在文档流中高度和宽度都被内容撑开 3.浮动 - 使用float来设置元素的浮动 - 可选值： none 默认值

HTML+CSS基础块级元素div分析文档流脱离文档流的方法

阅读更多关于 HTML+CSS基础块级元素div分析文档流脱离文档流的方法

块级元素div分析 1、外边距 margin 2、内边距 padding 3、边框 border Div的真实宽度=width+margin-left+margin-right+border*2+padding-left+padding-right 文档流元素从上到下（主要说块级元素），从左到右（主要说行级元素）的一种排列方式，我们把它叫标准文档流。他是浏览器天生具有的一种功能。在实际开发中，我们在遵循文档流原则的情况下，还得脱离文档流的约束，让元素不受文档流的控制。脱离文档流的方法给元素设置浮动 float：left/right；给谁设置这个属性，谁脱离文档流，就不受浏览器控制，就相当于把这个元素在浏览器空间移除了，剩下的空间，后面的元素就会去填补上。 A： li设置了浮动，脱离了文档流，浏览器移除li占用的空间，ul就不会被撑起了所以高度为0. 来源： https://www.cnblogs.com/hyh11211121/p/11900739.html

订阅文档流