凝视深渊

css-cascade本文从类型、来源、特异性、位置四个方面描述了css的优先级规则。four level/type of the importance首先看类型，以下4种类型，重要性依次降低。transition (active)!importantanimation (active)normalorigin类型相同，看这个规则是在哪里规定的。websiteuser...

1. 简介2. @import的缺点3. 模块化的核心@use3.1 @use的基本用法3.2 @use与@import的区别3.3 配置样式库的基础变量4. 给库开发者使用的利器@forward4.1 @forward的基本用法4.2 用show/hide控制成员是否可见4.3 给不同的子模块添加前缀5. sass内置模块6. 兼容性7. 迁移指南8. 参考资料简介...

接上，[工业化、响应式的的CSS3 grid布局应用及其向后兼容问题– 上 –（翻译自smashingmagazine，有删改）](工业化、响应式的的CSS3 grid布局应用及其向后兼容问题– 上 –（翻译自smashingmagazine，有删改）)live example应用先进的格子布局和功能步骤如下： 1.从最窄的屏幕开始设计布局 2.逐渐增大屏幕，直到一切变得看上去奇怪 3.加断点

gird布局的支持性仍然不够完善，但作为二维布局的利器，足以轻而易举地做出一些原本需要耗费时间的事情。正如a complete guide to grid的作者所说，在实际工作中运用grid布局只是一个时间问题，而现在正是学习它的好时机。安卓和ios，desktop上ie11+都已支持grid布局。更多细节可在caniuse查到。 网格布局的基础知识在印刷环境下，你不会用margins来居中，也不会用flex来A

CSS的Transition只能计算数值型的变量，但颜色本身其实也是数值，不过遵循的变化规律不同而已。以十六位数字而非RGB表示颜色，可以用JS模拟出COLOR的渐变过程。技术点：条件下setTimeout调用自身来渐变。通过设置内部变量作为flag，决定变化的方式。var b = document.body.stylefunction changeColor (s,interval){

一个丑丑的滚动条在某些时候是非常碍眼的，移动端由于屏幕小的缘故，更是显眼，最好还是让它能不出现，就不出现。除了用div遮罩外，许多浏览器内核也提供了私有属性控制滚动条的样式。移动端多为weibkit内核，滚动条的定制方案提供的很完善，蛮强大的哦~最基本的，overflow属性先设置好auto或者scroll，而不是hidden，毕竟我们仅仅是隐藏了滚动条，而不是让它整个都不能滚了滚动条的涵义:scrollbar

经常在做弹出窗的时候，遇到这样的需求：如图，一排上有两个元素，一个是文字提示，一个是个X表示取消。通常，会用flex--row来完成布局，X作为简单的一个元素，可以用+然后transform:rotateZ(45deg)来模拟，不用专门切图标。此时，如果+的大小与字的大小是一样的，那对子元素用align-self:center还能达到对齐的效果，但这样往往会变得太小了。而放大之后，

利用细线布局、区分页面是常用的手段。一般UI为了美观都会采用 0.5 px 而不是 1px 的细线。而这就造成了问题：由于屏幕和设计稿的分辨率转换，如果在border中直接定义为0.5 px, 会造成有时候细线被抹杀成 0 px，从而看不到， 如果定义为 1px， 则实际显示的时候会变成 2px， 就失去了UI设计细线的原意。那么，该如何画一根优雅的 .5px 细线呢？这可以用css3的tra...

我司的 UI 虽然不是 处女座，但认（挑）真（剔）程度也与之不相上下了。作为一枚前端，当然也不好意思掉链子，所以在 UI 小哥的督促下，会最大可能地完美实现视觉稿。于是乎，一些本来一行实现的东西，为了效果美观，会用更多代码做得更加细致。上效果： UI 要求是，底部阴影宽度比图片的宽度略小，然后整体是个轮播效果，每张图片的阴影颜色不一样。假设图片的容器为banner, 为了减少html...

文章目录问题描述解决之道思路和踩的坑思路：踩坑（不完美/无效的解决方案）：问题描述安卓手机上，微信环境下上传完图片后，position: fixed 的导航栏在上下滚动页面的时候出现了抖动的情况，抖动完回到原位。ios上没测，但搜索问题的过程中发现有人反应IOS微信环境下position:fixed也有抖动的问题。解决之道页面结构是：<div id="#app"></...

why?无论选择了什么样的css组织方法，你都会从更加结构化的css 和 Ui 结构中获益。有些方式不那么严格，更加灵活。而另一些方法则更加易于理解，适用于团队协作。为什么要选择bem呢？它不像其他语法（smacss）那么复杂，但是仍然可以提供给我们优良的代码结构和易于识别的术语。模块化block永远不依赖于页面上的其他元素，因此不会遇到级联问题。而且易于从旧项目中迁移。只要从某一个块级元...

估计是浏览器环境的锅，一个小问题。红框处设置了flex布局，其中的内容align-self均设置了left，加了-webkit前缀的也写了一遍。chrome下是这个样子（也正是想要的样子）但在微信环境下，下面的时间跑到了居中。在app下，上面的title和下面的时间都变成了居中。微信下是这样： 很小的一处地方，但逼死了强迫症。。。。在尝试了把父元素align-items也设成left无果后，换了个在尝试了把父元素a

css3： the missing maunal》，译作《css3秘笈》。border-radius可以用百分比设定，也可以用40px/20px（即水平半径/垂直半径）设定，这两种都易导致椭圆形的圆角，浏览器会用元素宽度的百分比来算水平半径，高度的百分比来算垂直半径。web将渐变都当做图片image处理，因此可以结合其他属性比如background-size/position等等。css渐变生成器colorzilla

body的height不可少，如body{height:100%}，否则子元素会不认，如果子元素的高直接以百分比写的话，会不显示。因为识别不出来。 宽度则不会，因为浏览器的宽度是固定的，高度会滚，不固定。2. border-sizing其实是将默认的content-sizing转为了老ie的盒子模型 如果元素float 可以通过转为该模式，让多个元素在width相加===1时控制在

翻译与总结关于CSS的像素，devicePixedRatio与视窗的概念1.像素本身的概念，CSS中的像素（参考像素）2.物理像素与逻辑像素，DevicePixedRatio--2.1example: 选择不同质量的位图以适应不同分辨率的屏幕 3.移动端三类视窗的概念，how to get ideal viewport--3.example: 在meta中固定视窗宽度

Meta基础知识：H5页面窗口自动调整到设备宽度，并禁止用户缩放页面//一、HTML页面结构<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1渲染优化对于一些小图标，可以使用base64位编码，以减少网络请求。像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速

流程：看了一遍相关的MDN，挑重点看了点博客，做了做实验，最后瞎搞了一点笔记 评估方式：看代码能猜出布局，看布局能写代码？ 加成：随便看看SASS 1. float 看了啥： MDN 没啥东西 ALL ABOUT floats from css3 tricks 东西比较多 废话也比较多value: float: left; float: right; float: none;

伪类是: 伪元素是:::default 的 MDN是这么写的： 表示在一组相似元素中所有默认的用户交互元素。例如：在一组按钮中的默认按钮可以用这个伪类选择器选取。为了一开始就展现多个默认选项，允许多选的用户交互元素可能会有多个默认设置。在这种情况下，所有的默认选项都可以用 :default伪类表示。我表示看不懂。尝试的结果如下：// CSS :default

流行布局flex的细节1.overflow对a无效，如果一个”a “元素里面容纳了太多的文字，设定overflow:hidden是没有用的，文字还是会溢出。 哪怕设置了display:block, 还是没用2.display: inline-flex 的意义在于改变了外围容器的大小，与里面的元素是block 还是 inline 没啥关系。inline-flex会让外围的容器随着内容的大小而改变，尽可能小得包裹住

最近在复习CSS，深感 css 属于“易学难精”。 display:flex 配合div以百分比设定宽高可以达到非常好的效果，但精确性仍然有缺憾之处。一般来讲，此时内部自元素再定义margin就没意义了，但如果里面还有文本，则可以通过box-sizing : border-box 和padding 来设置文字的排布方式。

在sublime 2下安了一个sass高亮插件。下载地址在这里。解压后直接放到data的packages下面。官网在此sass基础： 1、 嵌套。selector 和 property 都可以嵌套。2、 换变量。如果变量在某个selector嵌套层里面，那它只在该层起作用，但可用!global强制其为全局变量。可以在@mixin 中以@if @else的方式来判断有无父元素

紧接上篇，sass高阶 @rules @directive 判断 遍历 @each @mixin@extend可以扩展类，在新类中的首行使用@extend .error；包括复杂的伪类，类的组合等，等于替换了@extend 的元素支持链式和一对多的继承。

这是一篇讲排版设计的外文文章，作者John D Berry 总结了加拿大的一位typographer， Carl Dair（写了本《design with type》）在排版中用到的七项原则。这里没有原文翻译，只是对这七条简单翻译了一下，配了原图。 原文地址在此 以及creativepro 里面有非常多关于design, layout, typo的内容，值得一看。作者形容carl dair是真正

图免费照片、图片、图标、平铺背景网址收藏（来源css3 manual一书第三版289页）照片： www.morguefile.com 图片： www.sxc.hu http://openphoto.net creative commons有搜索引擎可以找照片，视频，和音乐

第一篇在这里：CSS中的分辨率，像素(dpi,ppi,物理像素，独立像素，参考像素)，devicePixelRatio/density换算，与视窗viewport（一） ,主要讲了分辨率和像素的不同概念和区别。这篇的index：1.像素和分辨率的概念整理 2.what exactly is devicePixelRatio? 3.density的含义，与devicepixelratio的换算