CSS
关注
分享
扫一扫
文章平均质量分 63
我是真的垃圾啊
这个作者很懒，什么都没留下…
展开
-
回流和重绘
资料你真的了解回流和重绘吗 - SegmentFault 思否回流与重绘 - 掘金 (juejin.cn)面试官：怎么理解回流跟重绘？什么场景下会触发？ | web前端面试 - 面试官系列 (vue3js.cn)浏览器渲染过程渲染页面：浏览器的工作原理 - Web 性能 | MDN (mozilla.org)解析HTML，形成DOM树，当遇到非阻塞资源时，如图片则会继续解析，当遇到css文件时，也会继续解析。当时遇到了js文件（特别是没有defer和async）的阻塞渲染并停止HTML的原创 2022-02-08 16:23:44 · 6025 阅读 · 5 评论 -
前端之移动web开发学习
移动端浏览器的现状移动端的浏览器基本上是由webkit发展而来的，所以只需要采用处理webkit浏览器的方法即可，也就是说移动端的没有pc那么多的兼容性问题。手机屏幕现状做为开发人员来说，对于分辨率不予要太多的关注，因为我们常用的单位是px物理像素比参考博客移动端的调试方法视口视口(viewport)就是浏览器显示内容的屏幕区域。分为：布局视口、视觉视口和理想视口。布局视口（layout viewport）视觉视口（visual viewport）理想视口（ideal v原创 2021-10-10 20:28:15 · 381 阅读 · 2 评论 -
CSS之BFC、高度塌陷和外边距重叠
BFC块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。也就是说具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。BFC 是一个隐藏的属性，无法使用一般的方法开启开启BFC的方法body 根元素浮动元素：float 除 none 以外的值绝对定位元素：position (原创 2021-10-01 16:32:17 · 298 阅读 · 0 评论 -
前端学习之CSS
CSS是什么CSS是层叠样式表(Cascading Style Sheets)的简称。CSS也是一种标记语言。他是用来美化HTML的，让布局变的更简单。CSS最大的价值就是:由HTML去专注网页的结构，样式转交给CSS，实现结构（HTML）与样式（CSS）相分离。...原创 2021-03-08 14:15:13 · 616 阅读 · 1 评论 -
CSS是如何工作的（来自MDN）
基本步骤浏览器载入HTML文件（比如从网络上获取）。将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式。接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理。浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择原创 2021-08-21 11:39:46 · 123 阅读 · 0 评论 -
HTML5和CSS3基础部分
#HTML5HTML5针对以前的不足添加了一些新的特性，行的标签、新的表单和新的表达属性等。原创 2021-04-01 15:38:44 · 122 阅读 · 0 评论 -
HTML+CSS静态实现学成在线网站
来自B站Pink老师的教学效果图HTML代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal.原创 2021-03-24 17:15:07 · 559 阅读 · 0 评论 -
小米官网手机显示布局
效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&原创 2021-03-14 20:04:56 · 187 阅读 · 0 评论 -
CSS浮动练习之列表浮动
善用浮动的特性。浮动元素会脱离标准流（脱标）。浮动的元素会在一行内显示并且元素顶部对齐。浮动的元素会具有行内块元素的特性。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co.原创 2021-03-14 19:18:34 · 842 阅读 · 0 评论 -
CSS揭秘之半透明边框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do转载 2021-03-12 19:43:00 · 123 阅读 · 0 评论