摘要:
弹性盒子基础 弹性盒子(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 阅读全文