京东案例小知识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; 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>

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

时间: 2024-10-07 22:27:31

京东案例小知识1的相关文章

大数据入门小知识

之前写过大数据入门小知识和大数据入门小知识进阶篇,今天为大家带来大数据入门小知识高阶篇. 推荐一个大数据学习群 119599574晚上20:10都有一节[免费的]大数据直播课程,专注大数据分析方法,大数据编程,大数据仓库,大数据案例,人工智能,数据挖掘都是纯干货分享,你愿意来学习吗? 大数据入门小知识高阶篇,主要讲述的是因为大数据而衍生出来的一系列技术与科技创新. 说到因为大数据而衍生出来的一系列技术与科技创新,相信我们首先都会想到人工智能(Artificial Intelligence),英文

js中级小知识1

首先我们复习之前的小知识,本期博客与之前有关 js数据类型 基本数据类型:string    undefined         null         boolean          number 引用数据类型:     Object     array       function 二者的区别 基本数据类型就是简单的操作值,引用数据类型,把引用地址赋值给变量 堆内存 就是存放代码块的,存放形式有两种,一种是对象一键值对的形式存放 另一种就是函数 以字符串的形式存放 案例 引用数据类型的赋

iOS 小知识-tips

--->1<--- arc的项目中使用非arc代码,则添加-fno-objc-arc: 非arc项目中使用arc代码,则添加-fobjc-arc. --->2<--- 实用的类 NSKeyedArchiver [UIScreen mainScreen] [UIDevice currentDevice] [UIFont familyNames] [UIApplication sharedApplication] [NSUserDefaults standardUserDefaults

Linux 小知识翻译 - 「syslog」

这次聊聊「syslog」. 上次聊了「日志」(lgo).这次说起syslog,一看到log(日志)就明白是怎么回事了.syslog是获取系统日志的工具. 很多UINIX系的OS都采用了这个程序,它承担了「获取系统全部的日志」这个维持系统正常运行的重要任务. syslog的本体是「syslogd」这个daemon(一般翻译成守护进程),常驻内存中获取日志. syslog的特点是可以通过配置文件「/etc/syslog.conf」,对「哪种应用程序?哪种重要度的信息?记录在哪个文件中?」等进行细致的

Linux 小知识翻译 - 「日志」(log)

这次聊聊「日志」. 「日志」主要指系统或者软件留下的「记录」.出自表示「航海日志」的「logbook」. 经常听说「出现问题的时候,或者程序没有安装自己预期的来运行的时候,请看看日志!」. 确实,记录了系统和软件详细运行情况的「日志」是信息的宝库,通过日志来解决问题的事例也非常多. 但事实上,「无论如何也不会看日志」的用户也有很多.理由很简单,日志的信息量非常大,全部用眼睛来看的话是非常吃力的. 而且,英语写的日志也会让英文不好的人敬而远之. 虽说「要养成用眼睛来看日志的习惯」,但实行起来却非常

Linux 小知识翻译 - 「编译器和解释器」

这次聊聊「编译器和解释器」. 编程语言中,有以C为代表的编译型语言和以Perl为代表的解释型语言.不管是哪种,程序都是以人类能够理解的形式记录的,这种形式计算机是无法理解的. 因此,才会有编译器和解释器. 对于编译型语言,是使用编译器将人类可读的代码转换为机器能够理解的「机器语言」文件,然后通过执行这个「机器语言」文件来实现程序的执行. 另一方面,对于解释型语言,是使用解释器将人类可读的代码逐行解释,一边解释一边执行这个程序.(这里的解释是将代码解释成机器语言,让计算机能够理解) 甚至有的语言既

Linux 小知识翻译 - 「补丁」(patch)

这次,聊聊补丁. 当有bug或者安全漏洞的时候,就会发布补丁.打上补丁之后,就能解决相应的bug或者安全漏洞. 那么,「补丁」到底是什么呢? 「补丁」只有少量的代码,一般都是对程序的一部分进行更新或者追加,包括bug修正,安全漏洞修正,功能追加或者变更等等.当然,只有「补丁」是无法运行的. 即,只有将「补丁」附加到原来的程序中,更新原来的程序后,才能运行. 「补丁(patch)」本来是指「打补丁用的小布头」.「patch」正是为了补足现有的程序,堵住程序漏洞的「布头」. 打「补丁」的时候需要用到

Linux 小知识翻译 - 「协议(protocol)」

对于理解服务器和网络来说,「协议」是不可缺少的概念. 「协议(protocol)」有「规则,规定」的意思. 实际上「协议」的函数很广,在通信领域,「协议」规定了「在通信时,什么样的情况下,以什么样的顺序,什么样的方式交互什么样的数据」. 抽象的去理解「协议」可能会比较困难,下面来举个例子. 通过Web以HTML方式交互时使用的协议是「HTTP」(Hyper Text Transfer Protocol).这个协议最重要的就是规定了服务器和客户端之间以HTML方式交互的规则. 比如,客户端连接上服

Linux 小知识翻译 - 「Linux」怎么读?

主要讨论日语中的读法,所以没有完全按照原文来翻译. 「linux」的读法有很多(这里指在日语中),代表性的读法有以下几种: A). 李纳苦思 B). 李奴苦思 C). 纳依纳苦思 A和B相同的是将 linux开头的「li」发音成「李」.这也是linux之父Linus Torvalds的名字的日语假名(「リーナス?トーバルズ」)的由来. linux中「nu」的发音是怎么样的呢?Linux Online的网页上有说明,而且视频中还有 Linus Torvalds 的发音. http://www.li