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

  • 相关阅读:
    八大算法手写
    Hql总结
    设计模式
    数据库连接失败(1)
    什么是ORM
    C++标准库之右值引用与交付语义
    C++标准库第二版笔记 2
    C++标准库第二版笔记 1
    Effective C++ 笔记:条款 32 确定你的public继承塑造出正确的is-a关系
    Effective C++ 笔记:条款 31 将编译关系降至最低
  • 原文地址:https://www.cnblogs.com/thinkguo/p/7405554.html
Copyright © 2011-2022 走看看