您现在的位置：首页
--> CSS/HTML
最近有朋友遇到了这个问题，然后他百思不得其解：我没有设置边距呀，这中间怎么有空隙呢？我一看便知它用了inline-block。或许你会问，这个问题应该知道的啊，比较平常的问题。好吧，在两种情况下这是不易察觉的。
一、设置了父元素背景而子元素没有背景 ；
二、子元素本身就设置了外边距，而且远比可能出现的空隙要大；
不是什么稀奇的技术，很多很多年前自己就玩耍过。
之所以今天拿出来说一下，是因为今天几个小伙伴遇到类似问题，突然发现，一些自己觉得不怎么样的东西，说不定对别人而言会有很大帮助，于是我就打算放出去，希望可以帮助到有需要的小伙伴。
Margin是什么？
Margin这个概念本身并不难，我也不想把它说的多晦涩，会css的都知道box盒模型，它就是盒与盒之间的间距，俗称外边距，也有叫外补白的，这些不重要。是的，它就是这么简单，但是，它又是怎么兴风作浪的呢？
在刚接触css的时候，有个小师傅告诉我，能用padding的地方就不要用margin，容易出现问题，我当时是谨记在心，以至于后来在挺长一段时间，也不知道会有什么问题。人就习惯于用“有问题”来概括一个还没弄明白也没找到解决方案的问题，当然这是消极的，我们应该面对问题，解决问题。
很多人把web标准挂在嘴边，却没有引起足够重视，只关注页面外在的表现而忽略页面本身代码的质量。
标准的页面具有哪些优点？
今天为什么要谈这个呢？出于一个页面仔的“窥探”欲吧，也可能不是，因为这些本来就是需要知道的，只是可能没有引起太多人注意。
当然，每个“是什么”的背后都有一个“为什么”，很多人都遇到过“设置了z-index却无用“的问题。
z-index是干嘛的呢？——设置元素在z轴方向的层级。那么怎么用它才是正确滴捏？
在我刚开始学习html的时候，几乎所有会的人都说最多一个星期就学会了。当我学习css到了一定阶段的时候，觉得也挺容易的呀，为什么有那么多人都做了那么久，还在那儿研究什么呢？与此同时，还有很多人去吐槽jquery，说它就是设计师玩儿的东西，前端敲代码的你应该去研究js以及各种框架诸如此类等等，反正你要让自己在搞的东西别人听了觉得高大上、不明觉厉就对了。这样的现象也不能说不好，因为毕竟还是在不断的学习，可是，不得不说也是浮躁的表现，高手用树叶都能杀人，你却一直只想要绝世好剑，在鄙视自己的道路上前进不止~问题是你也顺便鄙视了别人，呵呵。
虽然属性选择器是CSS3选择器的范畴，但是IE7浏览器很给力地支持，但是，嘴上说支持，实际上还有很多有意思的特性表现，这里，就以实例的形式给大家分享下，希望能对大家实际的工作有所帮助或启迪。
• 图文浅谈css3
css3已经“出来”挺久了，由最初的新奇，尝试，到现在慢慢的被习以为常的应用，特别是移动端需求的暴增，对css3更好的支持，吸引更多的人走了进来，但是，对于刚开始接触它的人来说，或许会有很多的混沌之处，毕竟它是个大宝藏，而多数人因应用的局限，了解的面也相对局限。本文就试图给出一个稍大范围的概括性展现。当然，也只是一部分。
一谈起css3，多数人可能首先想到的是各种炫酷的效果。的确，css3的出现的确是使得css的世界有了焕然一新，被解放了的感觉。以前需要用图片的，需要多个标签进行堆叠的，需要用js的，需要用flash的等等，甚至是几乎想不到办法去做的东西，css3都给了我们相应的补偿。
但是，今天我不去从那些方面开始谈，我会按照某种分类把css3来个整体浏览。目的是让对css3不太了解的人能有个大概的了解，我自己也算是复习一下。另外，此文不会列出一堆代码给你看。
CSS 的完整英文名称是: Cascading Style Sheets, 级联样式表. 除了可以定义丰富的样式, 以及进行界面控件布局外, CSS 最重要的特性便是名字中的"级联(Cascading)"一词. 级联代表了父子关联, 天生便是和数据结构中的"树"相关的.
我创建的 CocoaUI iOS UI 框架, 是一个使用 CSS 进行 iOS 上流式布局的开发框架, 极大地方便了 iOS 应用的界面开发, 轻松适配多种屏幕. 因为 CocoaUI 使用 CSS 来进行界面布局和定义界面样式, 所以需要对 CSS 的样式规则进行匹配, 将某一条 CSS 样式作用到某一个 UIView(IView) 上面.
本文讲的是CSS1-CSS3 <color>颜色的一些知识，有些你可能知道，有些可能并不知道，算是对过往一些知识点的总结吧。无Demo，有截图，有源代码示意，总之，希望本文的内容能够对您的学习有所帮助。
html5的出现，让前端人员眼前一亮，大喊方便的同时，也空前重视标签使用的语义化，人们恨不得一下就去改变由div+css所带来满眼的div。新增的结构性标签有很多，比如header、nav、footer、aside、section、article等。
但有个问题令不少人犯难，前面的几个都还比较好理解，后面两个到底是什么意思呢，如果按照直译过来的意思。section：“部分”，article：“文章”。这显然无法很好的去区分，为什么呢，因为“部分”这个词儿，意思太模糊，“文章”里面也可以有“部分”，“部分”里面也可以有“文章”。权威指南里是这么进行说明的。
article：代表文档、页面或应用程序中独立的、完整的、可以独自被外界引用的内容。 section：用于对网站或应用程序中页面上的内容进行分块。
话说大家不管用过没用过，对border-image应该都有所耳闻，相比css2.1，css3的新东西那么多，为什么要挑这个来说呢，因为我个人经验来说，这个相对来说较难理解。那它到底是什么，又怎么用呢，有哪些需要注意的地方？这方面也有书籍和文章讲，如果你看过，却觉得没搞懂，也没弄明白怎么回事，那么希望这篇文章可以帮到你！我不会按常理出牌~
首先要跟大家说的是，不要先入为主的走入一个死胡同，不然很难走出来，图片边框，跟使用线型边框的时候不一样，这个思维要转换过来，使用线型边框的时候，你只需要设置“边框宽度”、“类型”和“颜色”。那么边框就出来了，使用图片的时候你可不能照搬，它有自己的一套规则，所以，请清空你的脑袋，忘却才能更好的学习(这话好像在武侠片里比较常用)~
对一个元素水平垂直居中，在我们的工作中是会经常遇到的，也是CSS布局中很重要的一部分，本文就来讲讲CSS水平垂直居中的一些方法。由于我们大搜车的日常工作中已经不再需要理会低版本IE，所以本文所贴出的方法，是没有去考虑IE的，另外，文中的css都是用less书写的，如果看不懂less，可以把我给的demo链接打开，然后在控制台中查看最终的css，或者是点击codepen上的“View Compiled”按钮，可以查看编译后的css。
先说两句闲话，为什么叫再谈呢？因为以前有谈过，请看这里初谈css博客搬过家，请忽略发表时间~
时间差不多是一年前，那个时候还没有换工作，公司就我一个前端，负责一个项目的所有前端相关，当然，说是这样说，我是没有能力去顾及那么多的，自己懂的或者意识到的东西本身就有限，只是通过一整个项目的折腾，总会意识到一些问题，甚至有时候代码写得自己都忍无可忍，有痛就有领悟，自然就能总结出一些东西，就有了那篇初谈。当时写完之后蛮有成就感的，现在看来还是有很多不足，因为是初谈，为照顾一些初学者，包含了多一些基础的东西，一年过去了，前段时间在团队内部也做了一次css的分享，借此机会再谈谈吧，虽然依旧可能有很多不足~选择器
我是个什么都谈不上的不合格的前端~但还算是个有点追求、不断前进的前端，我希望自己的代码更合理、更高效、更优美。为了照顾一下基础稍微薄弱一些的人，我会从浅到深的逐步去说这个事儿。
学习前端技术，基本上都要从html、css、js这么一条线走过来，那么最先写的就是html了，没有结构和内容，网页就是一片空白，就无从谈起它长什么样子(css)，初学时，不会去写整个页面，而是从一个个能实现效果的小例子去写，每当这些小例子乖乖的呈现在网页中的时候，新童鞋都会兴奋异常是吧~什么各种粗体的，斜体的，居中的，大小写字母的，换行的，水平线，跑马灯的，背景音乐的，都想去试试(其实都差不多~)，到后来可能会知道这样不好是吧，不符合结构和表现分离的原则。
定宽居中我们见的很多，可以用width、text-align、margin等来实现，但是如果没有宽度呢？
下面提供几种思路供大家参考，给出基本的html结构和思路，当然了，也不一定是这样的结构，道理搞懂了相信大家能够灵活变通。另外，里面的项是有固定宽和高的。
CSS3 will-change属于web标准属性，虽然目前还是草案阶段，但出现已经有些时日了，兼容性这块Chrome/FireFox/Opera都是支持的。
这个属性作用很单纯，就是“增强页面渲染性能”。那它是如何增强的呢？
本文都过一个实例抛出will-change这个概念，继而解释其作用，分析其语法，提示使用注意事项等。
希望本文的内容能够对大家的学习有所帮助。
大家可能在CSS中见到过字符@ 然后加一些关键字的用法，这种用法就称之为AT规则。而本文的内容就是列举目前CSS中支持的或即将支持的一些CSS规则，让大家提前有个大致的了解和认识，希望对日后的工作与学习能够提供一些帮助！
近3天十大热文
-
[17] 浏览器的工作原理：新式网络浏览器幕后揭秘 -
[14] 界面设计速成
-
[14] Android设计中的.9.png
-
[12] 深入剖析 redis replication
-
[12] 我的git笔记
-
[12] Spark性能优化——和shuffle搏斗
-
[11] sns视觉设计分享
-
[11] Python 代码规范小结
-
[11] Python程序的执行原理
-
[11] 系统工程师的自我修养- sed篇
赞助商广告
