两天学会css基础,二

接上一篇博客,还有css中的两个重要知识点没有说到,就是元素的浮动与定位。

第三部分:元素的浮动与清除

这部分的内容之前的博客已总结过。请查看css中的浮动与三种清除浮动的方法这篇文章。

浮动在网页中也用的和普遍,特别要注意清除浮动的方法。

第四部分:元素的定位

元素的定位在实际开发中会经常用到,特别是涉及到精确定位的时候。

默认情况下元素的position属性值为static

static:

对象遵循常规流。此时4个定位偏移属性不会被应用。

relative:

对象遵循常规流,并且参照自身在常规流中的位置通过toprightbottomleft这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。

absolute:

对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。

对一些div盒子做精确定位的时候会经常用到。

fixed:

与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。

页面中见到的一些固定导航条就用到了这个属性。

当position的值为非static时,其层叠级别通过z-index属性定义。Z-index取值范围为大于等于1的整数。

到此,浮动与定位的知识已经讲解完毕。浮动与定位主要解决了页面上元素的摆放位置的问题。

补充:

Css布局常见问题。

1,如何让元素居中?

方法1:设置元素的margin属性为margin:0 auto;则其相对于父元素居中显示。

方法2:将元素设置为绝对定位,父元素为相对定位,left值为父元素宽度的一半,margin-left值为自身的一半且为负值,元素水平居中。

2,如何让文本居中?

设置text-align:center;使文本水平居中。设置line-height属性值等于元素个高度。使其上下居中。

本篇只对css基础部分做以总结,对于css3加入的新特性,后续会单独总结。