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

  • 相关阅读:
    vim复制
    嵌入式Linux学习(二)
    (Java实现) 洛谷 P1042 乒乓球
    (Java实现) 洛谷 P1042 乒乓球
    (Java实现) 洛谷 P1071 潜伏者
    (Java实现) 洛谷 P1071 潜伏者
    (Java实现) 洛谷 P1025 数的划分
    (Java实现)洛谷 P1093 奖学金
    (Java实现)洛谷 P1093 奖学金
    Java实现 洛谷 P1064 金明的预算方案
  • 原文地址:https://www.cnblogs.com/thinkguo/p/7405554.html
Copyright © 2011-2022 走看看