CSS

上一篇详述了Sass如何嵌套、导入和注释这3个基本方式来保持条理性和可读性，这一篇更进一步地阐述sass保持样式复用和简洁的方式——混合器和选择器继承——这两种方式都能复用样式，使用它们也不难，但一定要注意什么时候该用什么。 零. 混合器——样式层上复用 当你需要一直复用大段样式的时候，可以考虑下混合器。 1. 基本用法 混合器使用@mixin标识符定义，然后通过@include引入，简单的说就是…

前言 2018年最后的法定假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章 使用Flexible实现手淘H5页面的终端适配和再聊移动端页面的适配)也面临过在不同适配方案间进行抉择的思考，我个人最近对于移动端适配方案也进行了一轮重新的研究，期间，对各种适配方案也有…

这篇文章讲我最近遇到的需求和解决过程中遇到的问题，以及学到新知识。 从最近在做的需求说起，一个优惠券样式，过设计稿的时候认为没什么大不了的，满口答应了。真正开始开发的时候遇到问题，主要是镂空效果实现方式上比较费劲。要求是背景可配，并且票身可以配背景图，然后镂空是真镂空。 设想并尝试了很多种方案，伪类模拟，背景贴图，Canvas 绘制，没有一个能让我满意。前端就是这么难，即使跪下来求设计师妹纸改稿，…

前言 长期以来，我们要修改 DOM 元素的样式，我们实际上操作的是 CSS 的对象模型 CSSOM。而 Houdini 中推进的又一组 CSS 对象模型 Typed OM，该标准又给我们带来了什么好处呢？ CSSOM CSSOM 是干嘛的？ 简单的说来，CSSOM 是一组能让 JS 操作元素 CSS 的 API。在浏览器进行页面渲染的过程中扮演着非常重要的角色，浏览器的渲染步骤大致包括： 解析 H…

写在前面： 从去年十月份，马云成立阿里巴巴达摩院，到今年9月28号一年整，阿里达摩院官网正式上线。作为从事互联网行业的人，大抵都是会去达摩院官网看看的，本文即我个人从前端角度对达摩院官网，进行的一次简单粗暴的测评，细数圈点之处，并提取一些作为前端可以值得借鉴和思考的代码技巧。第一次写体验报告类文章，想到什么写什么，个人角度或片面，不足之处，或者您有更好的见解，在留言处欢迎交流。当然希望有阿里达摩院…

——本文是对之前同名文章的修正，将所有webpack3的内容更新为webpack4，以及加入了笔者近期在公司工作中学习到的自动化思想，对文章内容作了进一步提升。 0.引言 作为互联网项目，最重要的便是用户体验。在举国“互联网+”的热潮中，用户至上也已经被大多数企业所接收，特别是在如今移动端快速发展的时代，我们的网页不仅只是呈现在用户的PC浏览器里，更多的时候，用户是通过移动产品浏览我们的网页。加之…

把一件平凡的事情做好，很平凡。把一件平凡的事情坚持的做好，很不平凡。 1.前言 如果说计算机科学只存在两个难题：缓存失效和命名。那么我就觉得命名的难点只有两个：词汇量和坚持贯彻执行制定的规范。 最近在知乎上看到这个：作为程序员，有没有让你感到既无语又崩溃的程序命名？。顿时感慨万千，因为命名对于程序员来说是就是一个难题，有时候因为命名，可能会引起别人的误导，疑惑等，对开发效率，项目的质量影响可大可小…

前言 现如今移动端APP对用户体验方面的要求越来越高了，最近致力于用户体验优化，因为需要实现类似APP页面切换的动画效果，百度google搜索资料不是很全，所以自己写文档，在实现效果的基础上，顺便恶补一波VueRouter及CSS过渡动画的知识点，欢迎有兴趣的朋友多多指教。 简单demo图预览 写在前面的思考 如何匹配到相应需要跳转的页面？ 如何判断是“前进”还是“后退”而后使用不同的动画方式？ …

最近秋招之余空出时间来按自己的兴趣动手做了一个项目，一个基于 vue，typescript，pwa 的实验浏览移动端webapp，现在趁热打铁，将这个项目从开发到部署整个过程记录下来，并将从这个项目中学习到的东西分享出来，如果大家有什么意见或补充也可以在评论区提出。先介绍一下这个项目 项目介绍 基于vue，typescript，pwa的一个移动端webapp，取名叫browseExp，主要功能是浏…

前言 最近好多小伙伴都跳槽去找工作，我只能在心里默默的支持他们能找到一份好的工作，这份前端面试大全送给我的小伙伴们，主要说的是前端一些常用的一些知识，说的不对的地方请小伙伴们即使指正出来，自己同时也回顾下这些知识。主要分以下几个方边来说： css和html javascript vue 微信小程序 css和html 1.Doctype作用？标准模式和兼容模式区别。 声明在HTML文档第一行，告诉浏…

前言 在开发中，我们经常会将一些常用的代码块、功能块进行封装，为的是更好的复用。那么，被抽离出来独立完成功能，通过API或配置项和其他部分交互，便形成了插件。 下面这些是我在工作中积累的一些常用的前端开源插件，这里只是罗列出来，详细的用法各个插件官网或者Gayhub都有介绍。注意：往往一个解决方案会有多个插件，需要读者根据自己的实际业务需求进行甄别选用，欢迎留言交流和补充。^_^ 可以先加个收藏（…

小程序出来那么久一直没有深入的开发，这次借着公司要做小程序，深入探索了一番，结果挖坑无数，当然，仅限挖坑，并没有填完。哈哈，就先mark一下。 因为公司业务需求，这次小程序用的是 mpvue + typescript 进行开发。 mpvue 相关的坑 关于 input 问题 因为设计想把输入框的交互做成这个样子： 那用原生的输入框是满足不了的，只能自己写组件咯。那么就用vue的方式写了个组件，结果…

关键词: 面试 前言 最近面了很多大厂的web前端岗位，都被刷了，在决定入职前，手里拿了几分待遇差不多的offer，后期的面试越来越顺，自己思考和总结了一下，原来面试也有好多技巧和方法可循，希望这些方法可以帮助到为找工作而且苦恼的你，可能每个人的方法不一样，不过至少可以提供一些参考。 先说明一下我的基本情况，93年生人，初中毕业后上了一家技校，网络工程专业，函授中央广播电视大学信息管理专科证书，1…

摘要： vue2.0移动端 框架1. 移动端基础框架 zepto.js 语法与jquery几乎一样，会jquery基本会zepto~ iscroll.js 解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能~ underscore.js 该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。 fastclick 加快移动端点击响应时间…

white-space、word-break、word-wrap（overflow-wrap）估计是css里最基本又最让人迷惑的三个属性了，我也是用了n次都经常搞混，必须系统整理一下，今天我们就把这三个属性彻底搞清楚！ 测试代码 (文末有本文中所有例子的代码) 下面是本文中用于测试三个样式属性展现情况的html代码： <div id="box"> Hi  , Thi…

这篇flex布局教程，一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center、verticle-align: …