标签: CSS

水平且垂直居中 CSS 详解

自适应的水平垂直居中

旅行商人罗伦斯在马车货台上的麦束堆里,发现沉睡中的少女——自称是丰收之神赫萝的美丽少女,有着狼的耳朵及尾巴。

「虽然奴家长久以来被尊为神,不过,奴家就是奴家,奴家是赫萝。」

 

相比于水平居中用 margin:auto; 的简便,CSS 没有直接的垂直居中属性,必须通过各种诡异的技巧去实现,确实让人很头疼。以上算是一种实现方式,核心的代码如下:

 
这段代码中,最重要的是 .outer:before 这个伪元素。它起到了连接内外元素以及垂直对齐的作用。
 
需要明白的是,对一个 div 而言,它的伪元素会放在这个 div 包含的任何内容元素的前面,默认为 inline-block 元素(即“行内元素”或者“内联元素”)。示例:

执行结果:

元素内容

 
当元素内容为其它元素,尤其是块级元素时,则有内容的 :before 会在最顶上。

<p>元素块级内容</p>

 
再强调一遍,:before 其实是一个元素的子元素,永远排在其它实际子元素的前面,比如:

的实际执行效果如下:

是特殊的子元素

可以看到,对于 p 元素添加的 border,连 :before 这段文字也被包含在内。
 
现在再回头来看原始代码,如果把 :before 的部分修改一下,给 :before 元素加个边框,修改内容,使得识别更简单:

垂直居中

这样这段代码的原理就非常清楚了。首先,:before 伪元素和内部元素(通过 display:inline-block 设置为行内元素)共同构成了“一行文字”。其次,所有的行内元素都利用 vertical-align:middle 进行了垂直居中对齐。最后,再设置 :before 的高度使得它上下都顶到父元素的边框。这样,同一”行”内的其它元素在视觉就都相对父元素垂直居中了。其实它们在逻辑上真正对齐的对象是 :before。而 :before 自己,则被“卡”到了正中间的位置。
 
最后,由于 :before 在没有实际内容(通常用 ” ” 空格填充 content 属性)时其实也有宽度,所以在父元素上使用针对文本的 text-align: center; 虽然可以把左右居中也一起做掉。不过还是用常规的 margin:auto 更精确一点。解决办法是对 :after 伪元素也设置 content:” “。

PS:因为 ie6 不支持伪元素,所以……要不还是用 table 吧。

写了个 Mac 键盘当练习了

围观地址: https://github.com/kaikaiiiiiii/mac-keyboard  用了一些简单的 CSS,最后看起来效果还不错。

缘起是想给自己写个在 mac 下通过 alt/shift+alt 加内容键可以直接输入的符号列表,后来想想要不就做个键盘得了。最后效果就如下图了。

1. 功能键区的图标用的是 http://fontawesome.io ,不过依然有些图标找不到,暂空。F8 的图标是两个 fa 图标拼的。F1/F2 的图标比较写意,也不是完全一致。

2. 通过 :active 伪类添加了按键点下时的效果,包括:

(1) 底色变全黑 #000; (默认颜色是#333;)

(2) 位置右移 2 像素,下移 2 像素。

3. 通过 Transition 添加了“回弹”的效果。

4. 通过两个像素的 Border-bottom 效果,强调了按住 alt/shift+alt 后可以直接输出的字符。

5. Transition 在表现“回弹到原位时”,必须明确地添加 left:0px; top:0px; 以使得动画的计算有终点,否则 transition 是不起效果的。这个坑了半个多小时,遍查不到,突然自行顿悟。

6. 通过 -*-user-select: none; 让按钮在双击时,上面的字符不至于被选中。

7. css 的类还是分得很细的,键长、宽、upper、lower、keyname、altkey、shiftaltkey 等都是单独的类。当然 .space 的 width 就只能单写了这个没办法。

8. jQuery 还在学习中所以这个项目到这里就结束了。

pic

自己写 UI 的几点总结:

自己写 UI 的几点总结:

  1. CSS2.x 很简单,更接近于图像处理软件的设计思路。CSS3 引入不少逻辑化与动画式的表达,想来会逐步考验设计人员的技术功底。CSS 3D……算了不提。
  2. HTML5 则进化/退化到“语义标签”了,相应的样式控制越来越少。不过语义定义逻辑还不是很完善。
  3. 如果一个html标签完全没有和外观相关的属性,八成是个HTML5新增标签。
  4. JQuery很好用,能不用就不用。这句话不是病句。
  5. 懒惰是人类进步的原动力,所以学 less 代替 CSS,用 Emmet 写 html,找各种代码补全和片段插件。
  6. 事前规划很重要,但下笔成章更多出现在胸有成竹的大牛身上。我这种需要的效果还要现查的新手,只能靠着自动刷新一点点慢慢调。
  7. 尽管只能慢慢调,还是得事前规划,事后重构。所以新手写代码要写两遍,一遍实现,一遍重构。重构才是程序员的良心。
  8. 好的前端,必须是又能抠腚,又能抠图。
  9. Axure、UIDesigner、Mockup、Sketch、Photoshop、Illustrator、CorelDraw、Briefs、BluePrint、Flinto、OmniGraffle、XMind……以上这些一个没用到。工具只是工具,用哪个只取决于习惯与熟练。
  10. 自己设计自己实现,纸笔最趁手,不服来决斗。
  11. 好书值得付费购买,好软件也是。
  12. 95% 以上的时间在查找和学习实现办法,实际生产时间不到 5%。所以大牛和新手的薪资差 20 倍只是起步价。
  13. 时间和质量永远是难以平衡的矛盾。
  14. 大屏显示器比笔记本小屏提升 20% 效率,双屏提升 50% 效率,如果桌子够大就放三屏,左屏查资料,中屏写代码,右屏实时预览。四屏就再加一屏资料,五屏就再加一屏资料,六屏就再加一屏资料……想想都醉了。
  15. 快捷键提升效率,固态硬盘提升效率、Everything 提升效率、关掉不用的窗口提升效率,其实每样都只提升几秒钟,关键是不再打断思路。
  16. gitk 是个好东西。
  17. 践行 U Can U Up, No Can Learn Up,多学点东西,转头忘也没关系。反正不 Up 也是躺尸床上玩手机。
  18. 想不出来的时候打两盘星际虐虐疯狂电脑,二十来分钟。打完就可以睡觉了,反正还是想不出来。
  19. “做出来”这个过程还是很爽的,根本停不下来。
  20. 我恨 IE。