灵感_idea -- IT技术博客大学习 -- 共学习共进步！

• 浅析line-height和vertical

line-height 通常被我们用来干嘛呢？比如：height：*px;line-height:*px;是这样的么？我们常常用它来对文字进行居中。为什么这样就能居中呢？因为行高是元素基线之间的距离，行高会减去字体的高度然后上下平分去建立一个行内框（inline box），如果这个时候高度和行高一致，自然就体现为居中。那么它有什么可研究之处呢？

• 《web前端最佳实践》—高维护性css

有人说html很简单，它甚至不被认为是一种真正的编程语言，当然还有另一个技术同样被类似的看待，它就是css。说实话，css的代码的确不复杂，如要要会简单的使用你只需要知道它是什么，然后任何一个人都能够轻松的用它来控制一个元素的宽高，内容字体的类型、大小、颜色等等。但它真的不只是一些规则。就像是同样认识字，会写字，但总有人能写出更好的文章一样。会用和科学的用，灵活的用仍然有距离。这篇文章来谈谈css中一些可能的最佳实践方法。

• 《web前端最佳实践》—高性能css

性能，这个词如今被炒的很热，也是每个开发者，由“知道”、“会做”之后必经的一个“怎样做好”的阶段。性能关乎用户在不同设备和不同网络状态下的体验。也被多方面因素所影响。此文说说css方面怎样做到高性能。

• 图片以及其他替换元素的空隙问题

今天来聊聊图片，当然，对于web来说，图片是个大命题，多大呢？要多大有多大~这里只谈它是怎么“不听话的”，然后让它乖一点。 Web的世界里有很多问题，与之对应的基本也有很多情景和对策。那么问题就来了，我们遇到某种情景和找到的对策也都具有偶然性，下面来挑很多人都遇到过的一种情况说说。

• 小叙透明

网页的历史不长，但是几经变化，不论是从布局，文字，颜色搭配，图标等等，都是有过诸多的演变，人们的审美不同了，或者说，一直在追求更美观的效果。拿一些细节方面来说，比如渐变，圆角，阴影，半透明，这几个应该是被用的最多，效果也很好的方法。其中前三个，都可以做到比较好的退化，甚至说牺牲，因为很多时候，即使它们在一些浏览器里有，另一些浏览器里没有，看起来也能让人接受，不会产生太大的影响，半透明就不同了，透明和不透明的差别还是蛮大的，那么今天就来聊聊“透明”。透明还分为两种，半透明的纯色，背景透明的图片。

• 小谈inline-block的那点空隙

最近有朋友遇到了这个问题，然后他百思不得其解：我没有设置边距呀，这中间怎么有空隙呢？我一看便知它用了inline-block。或许你会问，这个问题应该知道的啊，比较平常的问题。好吧，在两种情况下这是不易察觉的。一、设置了父元素背景而子元素没有背景；二、子元素本身就设置了外边距，而且远比可能出现的空隙要大；

• margin那些事儿

Margin是什么？ Margin这个概念本身并不难，我也不想把它说的多晦涩，会css的都知道box盒模型，它就是盒与盒之间的间距，俗称外边距，也有叫外补白的，这些不重要。是的，它就是这么简单，但是，它又是怎么兴风作浪的呢？在刚接触css的时候，有个小师傅告诉我，能用padding的地方就不要用margin，容易出现问题，我当时是谨记在心，以至于后来在挺长一段时间，也不知道会有什么问题。人就习惯于用“有问题”来概括一个还没弄明白也没找到解决方案的问题，当然这是消极的，我们应该面对问题，解决问题。

• 《web前端最佳实践》—HTML篇

很多人把web标准挂在嘴边，却没有引起足够重视，只关注页面外在的表现而忽略页面本身代码的质量。标准的页面具有哪些优点？

• z-index和zoom这哥俩

今天为什么要谈这个呢？出于一个页面仔的“窥探”欲吧，也可能不是，因为这些本来就是需要知道的，只是可能没有引起太多人注意。当然，每个“是什么”的背后都有一个“为什么”，很多人都遇到过“设置了z-index却无用“的问题。 z-index是干嘛的呢？——设置元素在z轴方向的层级。那么怎么用它才是正确滴捏？

• 你不该忽视的小问题之margin叠加篇

在我刚开始学习html的时候，几乎所有会的人都说最多一个星期就学会了。当我学习css到了一定阶段的时候，觉得也挺容易的呀，为什么有那么多人都做了那么久，还在那儿研究什么呢？与此同时，还有很多人去吐槽jquery，说它就是设计师玩儿的东西，前端敲代码的你应该去研究js以及各种框架诸如此类等等，反正你要让自己在搞的东西别人听了觉得高大上、不明觉厉就对了。这样的现象也不能说不好，因为毕竟还是在不断的学习，可是，不得不说也是浮躁的表现，高手用树叶都能杀人，你却一直只想要绝世好剑，在鄙视自己的道路上前进不止~问题是你也顺便鄙视了别人，呵呵。

• 图文浅谈css3

css3已经“出来”挺久了，由最初的新奇，尝试，到现在慢慢的被习以为常的应用，特别是移动端需求的暴增，对css3更好的支持，吸引更多的人走了进来，但是，对于刚开始接触它的人来说，或许会有很多的混沌之处，毕竟它是个大宝藏，而多数人因应用的局限，了解的面也相对局限。本文就试图给出一个稍大范围的概括性展现。当然，也只是一部分。一谈起css3，多数人可能首先想到的是各种炫酷的效果。的确，css3的出现的确是使得css的世界有了焕然一新，被解放了的感觉。以前需要用图片的，需要多个标签进行堆叠的，需要用js的，需要用flash的等等，甚至是几乎想不到办法去做的东西，css3都给了我们相应的补偿。但是，今天我不去从那些方面开始谈，我会按照某种分类把css3来个整体浏览。目的是让对css3不太了解的人能有个大概的了解，我自己也算是复习一下。另外，此文不会列出一堆代码给你看。

• html5 section和article,向左还是向右？

html5的出现，让前端人员眼前一亮，大喊方便的同时，也空前重视标签使用的语义化，人们恨不得一下就去改变由div+css所带来满眼的div。新增的结构性标签有很多，比如header、nav、footer、aside、section、article等。但有个问题令不少人犯难，前面的几个都还比较好理解，后面两个到底是什么意思呢，如果按照直译过来的意思。section：“部分”，article：“文章”。这显然无法很好的去区分，为什么呢，因为“部分”这个词儿，意思太模糊，“文章”里面也可以有“部分”，“部分”里面也可以有“文章”。权威指南里是这么进行说明的。 article：代表文档、页面或应用程序中独立的、完整的、可以独自被外界引用的内容。 section：用于对网站或应用程序中页面上的内容进行分块。

• 轻松入门css3之border-image

话说大家不管用过没用过，对border-image应该都有所耳闻，相比css2.1，css3的新东西那么多，为什么要挑这个来说呢，因为我个人经验来说，这个相对来说较难理解。那它到底是什么，又怎么用呢，有哪些需要注意的地方？这方面也有书籍和文章讲，如果你看过，却觉得没搞懂，也没弄明白怎么回事，那么希望这篇文章可以帮到你！我不会按常理出牌~ 首先要跟大家说的是，不要先入为主的走入一个死胡同，不然很难走出来，图片边框，跟使用线型边框的时候不一样，这个思维要转换过来，使用线型边框的时候，你只需要设置“边框宽度”、“类型”和“颜色”。那么边框就出来了，使用图片的时候你可不能照搬，它有自己的一套规则，所以，请清空你的脑袋，忘却才能更好的学习(这话好像在武侠片里比较常用)~

• 再谈怎样更好的写css

先说两句闲话，为什么叫再谈呢？因为以前有谈过，请看这里初谈css博客搬过家，请忽略发表时间~ 时间差不多是一年前，那个时候还没有换工作，公司就我一个前端，负责一个项目的所有前端相关，当然，说是这样说，我是没有能力去顾及那么多的，自己懂的或者意识到的东西本身就有限，只是通过一整个项目的折腾，总会意识到一些问题，甚至有时候代码写得自己都忍无可忍，有痛就有领悟，自然就能总结出一些东西，就有了那篇初谈。当时写完之后蛮有成就感的，现在看来还是有很多不足，因为是初谈，为照顾一些初学者，包含了多一些基础的东西，一年过去了，前段时间在团队内部也做了一次css的分享，借此机会再谈谈吧，虽然依旧可能有很多不足~选择器

• 初谈怎样更好的去规划CSS

我是个什么都谈不上的不合格的前端~但还算是个有点追求、不断前进的前端，我希望自己的代码更合理、更高效、更优美。为了照顾一下基础稍微薄弱一些的人，我会从浅到深的逐步去说这个事儿。学习前端技术，基本上都要从html、css、js这么一条线走过来，那么最先写的就是html了，没有结构和内容，网页就是一片空白，就无从谈起它长什么样子(css)，初学时，不会去写整个页面，而是从一个个能实现效果的小例子去写，每当这些小例子乖乖的呈现在网页中的时候，新童鞋都会兴奋异常是吧~什么各种粗体的，斜体的，居中的，大小写字母的，换行的，水平线，跑马灯的，背景音乐的，都想去试试(其实都差不多~)，到后来可能会知道这样不好是吧，不符合结构和表现分离的原则。

• 导航类“不定宽水平居中”的几种思路

定宽居中我们见的很多，可以用width、text-align、margin等来实现，但是如果没有宽度呢？下面提供几种思路供大家参考，给出基本的html结构和思路，当然了，也不一定是这样的结构，道理搞懂了相信大家能够灵活变通。另外，里面的项是有固定宽和高的。

• 说说基本的布局观

这个话题由我来说可能不是最合适的，论资历和认识，我不如那些征战多年的行业前辈们，但是我想做的事情，请别人花时间和精力来做，觉得不大合适，我也愿意写这么一篇文来分享一些关于网页布局最基本的东西。这篇文会有两个特点：一、不会有“深刻认识”、“揭秘”之类的出现，因为本来就没有；不会有很厉害或者通用的布局方案告诉大家，不是本文重点；也不会时不时把标准搬出来，只会直观的简要描述。二、会带有一定的故事情节，我相信前端们都有着相似的经历，沿着故事的发展路线，或许你会产生更多的共鸣。换句简单的话说就是：更适合初学者看~

• 那些年我干过的矬事

人人都更加愿意谈自己擅长的新东西，好玩的东西，高级的东西，某种技巧等，我为什么写这么一篇文来告诉大家自己做过的矬事呢？每个人都是从无知到有知，从做得差到做得好，很多人会觉得自己在某个时候进入了一种瓶颈，其实就是没有对比，没有去接触更好，更广阔的东西，没有跟外界有足够的交流，就比较难发现自身的不足，勇于去主动发现自己的不足，总结思考，加以改进，就能从中学到东西，得到提升。我写到的这些东西，应该也有很多人同样遇到过，大家的经历应该都是相似的，所以，希望能够起到一定的参考作用。