HTML+CSS+行内元素+块级元素+浏览器兼容性

块级元素和行内元素的区别:

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.

　　行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化.

　　块级元素可以设置width,height属性.

　　行内元素设置width,height属性无效.

　　块级元素即使设置了宽度,仍然是独占一行.

　　块级元素可以设置margin和padding属性.

　　行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果.　　

　　块级元素对应于display:block.

　　行内元素对应于display:inline.

内联元素（行内元素）内联元素(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 - 定义变量

块元素(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 - 非排序列表

可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。

* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本

HTML标签：

HTML头部 (<!DOCTYPE> 声明帮助浏览器正确地显示网页。它不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。)
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- ---上面代码表示是用XHTML1.0文档类型
<html>标签

<html xmlns="http://www.w3.org/1999/xhtml">
<head>标签

<base>(<base> 标签为页面上的所有链接规定默认地址或默认目标（target）)
<meta>(meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。)
- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
- <meta http-equiv="mobile-agent" content="format=html5;url=#" />
- <meta http-equiv="mobile-agent" content="format=xhtml;url=#" />
- <meta content="seo搜索词" name="keywords" /> ---SEO优化
- <meta name="description" content="内容页面的描述词语或句子。" /> ---描述页面
- <meta content="index,follow" name="robots" />
- <meta content="lbs580网名" name="author" />
- <meta property="qc:admins" content="17512667376165676375" />
- <meta content="Copyright 1999-2008. www.lbs580.com . All Rights Reserved." name="copyright" /> ---版权
- <meta name="application-name" content="lbs580"/>
- <meta name="msapplication-TileColor" content="#8F1C21"/>
- <meta name="msapplication-TileImage" content="http://www.lbs580.com/logo.png"/>
<script>(<script> 标签用于定义客户端脚本，比如 JavaScript。)
<title>(<title> 标题定义文档的标题。)

定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题

<link>(<link> 标签定义文档与外部资源之间的关系。)
<style>(<style> 标签用于为 HTML 文档定义样式信息。)

<body>

<a>
<div>
<img>
<span>
<script>
<form>
<frameset>
<frame >
<ul>
<li>
<label>
<input>
<code>程式码
<KBD></KBD>键盘字
<SAMP></SAMP> 范例（英文全称：SAMPle）
<VAR></VAR> 变量（英文全称：VARiable）
<BLOCKQUOTE></BLOCKQUOTE> 向右缩排（向右缩进、块引用）
<DFN></DFN> 述语定义（英文全称：DeFiNe）
<ADDRESS></ADDRESS>地址标记
<sup></SUP> 上标字（英文全称：SUPerscript）
<SUB></SUB> 下标字（英文全称：SUBscript）
<cite>
<noscript>
<style>

待补...

CSS HACK:这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack!

由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等

选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等

HTML^[1]头部引用(if IE)Hack：针对所有IE：<![endif]-->，针对IE6及以下版本：<![endif]-->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

书写顺序，一般是将识别能力强的浏览器的CSS写在前面。下面如何写里面说得更详细些。

1)FF不能识别*，但能识别!important;

2)IE8 最新css hack：

"\9"　例:"border:1px \9;".这里的"\9"可以区别所有IE和FireFox.
"\0"　IE8识别，IE6、IE7不能.
"*"　IE6、IE7可以识别.IE8、FireFox不能.
"_"　IE6可以识别"_",IE7、IE8、FireFox不能.

最新IE 11与 Firefox 29.0.1 之间兼容性问题：

1)!important ;

2)使用“\9”这一标记;---例:"border:1px \9;".这里的"\9"可以区别所有IE和FireFox.

```
margin-bottom:-3px\9
```

3)"+" ;

4）“*”; ---IE6、IE7可以识别.IE8、FireFox不能.

```
*margin-bottom:-3px;_margin-bottom:-2px
```

5)"_" ; ---IE6可以识别"_",IE7、IE8、FireFox不能.

_margin-top:2px;
```
_top:86px;
```

6)"@-";

```
-moz-opacity:0.6;opacity:0.6
```

7)“\0”标记; ---IE8识别，IE6、IE7不能.

8)* html .clearfix{height:1%} ---"*html"

9)IF 语句：

10)特性检测：@cc_on

11)@media -ms-high-contrast 方法

12)@media 0 方法

13）@import "non-ie.css" all;

14）body[class|="page-body"]

15）_property: value and -property: value

16）*property: value

17）body:empty

18)a:link:visited, a:visited:link

19)>body

20)html*

21)!ie

22)!important!

23)待续...

The syntax for conditional comments is as follows:

Positive: 
Negative: <![IGNORE[]]> HTML

condition is one of the following:

IE: Any version of IE
lt IE version: Versions less than version
lte IE version: Versions less than or equal to version
IE version: Only version version
gte IE version: Versions greater than or equal to version
gt IE version: Versions greater than version

version is the version of Internet Explorer, typically 5, 5.5, 6, or 7

示例：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html lang="en">
 3     <head>
 4         <title>Test</title>
 5         <link href="all_browsers.css" rel="stylesheet" type="text/css">
 6         <!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->
 7         <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
 8         <!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
 9         <!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
10     </head>
11     <body>
12         <p>Test</p>
13     </body>
14 </html>

View Code

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html lang="en">
 3     <head>
 4         <title>Test</title>
 5     </head>
 6     <body>
 7         <input type="hidden" disabled id="attrhack">
 8         <p>Test</p>
 9     </body>
10 </html>

View Code

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html lang="en">
 3     <head>
 4         <title>Test</title>
 5         <style type="text/css">
 6             p
 7             {
 8                 background: green !important; /* Major browsers other than IE 6 and below respect the importance immediately */
 9                 background: red; /* IE 6 and below use this value instead, even though the above was marked as important */
10             }
11         </style>
12     </head>
13     <body class="page-body">
14         <p>Test</p>
15     </body>
16 </html>

View Code

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html lang="en">
 3     <head>
 4         <title>Test</title>
 5         <style type="text/css">
 6             p
 7             {
 8                 background: red; /* Applies to all major browsers */
 9             }
10 
11             body[class|="page-body"] p
12             {
13                 background: green; /* Applies to IE 7 and most modern browsers except Opera */
14             }
15         </style>
16     </head>
17     <body class="page-body">
18         <p>Test</p>
19     </body>
20 </html>

View Code

 1 /***** Selector Hacks ******/
 2 
 3 /* IE6 and below */
 4 * html #uno  { color: red }
 5 
 6 /* IE7 */
 7 *:first-child+html #dos { color: red }
 8 
 9 /* IE7, FF, Saf, Opera  */
10 html>body #tres { color: red }
11 
12 /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
13 html>/**/body #cuatro { color: red }
14 
15 /* Opera 9.27 and below, safari 2 */
16 html:first-child #cinco { color: red }
17 
18 /* Safari 2-3 */
19 html[xmlns*=""] body:last-child #seis { color: red }
20 
21 /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
22 body:nth-of-type(1) #siete { color: red }
23 
24 /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
25 body:first-of-type #ocho {  color: red }
26 
27 /* saf3+, chrome1+ */
28 @media screen and (-webkit-min-device-pixel-ratio:0) {
29  #diez  { color: red  }
30 }
31 
32 /* iPhone / mobile webkit */
33 @media screen and (max-device-width: 480px) {
34  #veintiseis { color: red  }
35 }
36 
37 
38 /* Safari 2 - 3.1 */
39 html[xmlns*=""]:root #trece  { color: red  }
40 
41 /* Safari 2 - 3.1, Opera 9.25 */
42 *|html[xmlns*=""] #catorce { color: red  }
43 
44 /* Everything but IE6-8 */
45 :root *> #quince { color: red  }
46 
47 /* IE7 */
48 *+html #dieciocho {  color: red }
49 
50 /* IE 10+ */
51 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
52    #veintiun { color: red; }
53 }
54 
55 /* Firefox only. 1+ */
56 #veinticuatro,  x:-moz-any-link  { color: red }
57 
58 /* Firefox 3.0+ */
59 #veinticinco,  x:-moz-any-link, x:default  { color: red  }
60 
61 /* FF 3.5+ */
62 body:not(:-moz-handler-blocked) #cuarenta { color: red; }
63 
64 
65 /***** Attribute Hacks ******/
66 
67 /* IE6 */
68 #once { _color: blue }
69 
70 /* IE6, IE7 */
71 #doce { *color: blue; /* or #color: blue */ }
72 
73 /* Everything but IE6 */
74 #diecisiete { color/**/: blue }
75 
76 /* IE6, IE7, IE8, but also IE9 in some cases :( */
77 #diecinueve { color: blue\9; }
78 
79 /* IE7, IE8 */
80 #veinte { color/*\**/: blue\9; }
81 
82 /* IE6, IE7 -- acts as an !important */
83 #veintesiete { color: blue !ie; } /* string after ! can be anything */
84 
85 /* IE8, IE9 */
86 #anotherone  {color: blue\0/;} /* must go at the END of all rules */
87 
88 /* IE9, IE10 */
89 @media screen and (min-width:0\0) {
90     #veintidos { color: red}
91 }

View Code

posted on 2014-05-13 08:36 lbsf 阅读(319) 评论(0) 收藏举报

刷新页面返回顶部

lbsf

HTML+CSS+行内元素+块级元素+浏览器兼容性

块级元素和行内元素的区别:

导航

公告