创翼设计-飞扬梦想

瞧着奔三了，看着梦想一个一个都成了幻影

CSS文档流与块级元素和内联元素

2010年9月3日由 admin 1条评论 »

CSS文档流与块级元素（block）、内联元素（inline），之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O’Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常.

文档流

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.

每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动.

内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素.

有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理><).

浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

浮动概念让人迷惑根源在于浏览器对理论的解读造成的。只能说很多人以IE做标准，其实它不是。

基于文档流, 我们可以很容易理解以下的定位模式:

相对定位,
即相对于元素在文档流中位置进行偏移. 但保留原占位.
绝对定位,
即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移
固定定位,
即完全脱离文档流, 相对于视区进行偏移.
接下来还有几个问题我搞不明白的

作为三大基本元素之一的内联元素, 它跟块级元素的主要区别在哪?
Clear属性取right值时怎么理解? 貌似实验情况总跟理论不符.

内联元素是什么意思呢？什么是块级别元素。

《CSS权威指南》中文字显示：任何不是块级元素的可见元素都是内联元素。其表现的特性是“ 行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

p、h1、或div等元素常常称为块级元素，这些元素显示为一块内容；Strong,span等元素称为行内元素，它们的内容显示在行中，即“行内框”。（可以使用display=block将行内元素转换成块元素，display=none表示生成的元素根本没有框，也既不显示元素，不占用文档中的空间）

A：行内就是在一行内的元素，只能放在行内；块级元素，就是一个四方块，可以放在页面上任何地方。

B：说白了，行内元素就好像一个单词；块级元素就好像一个段落，如果不另加定义的话，它将独立一行出现。

C：一般的块级元素诸如段落<p>、标题<h1><h2>…、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ……..

D：块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。

E：<span>在CSS定义中属于一个行内元素，而<div>是块级元素。

对于学过CSS的人来说一听就能明白。可对于新手来说不易理解，我主要对新手说通熟点吧!

用容器这一词会更容易形象理解它们的存在与用途，行内元素相当一个小容器，而<div>相当于一个大容器，大容器当然可以放一个小容器了。<span>就是小容器，这样一说你也许会在脑海中有一个初步的印象了吧，如果我们想在大容器中装一些清水。但我也想在里装一些墨水怎么办？很简单，我们把小容器拿出来装上墨水然后放入大容器里的清水中不就成了吗。

我在举个简单的一个实际例子吧：比如

块元素(block element)一般是其他元素的容器元素

块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签’P”。“form”这个块元素比较特殊，它只能用来容纳其他块元素。

如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说，css layout code应该有更好的美学体验吧。

你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。.

内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。

块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。

可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。

关于inline element的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译，爱怎么叫怎么叫吧。另外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。

块元素(block element)

　　* address – 地址
　　* blockquote – 块引用
　　* center – 举中对齐块
　　* dir – 目录列表
　　* div – 常用块级容易，也是css layout的主要标签
　　* dl – 定义列表
　　* fieldset – form控制组
　　* form – 交互表单
　　* h1 – 大标题
　　* h2 – 副标题
　　* h3 – 3级标题
　　* h4 – 4级标题
　　* h5 – 5级标题
　　* h6 – 6级标题
　　* hr – 水平分隔线
　　* isindex – input prompt
　　* menu – 菜单列表
　　* noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
　　* noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）
　　* ol – 排序表单
　　* p – 段落
　　* pre – 格式化文本
　　* table – 表格
　　* ul – 非排序列表

内联元素(inline element)

　　* a – 锚点
　　* abbr – 缩写
　　* acronym – 首字
　　* b – 粗体(不推荐)
　　* bdo – bidi override
　　* big – 大字体
　　* br – 换行
　　* cite – 引用
　　* code – 计算机代码(在引用源码的时候需要)
　　* dfn – 定义字段
　　* em – 强调
　　* font – 字体设定(不推荐)
　　* i – 斜体
　　* img – 图片
　　* input – 输入框
　　* kbd – 定义键盘文本
　　* label – 表格标签
　　* q – 短引用
　　* s – 中划线(不推荐)
　　* samp – 定义范例计算机代码
　　* select – 项目选择
　　* small – 小字体文本
　　* span – 常用内联容器，定义文本内区块
　　* strike – 中划线
　　* strong – 粗体强调
　　* sub – 下标
　　* sup – 上标
　　* textarea – 多行文本输入框
　　* tt – 电传文本
　　* u – 下划线
　　* var – 定义变量

可变元素

　　可变元素为根据上下文语境决定该元素为块元素或者内联元素。
　　* applet – java applet
　　* button – 按钮
　　* del – 删除文本
　　* iframe – inline frame
　　* ins – 插入的文本
　　* map – 图片区块(map)
　　* object – object对象
　　* script – 客户端脚本

1条评论 »

发表在CSS+DIV

降低网站页面相似度的方法,增加SEO优化

2010年9月3日由 admin 没有评论 »

网站相似度不应大于60%，如果相似网站都是同一IP，那就更要避免，以防百度不收的情况发生！

做网站内容为先的思惟，这是做网站的人都知道的，内容为先，作甚先？说白了就是文章的原创性，但是原创对于泛博站长来说是不轻易的，精力时间都是要考虑的，很少有人可以连续创造大量的原创文章，良多时间都是转载别人的文章。

　　转载文章，暂且不谈关于侵犯版权的题目，就谈谈如何避免重复被搜索引擎判定为相似网页而造成的不良影响，　　通常大家把这种现象称之为：页面相似度–内容重复，如何逃避搜索引擎的法眼来降低相似度得到更多的正视呢?总结了几个小方法，既不高深，也不复杂，还挺实用。发出来与大家共勉

　　一：内容拆分法
　　把原有连续的文章，均匀的截取成为2段3段或是更多。
　　好处：降低相似度、进步访问者浏览的速度、增加页面访问量
　　缺点：文章无法连续浏览，原有的一次性浏览变得繁琐，同时对Title标题的优化也有一定的不利，由于会有重复。不外数目较小的情况下不会有什么大碍。

　　二：跟随法
　　把每一个段落的结尾都增加一段话，可以是有情提示，小调查，或是其他文章的推荐。
　　好处：进一步降低相似度，给可以更多讯息，提供更多使用的功能。例如“回到最上面”
　缺点：使用不当将降低用户体验，假如使用JAVASCEIPT等作有可能影响页面加载速度，干扰客户浏览主线。

　　三：标签法
　　在特定的枢纽字后增加友情注释。例如：我们所倡导的SEO(SEO相关信息)思惟是……
　　好处：增加用户体验，让客户可以了解更多并不认识的专业名词，从而更好理解文章含义。还可以天然的重复枢纽字，增加枢纽字密度。
　　缺点：假如使用过多，会造成页面信息繁乱，降低用户体验。增加页面体积，降低加载速度。干扰原有枢纽词布局和密度。

四：隐身法

　　将一些没有实际用处的词使用图片代替，经过优化的GIF图片只有十几个字节，将文章中出现的部分特定字或词进行隐身，也可以很好的达到降低页面相似度的效果。

　　优点：不干扰关键词布局、不干扰用户体验、不影响浏览和加载速度、有效防止被采集。

　　缺点：仅仅增加少许加载时间，但几乎可以省略不计。

　　如果以上四种方法相互配合使用可以极大地降低页面相似度，提高页面在搜索引擎中的诚信度。
以上方法都有一个小小的前提，那就是自动化，也就是需要少许程序来协助你。。。不会程度的只能手动完成了

没有评论 »

发表在HTML SEO

如何强化自己的记忆？

2010年9月3日由 admin 没有评论 »

最近感觉很多应该记住的事或人，没有记住！一些没有意义的事，反而反复反复在脑子里面出现，总没法忘记。

要如何强化自己的记忆呢？把想要记住的事，可以烙在心里！就算岁月流失也不从忘记！

没有评论 »

发表在生活述事

现在的社会是如此的现实!

2010年8月28日由 admin 1条评论 »

在深夜的凌晨3点还是无法入睡！心里很难受，想要写点什么来释放心中的不快！

一段故事又迎来了结局，在我的人生轨迹中留下了深深的痕迹，隐隐的痛！这种痛深深的刺激着我，刺激着我前进，我想它会成为我的动力，而不是阻力！越挫越痛！我坚信好运会降临，幸运女神会光顾我！也坚信想到即要做到，敢做敢为敢言！

现在的社会是如此的现实，没得选择唯有努力！

1条评论 »

发表在生活述事

css hack 下划线星号大于号备忘

2010年8月20日由 admin 没有评论 »

IE6识别*和_，不识别 !important
IE7识别*, 不识别_，识别 !important
而firefox两个都不识别，识别 !important

没有评论 »

发表在CSS+DIV

Tags: css hack 下划线星号大于号

javascript中onclick在各种浏览器下的差异

2010年8月6日由 admin 3 条评论 »

在Dom Level1中没有定义事件模型，在Dom Level2中定义了事件模型一个较小的子集，在Dom Level3（2004）中事件才被完整定义。
由于IE还没有对于Dom Level1的完整支持，所以当前的浏览器主要存在IE和DOM两种不同的事件模型。这直接导致了事件处理成为JS跨浏览器编程中差异最大的部分。还好除了IE之外，Mozilla FireFox、Opera、Safari都统一实现了Dom Level2定义的事件模型。
本文尝试总结关于事件处理的所有相关要点，包括添加删除事件、得到事件对象、得到触发事件的对象、捕获和冒泡事件流、终止事件流、阻止某个事件的默认行为等等。

一、添加事件的方式 ：
1.写在HTML元素标签内:
<div onclick=”clk()” id=”testDiv”>click me!</div>
<script>
   function clk(){
        alert(1);
   }
</script>
2.JS得到页面元素后直接指定：
<script>
   var oDiv = document.getElementById(“testDiv”);
   oDiv.onclick = clk;
   //或者
   oDiv.onclick = function(){
        alert(1);
   }
</script>
3.JS为一个元素的一个事件添加多个处理函数：
<script>
   var oDiv = document.getElementById(“testDiv”);
//for IE
   oDiv.attachEvent(“onclick”,clk);
   oDiv.detachEvent(“onclick”,clk);
//for DOM(FireFox,Opera..)
   oDiv.addEventListner(“click”,clk,false)
   oDiv.removeEventListner(“click”,clk,false)
</script>

注意：
1.对于Dom中增删事件处理函数的第三个boolean参数稍后解释，一般情况下false就好了。
2.在第2、3种方法中，指定事件处理函数为clk而不能写成clk()，任何方法在任何位置其后加上()表示对这个方法的一次运行。这也造成了对于添加的事件处理方法无法添加参数，只能是一个无参数调用。
3.第3种方法中，IE的事件名称一”on”开头如”onclick”,而Dom的事件类型没有如”click”。
4.另外强调一点，使用document.getElementById(“testDiv”);这样的语句最好要在页面文档完全载入之后（window.onload内,后续方法掉用内），至少要在这个Div的定义之下，浏览器对于页面文件的解释顺序这里不详细叙述。只是强调一下严重性，例如这段代码，<div id=”testDiv”><script>var oDiv = document.getElementById(“testDiv”);</script></div>对于IE来讲是致命的，很可能你会得到一个系统进程错误，然后所有IE窗口消失。

二、如何得到事件对象
对于IE：事件对象是全局对象，window.event就可以得到这个对象
对于Dom：事件根据添加事件处理函数的方法不同而略有区别。
相对上面提到的第2，3中添加事件的方法，浏览器会隐式自动把event作为事件处理函数传给处理函数，通过arguments[0]可以得到。
而对于第1种方法需要这样写<div onclick=”clk(event)” id=”testDiv”>click me!</div>需要将event作为clk的一个参数传回来，为了和其他事件添加保持一致处理方便，建议将其作为第一个参数。
这样我们就可以通过一句话来处理浏览器差异：
var oEvent = window.event?window.event:arguments[0];

三、如何得到触发事件的元素
当我们获得事件对象oEvent之后我们希望得到触发这个事件的页面元素
对于IE：oEvent.srcElement
对于DOM:oEvent.target
同样写成一句话：oSrc = oEvent.srcElement?oEvent.srcElement:oEvent.target;

虽然很简单，这里还是需要有些细节需要特别注意的：
        对于这样的一段HTML<div onclick=”clk(event)” id=”outerDiv”><div id=”innerDiv”>testSrc</div></div>
        虽然onclick事件是attach到outerDiv上的，但是当你点击文字”testSrc”触发事件并通过上面那句话得到的oSrc并不是outerDiv，而是实际触发的对象。
        更特别的是，对于实际触发事件的对象在IE和DOM两种模型下还有所不同，因为Dom标准中文本节点可以触发事件的而IE不可以，所以在IE下oSrc是 innerDiv(oSrc.nodeType==1),而在Dom下oSrc是内容为”testDiv”的文本节点 (oSrc.nodeType==3)。
        这会造成一定的困扰，当你的目标想要得到outerDiv时，建议使用这种写法：<div onclick=”clk(event,this)” id=”outerDiv”><div id=”innerDiv”>testSrc</div></div>这样，你甚至可以不去理会event对象，而事件处理函数传入的this即是指向outerDiv的指针。
        当然这只是针对第1种添加事件的方法而言，而针对不可以传入参数的第2,3种添加事件方法则没有什么好办法，一直向上查找parentNode直到找到为止吧。

这里可以看出三种添加事件的方法是各有短长的，根据实际情况来选择应用吧。

四、事件对象还包含哪些信息
这块儿的东西我最不喜欢写，东西挺多浏览器差异大我记住的很少。
把我用比较多的列出来，而且基本上这些各个浏览器是一致的。
oEvent.type 事件类型 click、mouseover等等
oEvent.clientX oEvent.clientY 鼠标事件触发的坐标（相对于浏览器窗口）
oEvent.screenX oEvent.screenY 鼠标时间触发的坐标（相对于屏幕）
oEvent.keyCode 键盘事件按键代码
oEvent.altKey oEvent.ctrlKey oEvent.shiftKey 事件发生时alt、ctrl、shift键是否按下

3 条评论 »

发表在Javascript

用attachEvent()/addEventListener()方法添加触发事件

2010年8月5日由 admin 没有评论 »

在近来的工作中，用到了attachEvent方法，该方法可以为某一事件附加其它的处理事件，有时候可能比较有用，这里将其基本用法总结一下。

其语法可以查看《DHTML手册》，里面有详细的说明，这里贴一个例子，该例子来自互联网：

document.getElementById(“btn”).onclick = method1;
document.getElementById(“btn”).onclick = method2;
document.getElementById(“btn”).onclick = method3;
如果这样写,那么将会只有medhot3被执行

写成这样：
var btn1Obj = document.getElementById(“btn1″);
//object.attachEvent(event,function);
btn1Obj.attachEvent(“onclick”,method1);
btn1Obj.attachEvent(“onclick”,method2);
btn1Obj.attachEvent(“onclick”,method3);
执行顺序为method3->method2->method1

如果是Mozilla系列，并不支持该方法，需要用到addEventListener
var btn1Obj = document.getElementById(“btn1″);
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener(“click”,method1,false);
btn1Obj.addEventListener(“click”,method2,false);
btn1Obj.addEventListener(“click”,method3,false);
执行顺序为method1->method2->method3

没有评论 »

发表在Javascript

CSS 框模型概述

2010年8月3日由 admin 没有评论 »

CSS 框模型

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {
  margin: 0;
  padding: 0;
}

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

CSS 框模型实例

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

浏览器兼容性

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。