杰拉斯的博客

标签:CSS

[CSS小技巧]兼容各浏览器的未知高度垂直居中

杰拉斯 杰拉斯 | 时间:2013-12-02, Mon | 21,995 views
前端开发 
  1. /*
  2. *@ Name: 未知高度垂直居中组件
  3. *@ Author: 一丝
  4. *@ Update: 2013-10-13 17:08:36
  5. *@ Usage: 支持图片,单行或多行文字,以及图文混排
  6. */
  7.  
  8. /* 去除 inline-block 的空隙 */
  9. .center-box {
  10. font-size: 0;
  11. *word-spacing: -1px; /* IE6、7 */
  12. height: 100%; /* 继承父级高度 */
  13. }
  14.  
  15. /* 修复 Safari 5- inline-block 的空隙 */
  16. @media (-webkit-min-device-pixel-ratio:0) {
  17. .center-box {
  18. letter-spacing: -5px;
  19. }
  20. }
  21.  
  22. /* 使用空标签生成一个高度100%的参照元素 */
  23. .center-box .center-hack {
  24. display: inline-block;
  25. *display: inline;
  26. *zoom: 1;
  27. font-size: 0;
  28. width: 0;
  29. height: 100%;
  30. vertical-align: middle;
  31. }
  32.  
  33. .center-box .center-body {
  34. letter-spacing: normal;
  35. word-spacing: normal;
  36. display: inline-block;
  37. *display: inline;
  38. *zoom: 1;
  39. font-size: 12px;
  40. vertical-align: middle; /* 保证文字垂直居中 */
  41. padding: 0 !important; /* 防止设置边距导致居中失效 */
  42. margin: 0 !important;
  43. width: 100%; /* 保证连续字符也能居中 */
  44. white-space: normal; /* 保证连续字符换行 */
  45. word-wrap: break-word;
  46. }
  47.  
  48. .center-box .center-img {
  49. display: inline-block;
  50. *display: inline;
  51. *zoom: 1;
  52. width: 100%;
  53. text-align: center; /* 图片默认水平居中 */
  54. vertical-align: middle;
  55. padding: 0 !important; /* 防止设置边距导致居中失效 */
  56. margin: 0 !important;
  57. }
  58.  
  59. .center-box img {
  60. vertical-align: middle; /* 去除现代浏览器 img 底部空隙 */
  61. }

原理是利用CSS中的vertical-align属性.center-body的对齐方式设置为行内垂直居中,再利用一个宽度为0,高度为100%的元素.center-hack同样在行内垂直居中,而.center-body相对于.center-hack垂直居中对齐,那么也就相对于父元素垂直居中对齐了。

来自一丝大大的GitHub

[知乎]关于选择器优先级的计算

杰拉斯 杰拉斯 | 时间:2013-11-25, Mon | 24,629 views
前端开发 

探寻真理者不可心存傲慢”,再一次给自己敲响警钟。

曾经以为

CSS的优先级

不过如此,虽然自己列不出(主要是不喜欢死记理论)所有CSS选择器的优先级顺序,但我在写代码的时候一定能够写对,所以一直看轻了它,直到今天遇到了这样一个问题:

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>CSS Selectors Level</title>
  6. <style type="text/css">
  7. .inner:not(#outer) p{color: blue;}
  8. .outer .inner p{color: orange;}
  9. </style>
  10. </head>
  11. <body>
  12. <div class="outer">
  13. <p>outer</p>
  14. <div class="inner">
  15. <p>inner</p>
  16. </div>
  17. </div>
  18. </body>
  19. </html>

猜猜是什么颜色?

(阅读全文…)

[常用布局]左栏固定宽度,右栏自适应的两种纯CSS方法

杰拉斯 杰拉斯 | 时间:2013-08-26, Mon | 34,449 views
前端开发 

其一,左栏固定宽度,右栏自适应之绝对定位法:

  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>左栏固定宽度,右栏自适应之绝对定位法</title>
  6. <style type="text/css">
  7. body{
  8. margin: 0;
  9. }
  10. #nav{
  11. top: 0;
  12. left: 0;
  13. width: 230px;
  14. height: 600px;
  15. background: #ccc;
  16. position: absolute;
  17. }
  18. #main{
  19. height: 600px;
  20. margin-left: 230px;
  21. background: #0099ff;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div id="container">
  27. <div id="nav">
  28. 左栏
  29. </div>
  30. <div id="main">
  31. 右栏
  32. </div>
  33. </div>
  34. </body>
  35. </html>

看起来很美好,但是。。

由于左栏使用绝对定位,脱离了文档流,因此有一个缺陷,即当左栏高度大于右栏时,无法将container撑开,这个缺陷单单只看两栏布局并没有太大影响,但如果两栏布局下面有一个底栏,就会出现底栏与左栏重叠的情况

(阅读全文…)

兼容IE6的纯CSS背景半透明(文字不透明)

杰拉斯 杰拉斯 | 时间:2013-07-11, Thu | 24,807 views
前端开发 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>
  6. IE背景半透明
  7. </title>
  8. <style type="text/css">
  9. .alpha{
  10. width: 100px;
  11. height: 100px;
  12. color: #fff;
  13. background: rgba(0, 0, 0, .3);
  14. filter: progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #50000000, endColorstr = #50000000)\9;
  15. }
  16. :root .alpha{
  17. filter: none; /*for IE9*/
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div class="alpha">
  23. 文字文字
  24. </div>
  25. </body>
  26. </html>