月度存档: 五月 2016

margin在块元素、内联元素中的区别

margin在块元素、内联元素中的区别

HTML(这里说的是html标准,而不是xhtml)里分两种基本元素,即block和inline。顾名思义,block元素就是以”块”表现的元素(block-like elements),inline元素即是以”行”表现的元素(character level elements and text strings)。二者表现的主要差别在于,在页面文档中block元素另起一行开始,并独占一行。inline元素则同其他inline元素共处一行。

block元素(块元素)大致有:P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(随着html5标准的推进,一些元素将被废除,而一些新的元素将被引入)注意的是并非所有的block元素的默认display属性都是block,像table这种display:table的元素也是block元素。

inline元素(内联元素)大致有:#PCDATA(即文本)| TT | I | B | BIG | SMALL|EM | STRONG | DFN | CODE |SAMP | KBD | VAR | CITE | ABBR | ACRONYM|A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO|INPUT | SELECT | TEXTAREA | LABEL | BUTTON 继续阅读 »

有个疑问一直没解决

<html>
 <body>
<style>
 #box1{
 background: blue;
 width: 200px;
 height: 200px;
 opacity:0.99;
 }
 #box2{
 background: yellow;
 width: 200px;
 height: 200px;
 margin-top:-100px;
 }
</style>
<div id="box1"></div>
<div id="box2"></div>

继续阅读 »

webkit技术内幕–小记

一.层次结构
   这里的层次结构主要是用来做渲染时所产生的层次结构。一下几种情况会产生新的层
1.带3d transform的css
2.video
3.canvas
4.flash
5.被z-index所覆盖的含有以上4点之一的元素
每产生一个层,gpu就会分别进行渲染,并且按实际情况触发重绘。减少重绘有助于提高页面响应
二.css解释处于dom树建立之后
三.网页每重新绘制一帧需要三个阶段(计算布局,绘图,合成);
提高绘图布局有2种方法:
1.分层计算 如 canvas的游戏背景与人物分层
2.css 3d transform

四.优化回滚
1.V8编译器为了性能考虑,通常会做笔记乐观和大胆的预测,认为代码笔记稳定,类似不会改变。
var counter = 0;
function ABC(x,y){
     counter++;
     if(counter < 10000000){ 
         return 123;
     }
     var unknow = new Date();
     print(unknown);
}
unknow编译器一直是未知的,写代码尽量不要出发这一过程。

五.高效的js代码需要注意
1.数组中尽量存放相同类型的数据
2.删除一个变量用  a = null;