css培训一

一.css reset的整理。

最霸道的一句就是：*{margin:0;padding:0;}，没办法，html标签基本都带有默认的padding或者margin，所以为了统一，就只有此策略了。

更详细的css reset就是针对具体的标签订制。可以查看淘宝的css reset。

二.css 盒模型。

css盒模型是布局的核心。css3中针对css2.1中盒模型存在的缺点提出了两种盒模型：box-sizing:border-box 和box-sizing:content-box。

border-box算是对css2.1的一个补充吧。

我们先来看看css2.1中的盒模型概念。http://www.qianduan.net/css-box-model.html

border-box属性比较好玩，宽度和高度卡死了，盒子始终就是那么宽，那么高。css2.1中虽然没有此属性，但是有的html标签的盒模型计算就是这个原理。

请思考这个问题：

input[type="submit"]{ width:100px; line-height:30px; height:30px; padding:10px; border:1px solid #333; }

请问，input的实际宽度和实际高度是多少？（答案是100px,30px）

css2.1虽然没有支持border-box属性，但是，我们可以使用css来进行模拟该属性。一切都是基于你对盒模型的理解。

示例如下：

html：

<div class="box">
    <div class="inner">
        <h1>内容</h1>
    </div>
</div>

css：

.box { width:100px; height:100px; }
.box .inner { padding:10px; border:2px solid orange; }

三.css布局。

在讲布局前，我们可以了解下什么是普通文档流：http://bbs.blueidea.com/forum.php?mod=viewthread&tid=2994612

布局通用的就是float,position,再加上display:inline-block。当然此处不讲css3中的布局。

先说浮动float。float有三个属性，left,right,none.分别代表向左浮动，向右浮动和不浮动。

通常后者float:none;是用来进行样式重置的。万不得已啊！

下面仔细说说浮动的特性：

以上两点足以概括浮动了。

由于浮动的以上两点特性，在日常的工作中，你会碰到如下的问题：

再说说定位。

position有四个属性，static，fixed，relative，absolute。继承的属性不说。

着重讲讲fixed,relative,absolute.

在这里面，position被设置为fixed和absolute属性时，该元素是脱离了正常文档流。fixed,relative,absolute 三者定位需要参照物，并且会产生层叠值，层叠值默认为0，但是高于正常文档流。

position:fixed。其实fixed从含义上来看，是固定的。但是，它实质是一个绝对定位的特例。定位的参照物是浏览器的窗口。如今，这种应用很常见，当页面超过一屏时，滚动页面，顶部的导航条始终是固定的，内容则滚动变化，可以给用户一个良好的体验。
position:absolute。绝对定位，需要一个父系参照物作为定位的参考依据，就近参考。绝对定位有自适应宽高的特点。通常需要把父参考系定位为position:relative 或者position:absolute，这样才算它的参照物。
postion:relative。相对定位，相对定位的参照物是元素本身。该元素没有脱离正常文档流，并且占用了自己的位置。通常可以用该属性进行页面元素位置的微调。

定位其实用的比较多，相对定位和绝对定位配合使用，就可以创造出灵活多变的布局，这点可以看看css zen garden。

注意事项：

1.层叠值z-index在一开始设置，请从1开始。

2.子元素层叠值无法跨越父级层叠值。

再说说display:inline-block吧。

浮动这东西，用多了蛋疼。会产生很多问题，所以，display:inline-block有时会派上用场。在浏览器兼容性上，该属性的使用还是受到了比较大的限制。

posted @ 2013-01-07 11:05 xmlovecss 阅读(160) 评论(0) 编辑收藏举报

刷新页面返回顶部

xmlovecss