zoukankan      html  css  js  c++  java
  • 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 然后给图标宽高才起作用

  • 相关阅读:
    Tomcat+Nginx+Linux+Mysql部署豆瓣TOP250的项目到腾讯云服务器
    使用JSP+Servlet+Jdbc+Echatrs实现对豆瓣电影Top250的展示
    环境搭建-CentOS集群搭建
    环境搭建-Hadoop集群搭建
    ELK搭建实时日志分析平台
    Flume和Kafka完成实时数据的采集
    Python日志产生器
    腐竹木耳炒肉
    [转]Apple耳机兼容非Mac设置
    文件及文件夹操作
  • 原文地址:https://www.cnblogs.com/lovels/p/9710627.html
Copyright © 2011-2022 走看看