杰拉斯的博客
[CSS小技巧]兼容各浏览器的未知高度垂直居中
杰拉斯 | 时间:2013-12-02, Mon | 21,995 views前端开发
- /*
- *@ Name: 未知高度垂直居中组件
- *@ Author: 一丝
- *@ Update: 2013-10-13 17:08:36
- *@ Usage: 支持图片,单行或多行文字,以及图文混排
- */
- /* 去除 inline-block 的空隙 */
- .center-box {
- font-size: 0;
- *word-spacing: -1px; /* IE6、7 */
- height: 100%; /* 继承父级高度 */
- }
- /* 修复 Safari 5- inline-block 的空隙 */
- @media (-webkit-min-device-pixel-ratio:0) {
- .center-box {
- letter-spacing: -5px;
- }
- }
- /* 使用空标签生成一个高度100%的参照元素 */
- .center-box .center-hack {
- display: inline-block;
- *display: inline;
- *zoom: 1;
- font-size: 0;
- width: 0;
- height: 100%;
- vertical-align: middle;
- }
- .center-box .center-body {
- letter-spacing: normal;
- word-spacing: normal;
- display: inline-block;
- *display: inline;
- *zoom: 1;
- font-size: 12px;
- vertical-align: middle; /* 保证文字垂直居中 */
- padding: 0 !important; /* 防止设置边距导致居中失效 */
- margin: 0 !important;
- width: 100%; /* 保证连续字符也能居中 */
- white-space: normal; /* 保证连续字符换行 */
- word-wrap: break-word;
- }
- .center-box .center-img {
- display: inline-block;
- *display: inline;
- *zoom: 1;
- width: 100%;
- text-align: center; /* 图片默认水平居中 */
- vertical-align: middle;
- padding: 0 !important; /* 防止设置边距导致居中失效 */
- margin: 0 !important;
- }
- .center-box img {
- vertical-align: middle; /* 去除现代浏览器 img 底部空隙 */
- }
原理是利用CSS中的vertical-align属性将.center-body的对齐方式设置为行内垂直居中,再利用一个宽度为0,高度为100%的元素.center-hack同样在行内垂直居中,而.center-body相对于.center-hack垂直居中对齐,那么也就相对于父元素垂直居中对齐了。
来自一丝大大的GitHub。
[知乎]关于选择器优先级的计算
杰拉斯 | 时间:2013-11-25, Mon | 24,629 views前端开发
“探寻真理者不可心存傲慢”,再一次给自己敲响警钟。
曾经以为
CSS的优先级不过如此,虽然自己列不出(主要是不喜欢死记理论)所有CSS选择器的优先级顺序,但我在写代码的时候一定能够写对,所以一直看轻了它,直到今天遇到了这样一个问题:
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>CSS Selectors Level</title>
- <style type="text/css">
- .inner:not(#outer) p{color: blue;}
- .outer .inner p{color: orange;}
- </style>
- </head>
- <body>
- <div class="outer">
- <p>outer</p>
- <div class="inner">
- <p>inner</p>
- </div>
- </div>
- </body>
- </html>
猜猜是什么颜色?
[纯耍帅] 纯CSS、兼容IE7+、宽度自适应、无限级导航菜单
杰拉斯 | 时间:2013-10-15, Tue | 19,373 views前端开发
先来个Demo:
http://www.clanfei.com/demos/nav/nav.html
好吧,我承认,我有点标题党了,IE7的兼容并不是特别好,当鼠标离开某个导航再进入时,会留下上一次子菜单的残影(写的好像玄幻小说似的=。=)
不过纯属研究,O(∩_∩)O哈哈~
[常用布局]左栏固定宽度,右栏自适应的两种纯CSS方法
杰拉斯 | 时间:2013-08-26, Mon | 34,449 views前端开发
其一,左栏固定宽度,右栏自适应之绝对定位法:
- <!doctype html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <title>左栏固定宽度,右栏自适应之绝对定位法</title>
- <style type="text/css">
- body{
- margin: 0;
- }
- #nav{
- top: 0;
- left: 0;
- width: 230px;
- height: 600px;
- background: #ccc;
- position: absolute;
- }
- #main{
- height: 600px;
- margin-left: 230px;
- background: #0099ff;
- }
- </style>
- </head>
- <body>
- <div id="container">
- <div id="nav">
- 左栏
- </div>
- <div id="main">
- 右栏
- </div>
- </div>
- </body>
- </html>
看起来很美好,但是。。
由于左栏使用绝对定位,脱离了文档流,因此有一个缺陷,即当左栏高度大于右栏时,无法将container撑开,这个缺陷单单只看两栏布局并没有太大影响,但如果两栏布局下面有一个底栏,就会出现底栏与左栏重叠的情况
兼容IE6的纯CSS背景半透明(文字不透明)
杰拉斯 | 时间:2013-07-11, Thu | 24,807 views前端开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
IE背景半透明
</title>
<style type="text/css">
.alpha{
width: 100px;
height: 100px;
color: #fff;
background: rgba(0, 0, 0, .3);
filter: progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #50000000, endColorstr = #50000000)\9;
}
:root .alpha{
filter: none; /*for IE9*/
}
</style>
</head>
<body>
<div class="alpha">
文字文字
</div>
</body>
</html>