• Web-9月26日随笔


    一:定位

    意义:脱离原来的标准文档流,与此同时脱标的元素(浮动float,绝对定位,固定定位)

    1.绝对定位:position:absolute

       如果一级一级往上找页面中没有相对定位,就参考body进行定位。

       如果有多个相对定位元素,就参考最近的,就近原则。

    z-index:数字。覆盖效果。 数字越大,越在上面,可以给负值(负值的话,会在下面)必须有定位元素才起作用。

    2.相对定位:

    相对自身原来的位置进行移动。(设置margin后原来所占有的空白位置和自身一起移动,形离影离,一般给子元素当参照物,或者元素的微调。一般情况下不建议添加值。)

    3.固定定位:

    position:fixed(固定到某一个位置,不随页面滚动,常用于顶部,侧栏)

    4.元素垂直水平居中:

    position:absolute;

    200px;

    height:200px;

    left:50%;

    top:50%

    margin-left:-100px;

    margin-top:-100px;

    ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    背景属性:

    background-image:url(图片地址);跟img调用地址一样

    background-repeat:repeat-x(水平重复)       repeat-y(垂直重复)    no-repeat(不平铺)

    水平往左:负值    水平往右:正值       垂直往上:负值     垂直往下:正值。

    背景属性简写顺序·:颜色 地址 重复方式  位置;

    background:color  url()repeat  position;

    ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    雪碧图(精灵图):

    1.量取icon图标距离原点(左上角0,0)的位置
    2.量取icon图标的宽高限制一下
    3.图标一般单独给一个标签好控制 比如span 把它转成行内块元素display:inline-block 然后给图标宽高才起作用

  • 相关阅读:
    如何使用sendEmail发送邮件
    Linux curl命令详解
    linux比较两个文件是否一样(linux命令md5sum使用方法)
    strace命令用法详解
    strace用法说明
    ORA-12154 TNS无法解析指定的连接标识符
    VNC远程连接阿里云Linux服务器 图形界面
    pycharm配置Git 代码管理
    FireFox浏览器-xpath快速定位插件:Xpath Checker
    odoo 前端模板引擎 Qweb
  • 原文地址:https://www.cnblogs.com/lovels/p/9710627.html
Copyright © 2020-2023  润新知