zoukankan      html  css  js  c++  java
  • 京东案例小知识1

    小知识
    1、定位的盒子比浮动的盒子层级高
    2、浮动的盒子遮挡不住标准流的文字
    3、块级元素的宽 可以继承
    4、A标签的文字属性不能继承
    5、谷歌不支持12号以下的字体
    6、div:hover a{};鼠标放在div区域后,对于里面的a链接文字变色。
    7、建议所以浮动的盒子都给宽高 (防止页面缩小的时候掉下里,在谷歌尝试)
         最好给盒子之间有一定的间距
    8、让盒子在父盒子水平居中,先定位,left50%;然后margin-left:子盒子宽度的一半
    9、模拟鼠标小手(curp+tab)
    10、“consolas”字体>变的yuan点
    12、行内元素尽量不过给font标签
    13、tabe表格更多用的是放文字的
    15、当行内元素定位的时候,它会吧前面的padding和行内元素里面的宽给让出来,自己跑他们到的后面。
     16、浮动定位标准流的盒子层级越往下越高
    17、层级一样,代码在后面的盒子会压住前面的盒子
     
    隐藏盒子问题
     overflow : hidden  隐藏盒子超出的部分
    display:none;  隐藏盒子,而且不占位置 (用的最多)
    visibility:hidden; 隐藏盒子,而且占位置
    opacity:0;    隐藏盒子,而且占位置 (透明度隐藏)
    position:top/left:-999 隐藏盒子,而且占位置 (定位移动隐藏盒子)
     

    a链接 href 问题
     1、 a 的href属性是“” 空: 效果是刷新页面
     2、a的href是“#” : 效果是刷新页面
     3、关闭a链接跳转于刷新: javascript:; 或则  javascript:void(0)
     
    权重问题
    left比right, 权重高。有left又有right的时候,执行left的值。
    top比bottom,权重高,有bottom的时候,执行top的值

    半透明
    opacity:0.4; 
    优点1、方便
    缺点1、里面的内容也会半透明
     
    c3 的技术来解决半透明
        background:rgba(0,0,0,0.3) 可以省略透明的0
     
    边框样式
    border:1px dashed red; 虚线比边框
    border:1px dottcd red; 点线边框
    border:1px solid  red; 实线边框
      当div包含a链接或是行内元素时,div设置行高31,还想给里面的子行内元素设置行高是,不要用font因为它会把父盒子给撑开。高是32或34。只能单独给设置,没有这样的情况。
    如果里面包含的会计元素是没有这样的情况。
     
    层级问题
    总结:标准流盒子,低于浮动的盒子,浮动的盒子又低于定位的盒子。
    定位高于浮动,浮动高于标准流。(高低和占不占位置无关)
    (除去statc之外)
    用法:1、必须有定位。(除去static之外)。
                2、给定位z-index的值为层级的值(不给默认位0;)
                     (层级位0的盒子,也比标准流和浮动高)
                     (层级位负数的盒子,比标准流和浮动低)
                     (层级不能是小数)
                     (层级一样,后面的盒子比前面的层级高)
                      (浮动或者标准流的盒子,后面的盒子比前面的层级高)

     定位和浮动的盒子,后来者居上,后面的盒子会压住前面的盒子

     浮动盒子掉下里(tep栏案例)

        <style type="text/css"  >
            * { margin:0; padding:0; }
            ul { list-style: none; 410px; margin-left:-1px;}
            .box { 400px; height:300px; border:1px solid red;
                   margin:100px auto; overflow: hidden;}
            .box li { 100px; height:40px; float:left;  font:400 16px/40px "sim sun";
                      text-align:center;  cursor: pointer; padding:0 1px; }
            .box li:hover { border-left:1px solid black;
                            border-right:1px solid black; 98px; }
        </style>
    <div class="box">
        <ul>
            <li>公告</li>
            <li>规则</li>
            <li>安全</li>
            <li>公益</li>
        </ul>
    </div>

    父盒子宽度不够,又要子盒子浮动不掉下来,就给子盒子之上,父盒子之下一个盒子,只给宽度

  • 相关阅读:
    成都58同城快速租房的爬虫,nodeJS爬虫
    `qs.parse` 的简单实现
    使用windbg定位内存问题【入门级】
    C#正则实现匹配一块代码段
    Zeebe服务学习3-Raft算法与集群部署
    Zeebe服务学习2-状态机
    Zeebe服务学习1-简单部署与实现demo
    C#后端接收前端的各种类型数据
    大话设计模式--单例模式具体使用
    大话设计模式--DI(依赖注入)
  • 原文地址:https://www.cnblogs.com/wdz1/p/7171806.html
Copyright © 2011-2022 走看看