zoukankan      html  css  js  c++  java
  • CSS3的chapter6

    CSS布局
             div标签:

    在css布局方式中,div 是这种布局方式的核心对象,我们的页面排版不再依赖于表格, 仅从div的使用上说,做一个简单的布局只需要两样东西:div 与 css.因此我们称这种 布局方式为 div + css 布局。

             文档流:

                       文档流其实就是指浏览器生成页面的顺序。也是浏览器默认的显示规则。

             Display(元素显示模式):

                       用来设置元素的显示方式。

    display

    block

    块对象指的是元素显示为一个方块,默认显示状态下将占据整行,其它的元素只能另起一行显示。

    inline

    行间对象与block刚好相反,它允许其它元素在同一行显示

    inline-block

    既有行内元素的特点,又有块级元素的特点

    none

    隐藏对象

     

             Float(元素的浮动)

                       用来控制元素是否浮动显示。

                      

    Left

    向左浮动

    right

    向右浮动

    none

    不浮动

    浮动的时候元素的显示属性也变化了 变为 “行内元素”

     

             Clear(清除浮动)

                      

    none

    默认值,允许浮动

    left

    不允许左边浮动

    right

    不允许右边浮动

    both

    不允许浮动

     

     

             position(元素定位)

                      

    static

    默认值,无定位

    absolute

    绝对定位

    relative

    相对定位

    fixed

    固定定位

     

                       Absolute:

    l  脱离文档流。

    l  通过 top,bottom,left,right 定位。

    l  如果父元素 position 为 static 时,将以body坐标原点进行定位。

    如果父元素 position 为 relative  时,将以父元素进行定位。

     

     

     

    Relative:

    l  相对定位(相对自己原来的位置而言)

    l  不脱离文档流

    l  参考自身静态位置通过 top,bottom,left,right 定位。

    Fixed:

    固定定位实际上只是绝对定位的特殊形式;固定定位的元素是相对于浏览器窗口而固定, 而不是相对于其包含元素;即使页面滚动了,它们仍然会处在浏览器窗口中跟原来完全一样的地方。

             z-index(元素的层叠关系)

    当元素发生重叠时,可以通过 z-index 属性,设置其层叠的先后顺序。 较大 number 值的对象会覆盖在较小 number 值的对象之上。

                                默认值为0.

             CSS reset(清除默认样式)

    在HTML标签在浏览器里有默认的样式,在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。"覆盖"浏览器的CSS默认属性。也就是把浏览器提供的默认样式覆盖掉!

  • 相关阅读:
    更新pip10后 ImportError: cannot import name ‘main'
    动态规划刷题集python代码
    ctr中的GBDT+LR的优点
    msgpack生成lib,vs新建lib等
    两个简单的动态规划问题,0-1背包和最大不相邻数累加和,附递归c代码
    贝叶斯先验解释l1正则和l2正则区别
    找出平面上斜率最大的两点
    Maven——快速入门手册(学习记录)
    Java基础——深入理解Java中的final关键字(转载)
    Spring——scope详解(转载)
  • 原文地址:https://www.cnblogs.com/jiangwenjie/p/5779342.html
Copyright © 2011-2022 走看看