首页 > 代码库 > 京东案例小知识1

京东案例小知识1

2024-10-25 22:38:02   210人阅读

小知识
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; width:410px; margin-left:-1px;}
        .box { width:400px; height:300px; border:1px solid red;
               margin:100px auto; overflow: hidden;}
        .box li { width: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; width:98px; }
    </style>
<div class="box">
    <ul>
        <li>公告</li>
        <li>规则</li>
        <li>安全</li>
        <li>公益</li>
    </ul>
</div>

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

京东案例小知识1


联系
我们