标签:CSS

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

蓝飞 蓝飞 | 时间:2013-12-02, Mon | 7,305 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 | 16,694 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方法

蓝飞 蓝飞 | 时间:2013-08-26, Mon | 18,879 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 | 4,844 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>