html+css
关注
分享
扫一扫
文章平均质量分 80
html+css
庸人°
喂，程序猿，猫主子还在等你回家铲屎
展开
-
重绘与回流
前言关于浏览器渲染我们需要知道：浏览器使用流式布局模型浏览器会把HTML解析成DOM，把CSS解析成CSSOM,DOM和CSSOM合并就产生了Render Tree。有了RenderTree,我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。由于浏览器使用流式布局，对Render Tree的计算通常只需要比那里一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一浏览原创 2022-02-10 22:30:07 · 123 阅读 · 0 评论 -
使一个dom不可见的几种方法——隐藏元素
隐藏元素的方法有很多，这里我们就来整理具体有哪几种方法，它们谁是真正的隐藏，谁只是视觉不可见，以及效果上都有什么区别，在开发过程中大家斟酌使用。隐藏元素的方法display: nonevisibility: hiddenopacity: 0<div hidden></div>position: absolute; top: -9999px; left: -9999px;clip-path: polygon(0 0, 0 0, 0 0, 0 0)width: 0; h原创 2022-01-20 11:37:24 · 4008 阅读 · 0 评论 -
script标签中的defer与async
defer和async是script标签的两个属性，主要用于异步加载执行脚本，在不阻塞的页面文档解析前提下，控制脚本的下载和执行。页面加载和渲染过程浏览器通过http协议请求服务器，获取html文档并开始从上到下解析，构建dom在构建dom过程中，如果遇到html文本里面引用外部资源链接，比如css、js等，会立即启用别浏览器线程下载这些静态资源。需要注意的是，当遇到js文件时，html解析会停下来，等js文件下载结束并执行完，html解析工作才会继续。但是css的加载并不会阻塞渲染过程，下载完成后原创 2022-01-08 16:17:10 · 411 阅读 · 0 评论 -
Doctype
什么是DoctypeDOCTYPE是html中一种标准通用标记语言的文档类型声明，他的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对css代码甚至javascript脚本的解析，必须生命在html文档的第一行标准模式与兼容模式各有什么区别？CSS1Compat：标准模式，默认模式，浏览器使用W3C标准解析渲染页面，在标准模式中，浏览器以其支持的最高标准呈现页面BackCompat：怪异模式（混杂模式），浏览器使用自己的怪异模式解原创 2022-01-08 15:07:08 · 255 阅读 · 0 评论 -
src和href的区别
href和src是有区别的，而且是不能相互替换的。我们在可替换的元素上使用src，然后把href用于涉及的文档的外部资源之间建立一个关系。hrefhref（Hypertext Reference）表示超文本引用，指定网络资源的位置，建立和当前元素或文档的链接关系。当浏览器识别到它指向的文件时，就会并行下载资源，不会停止对当前文档的处理。常用在alink等标签上。比如以下情况：<link href="style.css" rel="stylesheet" />浏览器明白当前资源是一个样式原创 2022-01-08 14:02:13 · 490 阅读 · 0 评论 -
meta标签详解
描述HTML文档的元数据<head> <meta name="description" content="免费在线教程"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="runoob"> <meta charset="UTF-8"></head>简介元数据（Metadata）是数据的数据原创 2022-01-08 10:43:15 · 1106 阅读 · 0 评论 -
BFC（Block Formatting Context）
在讲BFC之前我们需要先来说说Formatting Context1. Formatting Context1.1 什么是Formatting ContextFormatting Context（格式化上下文）：是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互之间的作用。一个格式化的内容是在其中一组相关的盒中规定的环境。不同的格式化上下文根据不同的规则布置它们的框。例如flex格式上下文根据flex布局规则布原创 2021-12-23 09:40:21 · 274 阅读 · 0 评论 -
浮动布局【CSS】
1. 什么是浮动浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来。浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。1.1 特征1.1.1 脱离文档流脱离文档，也就是说浮动不会影响普通元素的布局。即其他div不会被设置浮动的div浮动位置影响，但是文字仍会为被浮动div让位。因为设置浮动的div只脱离了文档流并未脱离文本流。从上图可以看出，默认三个设置了宽高的block元素，本来会格子独占一行；如果框1设置了向左/向右浮动，他会忽略框2和框3，直到碰到父元原创 2021-12-22 22:28:14 · 1403 阅读 · 0 评论 -
实现水平垂直居中方式
在开发过程中不可避免的就是各种居中，块级、行内级、定高、不定高、垂直、水平还是水平垂直居中。都有哪些实现方案，在开发中应该选用哪个方案比较合适，这里我们就来梳理一下。以便以后使用的时候更加得心应手。水平居中行内元素水平居中1. text-align:center当我们想要给一个行内元素设置水平居中时，只需要对其父元素设置text-align:center;，我们可以看一下示例：<body> <div class="parent"> <span原创 2021-10-27 12:43:20 · 566 阅读 · 0 评论