文档流

文档流（normal flow） 网页是多层的，CSS可以为每一层设置样式，用户看到的是最上层 最底层称为文档流，是网页的基础 创建的元素默认都是在文档流中排列的 元素有2个状态 1.在文档流中 2.脱离文档流 元素在文档流中的特点 块元素 独占一行 默认宽度把父元素充满，默认高度是被内容撑开 行内元素 不独占一行，只占自身大小 默认宽度和高度被自身内容撑开 如图 来源： CSDN 作者： Suikoigia 链接： https://blog.csdn.net/qq_35764106/article/details/104214343

文档定位是一种浏览器默认的定位方式display属性规定元素的类型并可以互相转换！ display:block可以设置元素的height,width,margin,padding。并且可以自带换行符单独占一行。常见的block元素都有<div>,<p>,<h1>,<ol>,<ul>,<form>,<tadle>. display:inline元素不单独占用一行，width,height不可以设置width就是它包含的文字图片的宽不可以改变，不单独站用一行。常见的inline元素有<span>,<a>。 display:inline-block就是同时具备inline元素和block的特点。不单独站用一行元素的width,margin,padding,height都是可以设置的。常见的display:inline-block元素有<img> 标准文档流 说白了就是一个“默认”状态。文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。 标准流的微观现象： (1).空白折叠现象。比如，如果我们想让img标签之间没有空隙，必须紧密连接。 <img src="img/00.jpg"/><img src="img/02.jpg"/> (2)高矮不齐，底边对齐 (3)自动换行，一行写不完时，换行写 标准文档流等级

标准文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 标准流的微观现象 空白折叠现象 图片也是一样，图片和表单元素可以看成是文字 高矮不齐，底边对齐 自动换行，一行写不下，换行写 块级元素和行内元素 块级元素 霸占一行，不能与其他任何元素并列 可以设置宽、高，如果不设置宽度，那么宽度将默认变为父亲的 100% 。 行内元素 与其他行内元素并排 不能设置宽、高，默认的宽度就是文字的宽度。 标签分类 在 HTML 中，标签可分为：文本级、容器级。 文本级： p 、 span 、 a 、 b 、 i 、 u 、 em 容器级： div 、 h 系列、 li 、 dt 、 dd CSS 的分类和上面的很像，就 p 不一样： 所有的文本级标签，都是行内元素，除了 p ， p 是个文本级，但是是个块级元素。 所有的容器级标签都是块级元素。 块级元素和行内元素的相互转换 块级元素可以设置为行内元素，行内元素可以设置为块级元素 display: inline;/*块级元素转为行内元素*/ 一旦给一个div设置 display: inline; 此时这个div 不能设置宽度、高度； 那么，这个div将立即变为行内元素。此时它和一个 span 无异， 这个 div

Layui渲染失败 问题 在script中书写text/html在layui引用后无法渲染 原因 因为在script中书写的text/html，因为是动态加载，当文档流经过css渲染过后，script中的html代码才添加到文档流中，所以才造成了无法渲染的情况。 解决方法 在文档流加载之后重新加载一遍css，或使用layui的form.render重新加载script中的html。 使用情况 form.render可以使用在文档流加载之后 当使用layui的内置方法时，在内置方法的最后添加form.render 来源： CSDN 作者： 217全儿 链接： https://blog.csdn.net/weixin_42657158/article/details/103882037

CSS基本语法以及页面引用 CSS基本语法 css的定义方法是： 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例： /* css注释 ctrl+shift+"/" */ div{ width:100px; height:100px; color:red } CSS页面引入方法 1、外联式：通过link标签，链接到外部样式表到页面中。 <link rel="stylesheet" type="text/css" href="css/main.css">` 2、嵌入式：通过style标签，在网页上创建嵌入的样式表。 <style type="text/css"> div{ width:100px; height:100px; color:red } ...... </style> 3、内联式：通过标签的style属性，在标签上直接写样式。 <div style="width:100px; height:100px; color:red ">......</div> CSS文本设置 常用的应用文本的css样式： color 设置文字的颜色，如： color:red; font-size 设置文字的大小，如：font-size:12px; font-family 设置文字的字体，如：font

渲染过程 浏览器渲染过程如下： 解析 HTML，生成 DOM 树，解析 CSS，生成 CSSOM 树。 将 DOM 树和 CSSOM 树结合，生成渲染树(Render Tree)。 Layout(回流): 根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）。 Painting(重绘): 根据渲染树以及回流得到的几何信息，得到节点的绝对像素。 Display: 将像素渲染到屏幕上。 阻塞问题： 构建 CSSOM 会阻塞浏览器渲染，但不会阻塞解析 HTML 构建 DOM树。 JavaScript 会阻塞 DOM 树构建。 当 HTML 解析器遇到一个 script 标签时，它会暂停构建 DOM，将控制权移交给 JavaScript 引擎；等 JavaScript 引擎运行完毕，浏览器会从中断的地方恢复 DOM 构建。 JavaScript 可以查询和修改 DOM 与 CSSOM，会导致竞态问题。 浏览器尚未完成 CSSOM 的下载和构建，而我们却想在此时运行 JavaScript，会怎样？答案很简单，对性能不利：浏览器将延迟执行 JavaScript 和 DOM 构建，直至其完成 CSSOM 的下载和构建。 异步脚本 携带 defer 属性的脚本，顺序执行，会在 DOMContentLoaded 事件触发之前执行。 标准里 defer 是顺序执行

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型 relative:生成相对定位的元素，相对于其正常位置进行定位。 对应下图的偏移 absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。是不是对这句话很费解，MDN官方解释是这样的： 是不是清晰了很多。再来看下代码栗子： 上面的class类名与设置属性positon:releative ,没有任何关系，上面测试中并未设置。 看它的偏移量是正是脱离文档流，最大包裹块的定位。我们再把外层div增加static 来看下： 无论是。类release还是父级的父级添加static,都依旧如此，没有发生变化，而在父级类relative中增加属性position：release。当然自身偏移量不要设置默认为0，由于它未脱离文档流，被包裹的子元素属性position：absoution,作用于它。why? 它恢复进了文档流， position: static则是将原本定位的属性恢复正常，作用已定位的元素。而absolute 脱离文档流，它的位置若没有父级属性relative，则实际位置定位到最大盒子body. fixed: 固定定位 针对 浏览器窗口的. 随着浏览器的变化而变化.但是不随滚动条的变化而变化. 最常用的是固定页面的head部分, 注意在与input,button

*/ /*--> */ 文档流: 一个元素内部子元素如果采用流失布局, 元素的内部形成一个文档流, 每一个子元素在 文档流都有自己的位置 position : 通过该方式设置定位方式 static: 静态定位方式 每个标签默认的定位方式 整个网页采用流式布局 不能使用left top bottom right 设置位置 relative: 相对定位 不会脱离文档流 相对定位与自己原来的位置进行偏移，一般位置上微小 的变化的时候 采用相对定位 使用left top bottom right 设置位置 absolute: 绝对定位 离它最近的定位方式为非static的定位元素为参照 以父元素为参照的时候 要把父元素的定位方式设置成相对定位(position:relative) 如果只加 position:absolute 该元素还在原来的位置，实际开发的时候并不会出现这种情况 position:absolute left top 设定位置 绝对定位之后 元素脱离文档流 脱离原来的位置 并且不会撑开父元素，所以对父元素 在设置定位的时候 设置成相对定位，块元素的宽度不再是父元素的宽度 必须手动设置宽度 fixed: 固定位置 使元素脱离文档流 元素不会随着网页的滚动而滚动 导航固定位置 sticky: 粘性定位 来源： https://www.cnblogs.com

HTML学习笔记 第一天 1.HTML中不区分大小写 2.注释不能嵌套 3.标签必须结构完整 4.XML 更加严谨 5.浏览器尽最大努力正确加些页面，自动修正，但有些情况会错误修正 6.HTML标签可以嵌套，但是不能交叉嵌套 7.使用内联框架***iframe***可以引入一个外部的页面 使用iftrame来创建一个内联框架 现实开发中不推荐使用内联框架，内联框架中的内容不会被搜索引擎所检索 8.超链接：从一个页面跳转到另一个见面 用标签 来创建一个超链接 属性： href：指向链接跳转的目标地址， 相对路径or完整地址 a标签中的target属性可以用来指定打开链接的位置 _self：默认值 在当前窗口打开 _blank:在一个新的窗口中打开链接 可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开 用#代表空链接 默认为页面的顶部 HTML中有一个属性作为标签的唯一标识：id 9.center标签中的内容会默认在页面中居显示 10.发送电子邮件的超链接，自动打开计算机中默认的邮件客户端 联系我们 <!-- SRC属性: 相对路径： 返回路径：../ 返回上一级目录 --> <!-- 图片格式 JPEG：多颜色，可以压缩，但是不支持透明 一般用来保存照片 GIF： 支持的颜色较少，只支持简单透明，支持动态图 PNG：支持的颜色多，支持复杂透明 图片使用原则： --

CSS 盒子模型 （点击查看 官方解释 ） 实际上网页中的每一个标签都可以看成一个盒子模型，而这个盒子模型从内到外有以下这几个元素组成 content 内容区域 padding 内边距 border 边框 margin 外边距 并且 margin , border , padding 分别有上下左右4个值 如上图所示，可以很容易的得出盒子的大小，也就是对应标签真正大小。 所谓的宽高不是 width 和 height ,而是盒子的宽度和高度。 高度 = 内容高度 + 上下内边距 + 上下边框 + 上下外边距 宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距 margin , border , padding 三个属性在设值的时候均可以对上下左右进行单独设置： margin-top: 100px; margin-bottom: 100px; margin-left: 50px; margin-right: 50px; 也可以一次性使用简写的方法设置： /* 上 右 下 左*/ margin: 100px 100px 50px 50px; /* 上下 左右*/ margin: 100px 50px; /* 上 左右 下*/ margin: 100px 20px 50px; 这里需要注意的是，多次设置时要先写大后写小： /* 错误写法 */ margin-left: