两天学会css基础（二）

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

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

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

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

第四部分：元素的定位

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

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

static：

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

relative：

对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这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加入的新特性，后续会单独总结。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有