IT培训网

web前端技术开发的核心是什么呢？

最主要由3部分组成：结构、表现和行为。目前模式是HTML、CSS和JavaScript。当然今天这篇主要是向大家讲解的就是关于web前端之css方面的知识点。

web前端开发核心技术之css样式的问题

css复杂选择器，权重计算问题，几个常用的css使用技巧。

并列选择器：多个限制条件，选中一个元素，并且不加空格写在一起。

如：div.demo{ ... }

分组选择器

如：em, strong, p{ ... }

1、让已知高度的容器在页面中水平垂直居中

方法：

#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}

2、让未知尺寸的图片在已知宽高的容器内水平垂直居中

方法：

#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}#test p{*position:absolute;*top:50%;*left:50%;margin:0;}#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}#test是img的祖父节点，p是img的父节点。Know More：未知尺寸的图片如何水平垂直居中

3、让某个元素充满整个页面

方法：

html,body{height:100%;margin:0;}#test{height:100%;}

4、去掉超链接的虚线框

方法：

a{outline:none;}

5、.容器透明，内容不透明

方法1：

.outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}.inner{width:200px;height:200px;margin-top:-200px;}<div class="outer"><!--我是透明的容器--></div> <div class="inner">我是不透明的内容</div>

方法2：

.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}.outer .inner{position:relative\9;}<div class="outer"> <div class="inner">我是不透明的内容</div> </div>

6、让整个页面水平居中

方法：

body{text-align:center;}#test2{width:960px;margin:0 auto;text-align:left;}

定义body的text-align值为center将使得IE5.5也能实现居中

css  权重