• 两天学会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加入的新特性,后续会单独总结。

  • 相关阅读:
    Android 通过外键连接两个数据库
    WustOJ 1575 Gingers and Mints(快速幂 + dfs )
    Android数据库信息显示在listview上
    Android 开机启动通知
    JAVA车票管理系统(简单GUI)
    POJ1159 Palindrome(数位DP)
    python之Memcached 安装及操作
    Django中的缓存
    VUE 框架
    flask----flask-session
  • 原文地址:https://www.cnblogs.com/thinkguo/p/7405554.html
Copyright © 2020-2023  润新知