我在博客的一些关键标记处使用了display的一些属性，3天后我发现博客标题排名较原来靠前了一两位，排在了搜索引擎结果的较前位置，从网上搜索了一些关于display属性的知识，带着一些疑问，记录下来。也许很火星，希望大家能指点一二。

display属性block | inline |inline-block的区别

1、display:block就是将元素显示为块级元素.

block元素的特点是：

总是在新行上开始；前后会带有换行符。

高度，行高以及顶和底边距都可控制；

宽度缺省是它的容器的100%，除非设定一个宽度

<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

2、display:inline就是将元素显示为行内元素.

inline元素的特点是：

和其他元素都在一行上；

高，行高及顶和底边距不可改变；

宽度就是它的文字或图片的宽度，不可改变。

<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：

让一个inline元素从新行开始；

让块元素和其他元素保持在一行上；

控制inline元素的宽度（对导航条特别有用）；

控制inline元素的高度；

无须设定宽度即可为一个块元素设定与文字同宽的背景色。

3、display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

inline-block的元素特点：

将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

关于这个更多请参考淘宝网怿飞的《display:inline-block的深入理解》一文。

display属性block | inline |inline-block元素对SEO的作用

熟悉了上文关于display属性block | inline |inline-block的区别之后，我在网页中做了2处css改动：

a、在博客首页将博客名标记为h1，在单篇文章页将文章标题标记为h1。在css中我添加了h1标记的display属性display:inline。

b、将a:link, a:visited 设置了display属性display:block。

这样，我产生了几个疑问：

1、将h1设为行内元素，搜索引擎在抓取的时候是按照h1标记来做中文分词呢还是按照行内普通文本做中文分词，会不会影响关键字的抓取数量？

2、将a:link, a:visited 设置了display属性display:block，搜索引擎在抓取的时候是不是就不做中文分词了呢，如果不做中文分词，会不会变成rel=nofollow和rel=canonical的集合体了呢？

3、百度好像真的更懂中文啊，可是百度太烂，既想做婊子，又想给自己立牌坊，就让人厌恶了。

update：搜索引擎不解析CSS。所以上面的疑问也就消除了。

《精通CSS+DIV》学习笔记:http://www.douban.com/subject/2181438/

CSS基础知识篇

第1章、CSS初步体验

1、行内样式表的优先级最高，其次是采用<link>标记的链接式，再次是位于<style></style>之间的内嵌式，最后才是@import的导入式样式表。link和style的优先级是一样的,取决于谁在前谁在后，还要考虑优先级加权的情况。笼统的说link和style的优先级谁高谁低是错误的。

2、滤镜渐变filter只在IE浏览器下有效，并且在IE7中必须将安全级别设置成Medium.

第2章、CSS的基本语法

2、标记选择器、类别选择器、ID选择器。声明包含属性和值两部分。

3、在没有定义选择器的时候，各个HTML标记采用浏览器自身默认的显示方式。

4、类别选择器还有一种更直观的使用方法：直接在标记声明后接类别名称，以此来区别该标记。类别名称中包含标记和选择器。

5、在HTML标记中，还可以同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运用到一个标记中。

6、ID选择器的使用基本和类别选择器相似，不同之处在于ID选择器只能在HTML页面中使用一次，因此针对性更强。一个id最多只能赋予一个HTML标记。

7、集体声明、嵌套声明。类别选择器和ID选择器都可以进行嵌套。还可以多层嵌套。

8、子标记会继承父标记的所有样式风格，并可以在父标记样式风格的基础上再产生新的样式。

第3章、用CSS设置丰富的文字效果

9、通常文章正文中使用的是易读性较强的serif字体，用户长时间阅读下不容易疲劳。而标题和表格则采用较醒目的sans-serif字体，他们需要显著和醒目，但不必长时间盯着这些文字来阅读。WEB设计及浏览器设置中也是推荐遵循此原则。

10、绝对单位及其含义

11、除了利用物理单位设定文字的绝对大小的方法，css还提供了一些绝对大小的关键字作为font-size的值，总共7个：xx-small,x-small,small,medium,large,x-large,xx-large.绝对大小在不同的显示器中显示效果有差异，因此不推荐使用。

12、px显示大小与显示器的大小及其分辨率有关。采用“%”或者“em”都是相对父标记而言的，如果没有设定父标记的字体大小，则相对于浏览器的默认值。

13、文字效果可以同时赋值，只需用空格隔开即可。

第4章、用CSS设置图片效果

当vertical-align的值为bottom或者sub时，IE与Firefox的显示效果是不一样的，所以建议尽量少使用浏览器显示效果不一样的属性值。

第5章、用CSS设置网页中的背景

竖排版语句“writing-mode:tb-rl”只有IE浏览器才支持，firefox浏览器并不支持该CSS属性。

第6章、用CSS设置表格与表单的样式

1、<table>标记中的summary属性值用于概括整个表格的内容，在用浏览器浏览页面时，它的效果是不可见的，但对搜索引擎等则十分重要。

2、在HTML页面中构建表格框架时应该尽量遵循表格的标准标记，养成良好的编写习惯，并适当的利用tab、空格和空行来提高代码的可读性，从而降低后期的维护成本。

3、通过CSS中定义奇数行和偶数行的样式设置，增加易读性，主要配合服务器的动态生成。

4、各个浏览器的显示差异主要是显示器的默认值不同导致的，通常的解决办法是制定该值。

第7章、用CSS设置页面和浏览器的元素

当前激活状态“a:active”一般显示的情况非常少，因此很少使用。

第8章、用CSS制作实用的菜单

1、IE对list-style-type的很多属性支持不是很理想

2、“display：block”语句可以将超链接设置成块元素。

第9章、CSS滤镜的应用

CSS+DIV美化和布局篇

第10章、理解CSS定位与DIV布局

1、<div>标记在HTML3.0时代就已出现，但并不常用，<span>标记在HTML4.0时才被引进。<div>和<span>的作用都是独立出各个区块。区别在于，<div>是一个块级（block-level）元素，它包围的元素会自动换行。而<span>仅仅是一个行内元素（inline elements），在它的前后不会换行。<span>没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适的时候，就可以使用<span>元素。此外，<span>可以包含在<div>标记中，成为他的子元素，而翻过来则不行。

2、一个盒子模型由content（内容）、border（边框）、padding（间隙）和margin（间隔）4个部分组成。

3、在浏览器中，width和height的值都指的是width+padding或者height+padding的值。

4、Border的groove、insert、outset和ridge这几个值，IE都支持得不够理想。IE不对border的背景上色，而firefox的作用域为content+padding+border。

5、Padding用于控制content与border之间的距离。Margin指的是元素与元素之间的距离、块与块之间的距离。

6、在css中可以用过设置块元素的clear属性清除对float的影响。

第11章、CSS+div布局方法剖析

第12章、CSS+div美化与布局实战

1、文档类型声明用来说明文件使用的xHTML或者HTML是什么版本，分过渡型、严格型、框架型。这句代码能够使得IE浏览器能更加正确地解析CSS语法。

2、　<script language=”javascript”>

var number = new Date().getSeconds() % 3 + 1;   //随机数，从1到3

//随机选择CSS外部文件

document.write(‘<link href=”0′ + number.toString() + ’/0′ + number.toString() + ’.css” rel=”stylesheet” type=”text/css”>’);

</script>

这段代码产生随机数，从而在刷新页面的时候调用不同的外部样式文件。

CSS混合应用技术篇

第13章、CSS与JavaScript的综合应用

第14章、CSS与XML的综合应用

1、XML文件中的</br>标记，在HTML中它表示换行，在XML中仅是一个空标记，没有任何意义。当将它的display属性设置为block块时，则可以起到换行的效果。

2、XML的数据默认都不是块元素，而是行内元素。所以在XML中有时需要将各个行都设置为块，数据排列就会清晰很多。

3、Firefox等一些浏览器并不支持XML文件中行内元素的width属性，也不支持CSS常用的属性覆盖方法，因此显示效果并不是很理想。

第15章、CSS与Ajax的综合应用

ajax不是单一的技术，而是4种技术的集合。Javascript、CSS、DOM、XMLHttpRequest对象。Javascript像胶水一样将各个部分粘合在一起，定义应用的工作流和业务逻辑。

通过使用Javascript操作DOM来改变和刷新用户界面，不断地重绘和重新组织显示给用户的数据，并且处理用户基于鼠标和键盘的交互。

CSS为应用提供了统一的外观，并且为以编程方式操作DOM提供了强大的途径。在Ajax中，CSS仍然是不可缺少的美术大师。

XMLHttpRequest对象则用来与服务器进行异步通信，在用户工作时提交用户的请求并获取最新的数据。

Ajax的核心是Javascript对象XMLHttpRequest。

综合案例篇

第16章、我的博客

第17章、小型工作室网站

第18章、企业网站

第19章、网上购物网站

第20章、旅游网站