• CSS最后阶段


    display(元素显示模式)

    语法:

    display : block | none | inline | inline-block

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

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

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

    none        隐藏对象

    例:

    div{display:block}

    float(元素的浮动)

    语法:

    float : none | left | right

    left  向左浮动

    right         向右浮动

    none        不浮动

    说明:

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

    例:

    div{ float:left;}

    清除浮动

    语法:

    clear : none | left | right | both

    说明:

    none :默认值。允许两边都可以有浮动对象

    left :不允许左边有浮动对象

    right: 不允许右边有浮动对象

    both :不允许有浮动对象

    例:

    div { clear:both}

    position(元素的定位)

    语法:

    position : static | absolute | fixed | relative

    static : 无定位,默认值

    absolute:绝对定位

    relative : 相对定位

    fixed:固定定位

    absolute 说明:

    l  脱离文档流。

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

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

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

    例:

    div { position:absolute; left:100px; top:100px;}

    relative说明

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

    l  不脱离文档流

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

    例:

    div { position: relative; left:100px; top:100px;}

    fixed说明:

    固定定位实际上只是绝对定位的特殊形式;固定定位的元素是相对于浏览器窗口而固定,

    而不是相对于其包含元素;即使页面滚动了,它们仍然会处在浏览器窗口中跟原来完全一

    样的地方。

    例:

    div { position: fixed; right:0; bottom:0;}

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

    当元素发生重叠时,可以通过 z-index 属性,设置其层叠的先后顺序。

    较大 number 值的对象会覆盖在较小 number 值的对象之上。

    语法:

    z-index : auto | number

    例子:

    div { z-index:1}

  • 相关阅读:
    真的简单,文本文件逐行处理–用java8 Stream流的方式
    架构师最常使用的5种架构模式及其适用场景分析
    静态集成腾讯TBS X5内核WebView,从微信提取新版30M浏览器内核打包进apk
    redis入门指南(六)—— 集群
    波士顿动力狗 SPOT 权威购买指北
    Boolean源码解剖学
    SpringBoot+Mybatis整合出现org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)的解决
    linux实现shell脚本监控磁盘内存达到阈值时清理catalina.out日志
    【日志】新版日志技术
    【日志】经典日志框架
  • 原文地址:https://www.cnblogs.com/han201388/p/5779508.html
Copyright © 2020-2023  润新知