分类：CSS+DIV

2017
08-29

你所不知道的 CSS 动画技巧与细节

怕标题起的有点大，下述技巧如果你已经掌握了看看就好，欢迎斧正，本文希望通过介绍一些CSS不太常用的技巧，辅以一些实践，让读者可以更加深入的理解掌握CSS动画。废话少说，直接进入正题，本文提到的动画不加特殊说明，皆指CSS动画。正负旋转相消嗯。名字起的很奇怪，好像数学概念一样。（写完文章才发现这里应该叫正反旋转相消，图都截完了，大家心里清楚就好）在动画中，旋转是非常常用的属性... 继续阅读 >
2017
08-05

使用 JavaScript 进行即时表单验证

HTML5引入了几个新的属性来实现基于浏览器的表单验证。pattern属性是一个正则表达式，用于定义textarea元素和大多数input元素类型的有效输入范围。required属性指定某个字段是否需要输入。对于没有实现这些属性的传统浏览器，我们可以使用它们的值作为填充表单的基础。我们还可以使用它们来提供更有趣的增强功能-即时表单验证。来自作者的更多内容一个JavaScript可访问性的失败实验的经验教训可用的多... 继续阅读 >
2017
03-11

2017 年值得学习的 3 个 CSS 新特性

在众多的CSS新特性中，有3个今年采用的新特性让我抑制不住地激动。1.特性查询不久前，我写了我真心期望的一个CSS特性，就是关于特性查询，现在基本上可以说它已经存在了！它支持除InternetExploer之外的主流浏览器(包括OperaMini)。特性查询，使用@supports规则，允许我们将CSS包含在一个条件块中，这个条件块中会检查当前useragent是否支持一个CSS属性键值对，在支持的情况下其中的内容才... 继续阅读 >
2017
03-11

[译] 再谈 CSS 中的代码味道

谈CSS中的代码味道回到2012年，我写了一篇关于潜在CSS反模式的文章CSS中的代码味道。回看那篇文章，尽管四年过去了，我依然认同里面的全部内容，但是我有一些新的东西加到列表中。再次说明，这些内容并不一定总是坏的东西，因此把它们称为代码味道：在你的使用案例中它们也许可以很好的被接受，但是它们仍然让人觉得有一点奇怪。在我们开始前，让我们回想一下什么是代码味道，摘自维基百科(emphasismine)：... 继续阅读 >
2017
03-07

如何使用CSS实现多行文本的省略号显示

 合理的截断多行文本是件不容易的事情，我们通常采用几种方法解决：overflow:hidden直接隐藏多余的文本text-overflow:ellipsis只适用于单行文本的处理各种比较脆弱的javascript实现。之所以说这种实现比较脆弱是由于需要文本长度的变化时刻得到回流（relayout）后的布局信息，如宽度原文写作时间是2012.9.18号，比较有意义的一天。不过作者忽略了WebKit提供的一个扩展属性-webkit-lin... 继续阅读 >
2017
03-07

CSS3 新特性学习

CSS3是最新的CSS标准，并且完全向后兼容，不过目前W3C仍然在对CSS3规范进行开发，虽然标准的规范还没有正式发布，但是现代浏览器已经支持相当多的CSS3属性了。CSS3提供了很多可以把玩的新特性，模糊了之前只控制样式的定义，让之前很难处理的样式（如：圆角、多列等）和只能通过Javascript来实现的动画效果等现在都能通过CSS3新特性提供的属性很轻松的实现，功能是越来越强大。一、CSS3边框在css3中新增的... 继续阅读 >
2017
02-17

CSS通用数据类型

CSS中属性的值有着许多种格式。为了让用户代理（即浏览器）能够识别一个值是否有效，则需要确认该值是否符合该类值支持的格式的其中一种。这些属性值所支持的格式叫做数据类型，在规范中用<this>的形式标识。CSS中存在两种数据类型——特定数据类型和通用数据类型。特定数据类型只与一个单独的属性或某一类属性有关联。例如，<transform-function>这一数据类型仅仅只能用作transform属性的值。相反的，通用数据类... 继续阅读 >
2017
02-14

2017年值得学习的3个CSS特性

随着新的一年到来，我们有一整套新的东西要开始学习。虽然今年的新特性有很多，但有3个新的特性是最令我激动不已的。1.FeatureQueries前段时间，我写过关于FeatureQueries的一篇文章，叫“我最想要的CSS特性之一”。好了，现在它已经出现在这里了。它支持除了IE浏览器之外的所有主流浏览器（包括OperaMini）。FeatureQueries，使用这个@supports规则，允许我们包含CSS在一个条件块，但只有当前用户客户端支... 继续阅读 >
2017
01-17

原来CSS这样写是会让app崩溃的

先废话一下之前在自己的个人公众号中提到了一篇利用CSS的方式进行XSS攻击，当时有朋友跟我说，让我去获取那个网站的cookie，再然后进入那个网站的后台去玩。然而，技术能力实在有限，搞不了这些东西，只是觉得那个网站没有适当过滤HTML标签是一件很危险的事情。不过今天要说的CSS代码真的是让app崩溃了，至于信不信，看图就知道咯。故事背景昨晚在被窝中的我突然收到一封邮件，大概内容是说因为... 继续阅读 >
2016
12-21

23条前端性能优化，看懂就够了！

 前端性能优化是个巨大的课题，如果要面面俱到的说的话，估计三天三夜说不完。所以我们就从实际的工程应用角度出发，聊我们最常遇见的前端优化问题。Yslow是雅虎开发的基于网页性能分析浏览器插件，可以检测出网页的具体性能值，并且有著名的Yslow23条优化规则，这23条，就够我们玩的了。1.减少HTTP请求次数尽量合并图片、CSS、JS。比如加载一个页面，如果有5个css文件的话，那么会发出5次http请求... 继续阅读 >
2016
12-21

前端程序员需要知道的7种新型的CSS长度单位

众所周知CSS技术我们虽然很熟悉，在使用的过程却很容易被困住，这让我们在新问题出现的时候变得很不利。随着web继续不断地发展，对于新技术新解决方案的要求也会不断增长。因此，作为网页设计师和前端开发人员，我们别无选择，必须熟悉我们手上的工具，做到知己知彼，这样才能百战不殆。这就意味着有那么些个特别的货，虽然平常都不怎么会用上，但是一旦某个地方需要它们了，他们就真的是特么得合适不过来了呢。今儿，... 继续阅读 >
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

十分钟入门 Less

我们都知道写CSS代码是有些枯燥无味的，尤其是面对那些成千上万行CSS代码的项目。你始终在相同的地方使用相同的规则并且在你的编译器中搜索和替换每次颜色的变化。这需要很多的努力和规则来保持你的CSS可维护，但它本不应该这样的。 很幸运，网站开发社区已经解决了这个问题，现在我们拥有诸如Less,Sass和Stylus之类的预处理器，它们给我们提供了许多优于纯CSS的好处。变量-它可以让你更轻松... 继续阅读 >
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

CSS3 巧妙实现聊天气泡

前一阵子敢玩的Mobile页改版完成了，就之前的页面风格更加扁平化，从暗色系为主背景转到亮色背景，去掉更多的阴影，给用户简约的体验风格，哈哈我不是设计师不过多评价啦。悄悄告诉大家所有的style都是我自己写的。全站哦！！！下面说正题，说好的聊天气泡呢？传统的聊天气泡什么又是传统的聊天气泡,直接上图代码如下<divclass="comment"></div><styletype="text/css">.comment{width:150px;height:35px;posit... 继续阅读 >
2016
10-17

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

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

那些不推荐使用的html标签

那些不推荐使用的html标签acronym首字母缩写，例如WWW类似的有abbr标签，表示单词缩写，例如inc.。语法如下：<acronymtitle="WorldWideWeb">WWW</acronym><abbrtitle="incorporated">inc.</abbr>推荐用abbr，不要用acronym（忽略上面提到的语义上的差异）appletJava小应用程序，主要提供绘图功能（在页面上通过代码绘制一些东西），例如：<appletcode="ShowImage.class"width=600height=400archive="Imagetest.jar... 继续阅读 >