divcss布局（二）

本文内容承接divcss（一）

链接：www.jianshu.com/p/13a0c9363a3e

第五章 div+css第四阶段

5.1  定位（相对、绝对、固定定位）

注意：右和下是正方向，左和上是负方向

每个有定位属性的元素都独占一层

（1）相对定位（没有脱离文档流）

position: relative;

1、相对于原来位置进行定位；

2、元素原来在文档流里的位置还会被保留（没有脱离文档流）；

（2）绝对定位（完全脱离文档流）

position: absolute;

1、元素在文档流中的位置不再被保留；

2、绝对定位相对于离他最近的有定位属性的父级元素进行定位；

如果元素的位置都已经布置好了，但是为了给子元素个参考还必须加定位属性，那么一般加相对行为；

（3）固定定位（完全脱离文档流）

position: fixed;

1、完全脱离文档流；

2、元素相对于浏览器可视区域进行定位；

3、元素原来在文档流的位置不再被保留

5.2    层级z-index

1、有定位属性的元素谁在上面比的时层级（z-index）值，谁的值大，谁就在上面。

2、有定位属性的元素默认层级是0，如果层级一样，那么后来者居上。

3、只有有定位属性的元素才有层级属性。

4、只有亲兄弟元素才能比层级。

第六章div+css第五阶段

背景设置

除了img、select等少数元素都可设置背景；

一般顺序：颜色 背景图 平铺方式 固定 位置

6.1、background-color背景颜色

6.2、background-image

设置背景图像

6.3、background-repeat

设置是否及如何重复背景图像

6.4、background-position

6.5、css背景精灵技术/css sprites/css雪碧（用于前端优化）

使用：

background: url(bg.png) no-repeat 0 -268px;

利用设置背景图的原理进而显示图标；

背景效果：

6.6、背景固定、滚动

background-attachment: fixed;

背景固定一般加给body，如果图片太大或太小使用background-size属性；

第七章div+css第六阶段

小知识点

7.1    vertical-align

设置元素的垂直对齐方式

7.2    box-shadow

向框添加一个或多个阴影。

7.3    cursor设置鼠标样式

7.4    透明度 opacity:0.5; filter:alpaha(opacity=50);

为了严谨，可两个都写。

7.5    visibility属性 隐藏元素

用visibility让元素内容隐藏，但占用文档流里的位置还存在。

7.6    取消li标签默认圆点

list-style:none;

border-radius: 50%;是个圆

---

div+css的基础讲解主要由《divcss布局（一）》及《divcss布局（二）》两篇文章，文章内容不涉及css3及部分新元素，更多内容后续H5内容讲解时更新。

想了解JS的相关内容可看：Javascript特效开发（一）www.jianshu.com/p/de8bb36d1fec

如有问题欢迎交流。

如转载请注明出处，谢谢！