zoukankan      html  css  js  c++  java
  • 两天学会css基础(二)

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

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

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

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

    第四部分:元素的定位

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

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

    static:

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

    relative:

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

    absolute:

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

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

    fixed:

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

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

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

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

    补充:

    Css布局常见问题。

    1,如何让元素居中?

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

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

    2,如何让文本居中?

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

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

  • 相关阅读:
    为什么new的普通数组用delete 和 delete[]都能正确释放
    虚幻4属性系统(反射)
    CFileDialog类的默认路径
    把单一元素的数组放在一个struct的尾端
    在UE4中使用SVN作为source control工具
    单精度浮点数和有效位数为什么是7位
    Valid Number--LeetCode
    归并排序
    堆排序
    直接选择排序
  • 原文地址:https://www.cnblogs.com/thinkguo/p/7405554.html
Copyright © 2011-2022 走看看