随笔分类 -  CSS

css、css3、less、sass
网页移动端适配方案分析
摘要：一、手机的分辨率和手机浏览器的分辨率 首先我们得清楚，手机的分辨率和手机浏览器分辨率不是一个东西。 一般来说，我们使用的手机的分辨率远大于手机浏览器的分辨率。因为手机分辨率大会让手机显示的内容更细腻，比如消除图片的颗粒感；而手机浏览器分辨率小则是为了让用户对某些内容更好辨认，比如更大的文字，同时，这 阅读全文
posted @ 2021-07-06 14:15 潘正 阅读(478) 评论(0) 推荐(0)
如何提升CSS性能
摘要：大家都知道，对于网站来说，性能至关重要，CSS作为页面渲染和内容展现的重要环节，影响着用户对整个网站的第一体验。因此，与其相关的性能优化是不容忽视的。对于性能优化我们常常在项目完成时才去考虑，经常在项目的末期，性能问题才会暴露出来，此时才进行一些相关的性能优化。其实，如果我们从一开始编码，就注意一些 阅读全文
posted @ 2021-02-02 11:22 潘正 阅读(109) 评论(0) 推荐(0)
前端代码书写规范
摘要：前端普适性规范 黄金定律 不论有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。 永远一致同一套编码规范，可以是这里列出的，也可以是你自己总结的。如果您发现本规范中有任何错误，敬请在问题中指正。 前端普适性规范 项目命名 项目名全部采用小写方式，以中划线分隔，禁止驼峰式命名。例如： 阅读全文
posted @ 2020-01-02 11:08 潘正 阅读(750) 评论(0) 推荐(0)
CSS3动画特效
摘要：交错动画 有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。 那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟（delay） 阅读全文
posted @ 2020-01-02 10:29 潘正 阅读(838) 评论(0) 推荐(0)
CSS加载会阻塞页面显示？
摘要：可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我们就一起来分析一下。 原理解析 那么为什么会出现上面的现象呢？我们从浏览器的渲染过程来解析下。 不同的浏览器使用的内核不同，所以他们的渲染过程也是不一样的。目前主要有两个： webkit渲染过程 阅读全文
posted @ 2019-12-08 09:20 潘正 阅读(1265) 评论(0) 推荐(0)
CSS Grid 网格布局教程
摘要：一、概述 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，就是 Grid 布局的拿手好戏。 Grid 布局与 Flex 布局有一定的相似性，都可 阅读全文
posted @ 2019-10-15 08:41 潘正 阅读(683) 评论(0) 推荐(0)
浏览器渲染原理与过程
摘要：一、浏览器如何渲染网页 要了解浏览器渲染页面的过程，首先得知道一个名词——关键路径渲染。关键渲染路径（Critical Rendering Path）是指与当前用户操作有关的内容。例如用户在浏览器中打开一个页面，其中页面所显示的东西就是当前用户操作相关的内容，也就是浏览器从服务器那收到的HTML,C 阅读全文
posted @ 2019-04-23 13:52 潘正 阅读(216) 评论(0) 推荐(0)
关于学好前端的 6 点建议！
摘要：最近接触了很多前端的小伙伴，和他们谈了很多职业发展的问题。他们大部分是做了一到三年的前端新手。 在交流中我发现了一个很有意思的现象，大家同样是入门不足三年，一部分感觉前端是一个很有前途的职业，甚至一部分两年经验的前端同学透露年薪已经30W以上了，而另一部分则表示前端薪资水平不高，技术体系庞杂，迭代速 阅读全文
posted @ 2019-03-03 13:28 潘正 阅读(401) 评论(0) 推荐(1)
前端必须会的基本知识技巧！
摘要：1. 常用那几种浏览器测试？有哪些内核(Layout Engine)? (Q1) 浏览器：IE，Chrome，FireFox，Safari，Opera。 (Q2) 内核：Trident，Gecko，Presto，Webkit。 2. 说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以 阅读全文
posted @ 2019-03-02 14:27 潘正 阅读(219) 评论(0) 推荐(0)
CSS中各种布局的背后(*FC)
摘要：CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1中只有BFC和IFC,CSS3 中还增加了FFC和GFC。 盒模型(BoxModel) 上图为W3C标准盒模型，另外还有一种IE盒模型（IE6以下），唯一的区别就是：前者width= content，后者width= content + 阅读全文
posted @ 2019-01-06 13:16 潘正 阅读(328) 评论(0) 推荐(0)
圣杯布局和双飞翼布局的理解与思考
摘要：圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。 圣杯布局与双飞翼布局 圣杯布局来源于文章In Search of the Holy Grail，而双飞翼布局来源于淘宝UED。虽然两者的实现方法略有差异，不过都遵循了 阅读全文
posted @ 2018-11-24 14:04 潘正 阅读(1790) 评论(0) 推荐(0)
前端常用动画库
摘要：在开发中，好的动画效果会让软件使用起来更有吸引力，震撼力。所以我们经常会将一些常用的代码块、功能块进行封装，为的是更好的复用。另外不要重复造轮子，把精力放在业务逻辑上！ 下面这些是我在工作中积累的一些常用的开源动画库，我只是简单罗列出来，详细的介绍和用法可以去官网或者github。根据自己具体的需求 阅读全文
posted @ 2018-10-08 14:31 潘正 阅读(7700) 评论(0) 推荐(2)
CSS基础面试题
摘要：1、 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2、 box-siz 阅读全文
posted @ 2018-09-28 13:57 潘正 阅读(223) 评论(0) 推荐(0)
CSS核心问题
摘要：本文将讲述 CSS 中最核心的几个概念，包括：盒模型、position、float等。这些是 CSS 的基础，也是最常用的几个属性，它们之间看似独立却又相辅相成。为了掌握它们，有必要写出来探讨一下，如有错误欢迎指正。 元素类型 HTML 的元素可以分为两种： 块级元素（block level ele 阅读全文
posted @ 2018-09-06 14:17 潘正 阅读(124) 评论(0) 推荐(0)
优雅降级和渐进增强
摘要：作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与浏览器兼容顽强斗争。而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。 渐进增强（Pro 阅读全文
posted @ 2018-08-02 09:45 潘正 阅读(376) 评论(0) 推荐(0)
CSS中重要的BFC
摘要：CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本看似诡异的地方。 简介 在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块 阅读全文
posted @ 2018-07-25 09:50 潘正 阅读(162) 评论(0) 推荐(0)
Flex 布局教程
摘要：一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 行内元素也可以使用 Flex 布局。 Webkit 内核的浏览器，必须加上-webkit前缀。 注意，设为 Flex 布局以后， 阅读全文
posted @ 2018-06-04 14:15 潘正 阅读(234) 评论(0) 推荐(0)
Grid布局
摘要：简介 CSS Grid(网格) 布局（又称为 “Grid(网格)” ），是一个二维的基于网格的布局系统它的目标是完全改变我们基于网格的用户界面的布局方式。CSS 一直用来布局我们的网页，但一直以来都存在这样或那样的问题。一开始我们用表格（table），然后是浮动（float），再是定位（postio 阅读全文
posted @ 2018-06-03 18:02 潘正 阅读(366) 评论(0) 推荐(0)