摘要：
弹性盒子基础 弹性盒子(Flexible Box)是css3中盒子模型的弹性布局，在传统的布局方式上增加了很多灵活性。 定义一个弹性盒子 在父盒子上定义display属性： #box{ display: -webkit-flex; //webkit内核浏览器的兼容设置，下同 display: fle 阅读全文
摘要：
SCSS的由来 SCSS就是加强版的CSS，要讲SCSS那就一定要从SASS讲起 SASS Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。2007年发行 阅读全文
摘要：
查看原文可以有更好的排版效果哦 前言 居中是平时工作中的最常见的一种需求，各种图片居中或者各种弹窗，水平居中还好，特别是垂直居中，很多初学者表示太难写了，现在列举一些常用的方法。 实战 这里只讲述css相关的方法，js暂时不提，毕竟这是样式上的事情，就不劳烦js出手了。 1. top 50% ;ma 阅读全文
摘要：
在css3中transition和animation都可以实现动画效果，但是我们什么时候用transition，什么时候用animation。 当有事件触发动画的时候我们就用transition。比如hover事件mouseove、mouseout事件等等 当没有事件触发直接播放的时候我们就用ani 阅读全文
摘要：
前端开发需要了解的工具集合：webpack, eslint, prettier, ... 前端开发需要了解的一些工具，这些工具能够帮助你在项目开发中事半功倍。 1. nrm: npm registry 管理器 registry: npm 远程仓库的地址。 由于众所周知的原因，npm 官方仓库在国内特 阅读全文
摘要：
css 的弱化与 js 的强化 web 的三要素 html, css, js 在前端组件化的过程中，比如 react、vue 等组件化框架的运用，使 html 的弱化与 js 的强化 成为了一种趋势，而在这个过程中，其实还有另一种趋势也在慢慢形成：css 的弱化与 js 的强化。 之前有写过一篇 C 阅读全文
摘要：
每天一个CSS-社会人 实现效果 想法 之前看到一篇博客，使用python绘制出了小猪佩奇，所以自己想试一试，采用纯html + CSS绘制出低配版的小猪佩奇。 实现思路 使用上一篇，圆与边框实现。最后是一个组合图形，初学者都可以完成，可尝试。 缺点 1、低配版的小猪太圆润，后面会对整体图形进行修改 阅读全文
摘要：
半透明边框 background-clip: 规定背景的绘制区域 .div { width: 200px; height: 200px; background: blue; border: 10px solid rgba(255, 170, 170, 0.3); background-clip: p 阅读全文
摘要：
CSS和模型 CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，包括 外边距（marign），边框（border），填充（padding），内容物（content） 盒子模型的类型：W3C 标准和模型和 IE 盒模型（怪异盒模型） W3C 标准盒模型：属性 width 和 height 只包 阅读全文
摘要：
CSS的两种经典布局 左右布局 一栏定宽，一栏自适应 <!-- html --> <div class="left">定宽</div> <div class="right">自适应</div> <!-- css --> .left{ width: 200px; height: 600px; floa 阅读全文
摘要：
介绍 项目已经开源：https://github.com/nanhupatar... 欢迎PR 推荐 关注我们的公众号 display: none; 与 visibility: hidden; 的区别 相同： 它们都能让元素不可见 区别： display:none;会让元素完全从渲染树中消失，渲染的 阅读全文
摘要：
最近因为工作需要，自学了Sass。现在将学习笔记整理在这里，供大家参考。 1. Sass的安装 Sass的编辑器安装方法有很多，大致能分为两种：应用程序（application）和命令行界面（command line）。我使用的是命令行。因为之前已经在Mac上安装过Homebrew的package， 阅读全文
摘要：
Flex布局教程地址https://www.youtube.com/watch...https://paper.dropbox.com/doc...https://www.w3cplus.com/css3/... 控制换行属性 flex-wrap: wrap | nowrap | wrap-reve 阅读全文
摘要：
写在前面 今天是入门前端的day2, 小伙伴们应该已经看了一些HTML的基础和CSS的基础了，是不是遇到了很多关于CSS的问题呢。因为HTML很少有太复杂的问题，所以直接写一篇关于CSS的常见问题及解答啦~ display: none;和visibility:hidden;的区别 简单来说： dis 阅读全文
摘要：
问题描述：一个内嵌IOSAPP的H5页面，长页面，大概1.6个屏幕高度，由于有列表滑动起来很不流畅，所以用了-webit-overflow-scrolling:touch;这个只针对ios端的物理滚动属性来调整，但是滚动流畅实现了，部分区域因为加了这个属性出现滑动白屏情况。原有的html结构也还在就 阅读全文
摘要：
本来想自己写一篇关于vue入门的文章。但是看到链接的文章后，觉得写得太详细了，实在有保存下来的必要。后面可能在这篇文章基础上，有所内容的增加。 CSS预处理器 定义了一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强， 阅读全文
摘要：
前端如何高效的与后端协作开发 1. 前后端分离 前端与后端的分离，能使前端的开发脱离后端的开发模式，拥有更大的自由度，以此便可做前端工程化、组件化、单页面应用等。 可以参考：前后端分离、web与static服务器分离 2. 尽量避免后端模板渲染 web 应用的渲染方式分为服务器端渲染和客户端渲染，当 阅读全文
摘要：
引出问题 首先我们来这么一个问题, 这里是完整的 jsfiddle demo or codepen demo 给一个元素绑定两个边框样式， 右侧和底部都为1px的红色边框 styleA: { borderBottom: '1px solid red', borderRight: '1px solid 阅读全文
摘要：
如果二者是父子关系，可以写成这种： .face:hover .eye-bottom { margin-top: 30px; } 如果是兄弟关系： .face:hover+.ear-wrap { transform: rotate(-30deg); } 如果是兄弟的儿子： .face:hover+.e 阅读全文