分类：CSS

2016
12-14

css预处理语言的模块化实践

编写css是前端工作中，一项普通而又频繁的劳动，由于css并不是一门语言，所以在程序设计上显得有些简陋。对于小型项目来说，css的量还不至于庞大，问题没有凸显，而如果要开发和持续维护一个较为大型的项目，那就需要对css进行管理和规范了，否则会发生不可挽回的后果（吓唬谁呢？？）。背景上一节【从css谈模块化】我们通过规范的约束，将css的编写方式进行了优化和改进，形成一种可持续发展的路线。但还是遗留了一些问题：冗... 继续阅读 >

2016
12-14

从css谈模块化

模块化是现今我们随处都可以听到的一个名词，什么是模块化？为什么我们需要模块化？这是本系列文章我们要弄明白的一个问题。我们也借这部分内容，顺带回顾一下前端的发展历程。 说实话，模块化这个主题有点大，我一时也不知道从哪里讲起比较合适，通常来说，前端的工作内容主要涉及三个方面：html、css、js（javascript），其他的像as（actionscript，flash的脚本语言）、jsp、smarty等等模版类的语法标记我们在此就先略去... 继续阅读 >

2016
12-14

CSS 高级布局技巧

随着IE8逐渐退出舞台，很多高级的CSS特性都已被浏览器原生支持，再不学下就要过时了。用:empty区分空元素兼容性：不支持IE8假如我们有以上列表：<divclass="item">a</div><divclass="item">b</div><divclass="item"></div>我们希望可以对空元素和非空元素区别处理，那么有两种方案。用:empty选择空元素：.item:empty{display:none;}或者用:not(:empty)选择非空元素：.it... 继续阅读 >

2016
12-12

原生 CSS 网格布局学习笔记

译者注：此文适合有一定CSS原生网格布局使用经验的开发者（读前需要先去了解一下原生CSS网格的语法），原生CSS网格布局（NativeCSSgrid）截止目前还没有被任何正式版本的浏览器实现。以下是来自OliverWilliams的帖子.Oliver已经学习了相当长时间的原生CSS网格，可以说是在CSS网格方面有一定的发言权。在这篇文章中，他将以非同寻常的思路分析自己的CSS网格布局学习之路。我比较赞同他的想法，就是学习一门新技术的时候... 继续阅读 >

2016
11-29

CSS 各种定位（position）方式的区别

        static：静态定位是position的默认值，元素框正常生成，也就是没有定位时的正常显示。relative：相对定位用法一：元素相对自身的原位置偏移某个距离，但是原本的空间依旧保留，表现为空白。用法二：把一个元素设置为position:relative;可以使该元素的子元素相对该元素绝对定位。absolute：绝对定位元素从文档流删除，并相对于包含块定位。元素... 继续阅读 >

2016
11-29

20个CSS 代码建议

在这篇文章中，我想跟你分享20条由CSS社区推荐的约定和最佳实践。有些建议可能比较适合新手，而有些则更高级一些，但我希望每个人都可以在本篇文章中收获自己不知道的知识。1.谨慎使用外边距属性与其它的属性不同，垂直方向上的外边距相遇时将会发生折叠。这意味着如果一个元素的下边距遇到了另一个元素的上边距，那么二者中较大的一个将被留下。下面是一个简单的例子。<divclass="squarered"></div><divclass="squa... 继续阅读 >

2016
10-22

css 实现竖直居中的 N 种场景及 N 种方法

刚开始工作的时候，css里的竖直居中一直是个老大难问题。每次用到的时候都去网上搜，搜，搜，半天才搜到合适的解决方法。然后下次遇到，呃，又忘了~后来仔细回忆了一下，其实CSS实现竖直居中是有几种不同的应用场景的，需要分别使用不同的解决方法。这也是为啥每次都觉得，诶上次那个解决方法好像不行呢？（原来并不是我智商的问题）好了废话不多说，记录下遇到的不同场景及解决方法，希望能对自己或者别人有所帮助。inline或... 继续阅读 >

2016
10-22

理解并运用 CSS 的负 margin 值

本文样式代码采用SCSS。浏览器兼容性为IE6+。你的网页中，不可能没有使用过margin。大多数情况下，我们采用的都是正数的margin值，可能有时候会用到负的margin值。在我们的印象中，负的margin值就类似于浏览器的hack一样，不被人接受。但是，本文要说明的就是，负的margin值并不是hack，这是正常范围内的写法。Negativevaluesformarginpropertiesareallowed,buttheremaybeimplementation-specif... 继续阅读 >

2016
10-22

CSS中强大的EM

这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何使用“em”对层进行弹性扩展？又是如何扩展文本和图像等内容？下在我们就一起带着这些问题开始今天的“em”之行。什么是弹性布局？用户的文字大小与弹性布局用户的浏览器默认渲染的文字大小是“16px”，换句话说，Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px... 继续阅读 >

2016
10-17

七种css方式让一个容器水平垂直居中

阅读目录方法一：position加margin方法二：diaplay:table-cell方法三：position加transform方法四：flex;align-items:center;justify-content:center方法五：display:flex;margin:auto方法六：纯position方法七：兼容低版本浏览器，不固定宽高总结这种css布局平时用的比较多，也是面试题常出的一个题，网上一搜一大丢，不过还是想自己总结一下。这种方法比较多，本文只总结其中的几种，以便加深印象。效果图都为这... 继续阅读 >

2016
10-14

史上最强大的40多个纯CSS绘制的图形

今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。Square(正方形)#square{width:100px;height:100px;background:red;}Rectangle(矩形)#rectangle{width:200px;height:100px;background:red;}Circle(圆形)#circle{width:100px;height:100p... 继续阅读 >

2016
10-05

使用CSS完成元素居中的七种方法

在网页上使HTML元素居中看似一件很简单的事情.至少在某些情况下是这样的，但是复杂的布局往往使一些解决方案不能很好的发挥作用。在网页布局中元素水平居中比元素垂直居中要简单不少，同时实现水平居中和垂直居中往往是最难的。现在是响应式设计的时代，我们很难确切的知道元素的准确高度和宽度，所以一些方案不大适用。据我所知,在CSS中至少有六种实现居中的方法。我将使用下面的HTML结构从简单到复杂开始讲解:<divclass=... 继续阅读 >

2016
09-10

20个编写现代CSS代码的建议

明白何谓MarginCollapse不同于其他很多属性，盒模型中垂直方向上的Margin会在相遇时发生崩塌，也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时，只有二者中的较大值会被保留下来，可以从下面这个简单的例子来学习:.square{width:80px;height:80px;}.red{background-color:#F44336;margin-bottom:40px;}.blue{background-color:#2196F3;margin-top:30px;}在上述例子中我们会发... 继续阅读 >

2016
09-10

调试 CSS 的方法

我经历过许多CSS代码的调试工作，有别人写的也有自己写的，有移动端平台的也有标准桌面浏览器的，从陈旧的IE到最新的基于Webkit的每日构建。经验告诉我，很多人并没有一个标准的CSS调试流程。我发现在大多数情况下，拥有专业的解决问题的方法，能够节省花在bug上的时间。下面是我总结的经验。我不保证这是最适合的调试CSS的方法，但是确实对我很有效。如何CSS不是你的主要编程语言，调试它可能就像暗黑艺术一样... 继续阅读 >

2016
08-22

试试这４个CSS动画解决方案和资源

随着移动设备的大量使用和CSS3兼容性在浏览器中的普及，越来越多的程序猿开始设计和使用基于CSS3的动画效果解决方案，但是自己编写基于CSS3的动画效果也是一件比较让人纠结的事情，为了快速的完成项目，大家也可以考虑使用一些现成的CSS3的动画效果库，今天这篇文章中，给大家介绍五款比较流行的CSS3类库和资源，希望大家能够喜欢~~Animate.cssanimate.css是我经常在项目中使用的动画效果类库，包含了很丰富的动画过... 继续阅读 >

2016
08-19

前端CSS一些小细节

英文原文：LearningtoLovetheBoringBitsofCSS未来的CSS太让人兴奋了：一方面，是全新的页面布局方式；另一方面，是酷炫的滤镜、颜色等视觉效果。这些CSS，受开发者追捧，被杂志和博客文章铺天盖地地介绍。如果说这些特性是CSS华丽的一面，那我们来看看它朴实的一面：很不起眼的东西，如选择器、单位、函数（方法）。我经常说这是繁琐的东西，但我意思是它们能干漂亮的活，这就是我要分享的。怎么说呢，让... 继续阅读 >