html+css杂写篇
html(常用结构):
|
1
|
<!---->这是个注释，注释会被浏览器忽略 。
|
|
1
|
<!DOCTYPE> 定义文档类型，如html，xhtml的规范.
|
注：xhtml 1.0提供了三种DTD声明供选择：
1、过渡的（Transitional)：要求非常宽松的DTD，它允许你继续使用html4.01的标识但要符合xhtml的标准。如：
|
1
|
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" {文档类型 }
|
|
1
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> {DTD文件的URL }
|
2、严格的(strict):不能使用任何层的标识和属性，比如<br/>
3、框架的（frameset）专门针对框架页面设计的DTD，如果页面中包涵框架，使用这种dtt.
说明：定义什么规范，告诉浏览器用什么规范来解析, 以便通过w3c标准！
w3c标准就是让页面在不同的终端都可以运行，实现跨平台。
必须声明好DTD规则，浏览器才能根据它检查页面有效性，并且采取相应的措施，并不是说声明必须加DTD文件的url，比如html5就不需要加url
在这里说下浏览器的两种模式：（标准模式) (混杂模式) 标准模式：以规范呈现页面，混杂模式：比较轻松的向后兼容方式显示，以防止老站点无法工作。如果声明的规范没有DTD文件URL，那么浏览器就会以混杂模式显示，一般情况下都是标准的，还有如果规范不是页面中的第一个代码元素，那么ie6中就会自动切换到混杂模式。
，
|
1
|
<address></address> {定义地址，如在<address>..</address>中输入地址,为地址代码}
|
|
1
2
|
<b></b> <em></em> <i></i> {一些物理属性，格式化，不被在赞成使用了，注：<strong></strong>或<em></em>语气词，常于用更好的被搜索引擎搜到，最好使用strong加粗.....
如不需要加粗但要有语气加强的含义，加font-weight:normal即可消除加粗的效果}
|
|
1
|
<table><td><tr><th> 即表格，<td>表示定义表格单元格，<tr>表示表格的一行，<th>表示表格的头。<table>定义表格，table标签不是块级元素，它的高度是内容元素高度撑起来的，他可以设置margin：0 auto，对于vertical-align，他是有效的。
|
|
1
|
<bgcolor> {定义表格背景颜色}
|
|
1
|
<colspan><rowspan> {即表格水平跨度和垂直跨度}
|
|
1
|
<align><valign> {即水平对齐和垂直对齐}
|
|
1
|
<thead> <tbody> <tfoot> {即表格头部，主体部分，脚部分。（不要盲目使用td,tr标签，这个也是很好的标签）}
|
|
1
|
<p></p> {即段落，（段落有css默认的margin值，所以有时设置语义不明显的地方尽量用P标签。）}
|
|
1
|
<h1></h1> {即标题，注：标题有一到六级，即<h1>..<h6> 一级标题自动加粗属性。标题更容易被搜索到，注意它也有css默认的margin值，大概15像素左右吧}
|
|
1
|
<div></div> {即div块,用于div的布局，块级元素(注：只有块级元素才能设置高度宽度，所以要想设置内联元素浮动或设置宽度，把内联转换成块级元素，即display:block;而把块级元素转换内联，即display:liline;如需要看不见元素，设置display：none就可以实现把它影藏了，与visibility:hidden不同，不占据文本流)因为是个无语义的属性，所以是个很好的分割标签。注：块与块之间的margin是取最大值的，即小的值被塌陷在大的值上。但是浮动元素，行内元素，它们的值是相加的}
|
|
1
|
<span></span> {即内联（行内），不是块级元素，无法设置宽度长度，它可在一行内显示多次，不同于块级，块级独占一行，<!--注：当两个内联元素在一起的时候，那么它们之间的margin会相加，即一个内联<margin-right:10px> <margin-left:10px>相加得20像素--> ，（有一个很奇怪的事情，当给行内元素设置margin或padding的top-buttom时，它们的值无效，padding是起作用了，但没有距离） }
|
|
1
|
<a href=""></a> {即文本超链接，默认的链接样式是蓝色带有下划线的，可使用伪类自行设置。目标显示方式：target="_blank"另一窗口；默认原本窗口}
|
|
1
2
|
<ul></ul>;<li></li> 即无序列表，常常用于写导航，一些新闻列表等。注：列表分为有序<ol>，无序<ul> 由<li>定义列表项，和自定义<dl> dl由dt指解释的名词 dd：为具体的解释。注：制作导航时，运用背景颜色时，必须把li a装换成block元素，才能设置宽度以及高度，这样才有效果 只有块级元素才可设置宽度高度，行内元素不允许。
ul即为项目列表，li即为列表项，两者的区别
|
|
1
|
<img src=""/> {即图片链接，行内元素，src即图像源文件，注：在xhtmL中，img有结束标签，html无，在img中添加alt与title的用处是：title指鼠标指上图片时显示的文字，alt则是图片显示不出的情况下出现的替代文字}
|
|
1
|
<hr>定义水平线，
|
|
1
2
3
4
5
|
</br>即换行属性,为了在以后的xhtml，xml，需要添加关闭
<pre>可将一些文字的排版 格式原封不动的在网页中呈现起来
|
|
1
|
<html>定义的是html文档。
|
|
1
|
<meta>定义的html文档的元信息，提供关键词
|
|
1
|
<title>定义文档标题，即网页标题。
|
|
1
|
<sub></sub> <sup></sup>定义下标文本，上标文本，用于编程代码公式的输入文本。
|
|
1
|
<button></button>创建一个按钮，在里面输入文本，用图片加入会起到更加漂亮的效果。
|
|
1
|
<dl> <dt> <dd> 自定义列表作用。
|
|
1
|
<target="_blank">以新窗口打开一个页面，一般用于<a>标签
|
|
1
|
<font> 定义字体文本，font-weigth: font face="#" 注：在结构中字体设置为font face="",但在css中字体设置为font-family:
|
|
1
|
<frameset></frameset>一个框架集，可设置划分区域，col为垂直框架，row为水平。
|
|
1
|
<frame>一个框架。
|
|
1
|
<iframe> </iframe>内联框架.
|
|
1
|
<form></form>即定义的是一个表单。一些输入信息可使用。注:表单传送的是信息，所以要表明传送地址和方式：即<form action="url"methot="post/get">
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<input>定义的是表明表单的样式，如文本type="text"，复选框type="checkbox"等
大部分用到的表单用input进行输入设置。即输入标签，而定义输入的类型则是type进行设置；具体的格式如下：
<form>
姓名:
<input type="text"name="xingming"/>
</form>
注:input是单行结束标签；name的作用则是：表明位置，则name是xingming；在不需要位置的情况下不写也可；
以下就是一些常见的表单类型：
type="text" <!--文本框-->
type="radio" <!--单选框-->
type="checkbox" <!--复选框-->
type="submit" <!--按钮-->
type="reset" <!--重置按钮-->
<fieldset><legend>定义域的标题</legend></fieldset>定义域，即包住表单的框；父元素<form> 即线中包涵信息
<labelfor="made"></lable>没有什么呈现效果，不过当鼠标滑过时候可根据for的元素直接选中元素的文本选择
<labelfor="made">姓名</lable>
<input type="text"name="six"id="made"/>
|
|
1
|
<select> 定义的是下拉列表；结构如下：<form><select><option>下拉数值</option></select></from> 如指明某一元素：则用select="select"镶嵌于某一元素；
|
|
1
|
<textarea rows="2"col="3"s>即文本域
|
|
1
|
<fileset><legend></legend></fileset>定义的是一个域，fileset是块级元素，legend用作于fileset标签，即标题
|
学习网址：w3c /css文章
《to be continued》..
css:(常用属性）
-----
text: <文本>
|
1
|
font-family:arial /*字体*/
|
|
1
|
font-size:15px /*设置文字大小*/
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
font-weight:bold/900/ /*加粗属性，900为特粗*/
font-style:italic/normal; /* 文字样式，少用*/
text-align:center/left/right /* 文本水平对齐*/ 这种属性在ie中有个bug，如果ie在混杂模式下，它是可以让块级元素居中显示，我们都知道在标准中，text-align:center只作用于行内元素，但是呢ie在标准模式下，我做过测试，只能作用于ie6、ie7，但ie8不支持，而标准模式下，ie是支持margin:0auto的，所以得出结论，ie不管在什么模式下，都是支持text-align居中块级元素，但是在标准模式下，都是支持margin:0auto的，所以在有dtd文档类型下，设置margin:0auto即可，特殊情况可设置text-align、margin:0auto
vertical-align:middle/text-bottom/text-top/baseline /* 文本垂直对齐*/ 注意有的时候使用vertical-align是没有效果的，它只对在html中拥有vertical的特性的元素才会起作用，比如在div Li span是没有效果的，而<td><caption><th>是有效的，不过我们在要使用div来使vertical有效怎么办呢，办法改变display类型，使父级display:table ;子级display:table-cell;vertical-align:middle;，不过这个在ie6和以下不兼容,或者在一行中有图片的话，可直接设置vertical-middle即可对准图片从而垂直对齐。
text-indent:2em /* 文本首行缩进2em*/
line-height: px /* 文本行高*/ 注：文本为一行时；使用line-height属性设置高度为父级的高度，即可实现垂直居中的效果，(但是为什么会垂直居中呢，我认为是line-height工作是以文本中间为基线，最后设置距离以基线向外扩张，如果与父级相同高度，就是说上扩张的距离是高度的一半，可以想象是使用line-height把文本挤到中间了，明白后就知道为什么只限于一行文本了)当然也可使用垂直对齐方式，即vertical-align:middle。但只对有特性的元素
letter-spacing: px /* 字体间距*/
word-spacing: px /* 字母间距*/
text-decoration:underline/none/ /* 文本装饰*/
text-transform:字母大写uppercasexxy 小写lowercase /* 文本大小写*/
text-shadow:5px5px5px#000; < 添加文本阴影效果，css3属性，值为水平、垂直、阴影深度、颜色，但由于css3未标准化，需要添加不同的浏览器前缀>
box-shadow:内阴影/外阴影5px5px5px5px#000; <给盒模型添加阴影效果，默认的是外阴影，x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色，注意webkit内核的浏览器不支持默认的无颜色，需要设置前缀才可，注意当设置多阴影的时候，比如-2px2px0#fff，不设置模糊值会没有，但设置了其余三边都有了，这很麻烦，如果设置了模糊值，要注意书写顺序，第一个写的阴影会出现在顶部，顶部的阴影在右边，右边的在底部，但它的阴影颜色还是按照x y顺序的，还有个阴影扩展半径，它的效果貌似border，但有所不同的是它不占据额外的width，border在ff等浏览器是额外计算width的>
--------------------------------------------------------------------------------
有趣的伪类属性(css3): p::selection{color:#f00;background:#fff;} ::selection /*Webkit,Opera9.5+,Ie9+前缀*/ ::-moz-selection/*ff前缀*/
* 这是个 文本查看的显示，在浏览器中默认的方式是白色字体和蓝色的背景，这个有趣的属性可改变，注意：只能使用这两个属性值，color和background。。。
|
|
1
|
line-height: px /* 文本行高*/ 注：文本为一行时；使用line-height属性设置高度为父级的高度，即可实现垂直居中的效果，(但是为什么会垂直居中呢，我认为是line-
|
-------
background: <背景>
|
1
2
3
4
5
6
7
8
9
10
11
|
background-color: /*背景颜色，只是背景颜色*/
background:#f00 /* 背景颜色，一个属性的的集合，除了可以定义颜色外，，也可定义其他值，如定位，图像定位，图片路径，有默认值为none repeat scroll 0 0*/
background:url(#) /* 背景图片,只是背景图片*/
background-image:url() /* 背景图片*/ 说明一下：background-image:url(#) 与background:url(#)之间的区别；background:url是背景的一个集合 背景复合属性；既可以指定样式，也可以指定大小路径，而background-image专一指定背景的路径样式。
background:attachment:fixed /* 背景图像定位*/ <scroll属性滚动条滚动时，图像随滚动而滚动，默认属性，而fixed为不滚动-- 注意是背景图像，不是平常的一些元素>
background-repeat:no-repeat/repeat/repeat-x/repeat-y /* 背景图像重复*/
background-postition:absolute/relative/fixed， value为toprightbottomleft; /* 背景图像定位，常用于css sprite */
|
{to be continued...}
文本与图像对齐方式：
两种：
1：水平对齐方式： text-align:left / center / right
2 :垂直对齐方式： vertical-align:text-top{文字对顶端对齐，不拘于基线} text-middle:{文字中间对齐} text-bottom{文字底部对齐，注意不是基线}
baseline{默认效果} 关于垂直对齐的基线，则是文字与图像以基线对齐，但个别字母如j p它们低于基线位置的，超出水平线的就是基线。图片与文字的对齐方式是默认的基线对齐，若想改变使用vertica-align属性。
也可以用vertical-align:10px /-10px;进行基线位移，以基线为准的上下移动
------
border:
|
1
2
3
4
5
6
7
8
9
10
11
|
border:1pxsolidred; /*边框 简写 width-style-color */
border-color:# /* 边框颜色*/
border-style:dashed; /* 边框样式*/ style:solid<实线>; dashed<虚线>; dotted<点线>; none<默认>；
border-width: px /* 边框宽度*/
border-height: px /* 边框高度*/
border-radius:25px; /* 设置圆角框，注意多写不同浏览器的前缀，-webkit-;-moz- 只是css3一些浏览器兼容不是很好，可以考虑使用图片定位得到圆角*/
|
另以说明：轮廓、在border外围设置的一条线，如：outline-style outline-width outline-color用于突出重点
{to be continued...}
position: <定位>
|
1
|
position:bottom/top/left/right; /* 定位的位置*/
|
|
1
|
position:relative; /* 相对定位，那么它的定位是以原本的位置而去定位，不是以浏览器(body)或父盒子去定位，相对定位虽然也是浮了起来，但还是在z-index:0这一层中，所以后面的元素认为它还是存在的。不会去覆盖它，即相对定位的元素原本的空间还是存在的 */
|
|
1
|
position:absolute; /* 绝对定位，浮了起来，脱离了文本流，在z-index:0之上，它是可以改变定位元素的display类型为inline-block，设置它的display是无效的，它的定位方式是以浏览器窗口(body)为基准，但如果离它的最近的祖先元素或父元素有定位属性，那么它的定位基准是以父级去定位的，由于它是脱离了文本流，不占据空间，所以后面的元素认为它不存在的，自动覆盖它的位置。*/
|
|
1
|
position:fixed; /* 固定定位，他就不管谁祖先了，以浏览器(body)定位为基准进行固定定位，不随滚动条的移动而移动，但是在ie6中，它不支持-->---如果使得对象定位住了但随着移动还是会与其他元素重叠，这时候运用层叠顺序：z-index大于其他元素的层，可以去除重叠带来的影响*/
|
|
1
|
position:static /*为默认设置*/
|
|
1
|
z-index:1-9999; /*层的先后顺序，即级别越高，层越靠上！覆盖效果*/
|
|
1
|
float:left/right/none; /*浮动，还是在z-index：0这一层，有趣的是如果对行内元素设置，它也会隐式改变display类型为inline-block，float兼容性问题大，下面有讲解，通常用于导航栏，新闻列表，布局等*/
|
|
1
|
clear:left/right/both; (两边不允许）none（都允许）/*指的是清除浮动,不推荐使用*/
|
float: <浮动>
浮动条件：必须给一个浮动元素一个宽度、（不然在ie6里有个bug，触发条件子级有height或触发了haslayout） 而且给浮动元素设置display类型是无效的，（这就很好解释ie6的双边距bug）行内元素设置了浮动，浮动元素会改变元素类型，相当于设置了display:inline-block; 可以对他进行宽度高度设置
工作原理：当一个元素浮动时，由于它脱离了文本流，宽度不会自动伸展，那么下一个块级会自动顶上去，就是说下一个块级无视了第一个块级，但为什么块级没有顶到最上面来呢，因为受到浮动的影响，围绕浮动元素就止步了，这样就很好的解释了为什么设置了float：left后，字为什么会围绕浮动的元素而排列，注：浮动后的元素 他们的margin会叠加。
注：当一个无高度的父盒子下的子盒子都是浮动的话，那么它的高度不会自动伸展，那么在这种情况下，使用clear：both，清除周围元素对他的浮动影响，即可实现父盒子自动伸展了。
box: <盒子模型>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
content: /* 内容*/
padding: /* 内边距*/
border: /* 边框*/
margin: /* 外边距*/
content: /* box模型*/
padding:
padding:/top/right/bottom/left:/* 内边距的上右下左值 */
border:
border-color/style/left;/* 边框的颜色与样式等*/
margin:
margin:top/right/bottom/left; /* margin的上右下左值 */
|
如何显示内容的css：
overflow:hidden; /* 防止溢出，比如说在大的div里有个子div，子div的height高出父亲的高度，则overflow:hidden作用就是将超出部分被隐藏，可以想象子div就是内容，1、可以设置hidden在div中文本会保持在一行，阻止文本自动换行，这种方法可使用在div中的文本垂直居中的问题，只需设置line-height就可。2、有的是div子元素不是一行的，呈现的是多行的，可使用padding：25px了，注意父元素必须是可自由伸缩的*/
/scroll:不管内容有没有超过内容区，都会显示滚动条以便显示余下的内容，默认值为：visidle
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
visibility:hidden; /* 该属性是否显示元素框，意味着虽然元素不可见了，但它的物理空间还是存在的，简单来说就是隐形了*/
其属性值： visible/*默认值，可见*/ hidden:/*不可见的，隐形了*/ collapse:在表格中使用，可删除一行或列，但不影响table布局，inherit:继承父元素的visibility属性
ul/li: <列表>
|
1
2
3
4
5
|
list-style-type:disc/circle/* 列表项的符号*/
list-style-position:outside/inside/* outside为项目符号在文本以外，inside是以内*/
list-style--image:url()/* 设置图片为列表的符号*/
|
伪类： <常用的四个伪类>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
:link{...} /* 未被访问状态，原始状态-->
:visited{...} /* 已被访问状态-->
:hover{....} /* 鼠标悬浮状态-->
:active{....} /* 激活状态，击按住不动的样式-->
注：按照顺来写入, 在ie6中除了a的hover伪类可以有效外，其余无效，如tr:hover、div:hover
:befour /*在元素之前出现的内容，-->
:after /*在元素之后的出现的内容--> 一般用于清除float
:focus /*获得焦点*/
|
选择器总结：
1.类选择器： . /* 类选择器，可以在一个样式里使用多次，但优先级低于id选择器,权重为10-->
2.id选择器：# /*id选择器，在一样式里只能使用一次，优先级大于类选择器，权重为100，具有唯一性-->
3.元素选择器：body{..} /* 内联样式，权重最低，为1-->
4.行内样式：style="' /*行内样式，这种优先级最高。权重1000-->
5.后代选择器：#content a{color:#f00;} 父级元素包裹着子元素，它的样式是对所有子元素起作用，但在结构里子元素必须对应着父元素，以确定祖先位置
注：当优先级相同时，最后出现的将会覆盖上面的样式、
6.通配选择器：* /* 对于整个标签进行统一设置，不介意使用它，限制性太大了-->
！以上是常用的选择器，因为ie6支持
下面是高级选择器： （ie6不支持）
7.属性选择器：根据元素的属性和属性值来进行选择；如：img[alt]意思是在结构里有img，并且有alt的属性，应用设置的样式
8.子选择器：形式跟后代选择器相似，后代选择器是选择一个元素的所有后代，而子选择器只选择元素的直接后代，他是以父级的以下的a元素，如果有其他元素包括了a元素，那么个a元素无效，栗子 --css：#content>a{color:#f00;} html:<div id="content"> <a href=""></a> <p><a href=""></a></p>那么第一个a元素有效，而p内的a元素无效。当然了ie6是不支持的，而ie7虽然支持，但在父与子元素之间添加注释会有问题。 《技巧：利用通配符可以实现ie6不支持的子选择的效果，栗子：#container a{text-decoration:none;} #container a*{text-decoration:underline;}那么除了container a内的元素外，其余被覆盖。
9.相邻同胞选择器：前提是有共同的父元素，可以使在一个父元素下，同胞选择器会作用于一个元素之后的元素，栗子css--p + p{background:F00;} html--<div><p>彭鹏1</p><p>彭鹏2</p></div>
在同一父级下，那么只对彭鹏2起作用.背景红色 ，与子选择相同，ie7中添加注释会有问题
样式的简写：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
font的简写： <字体>
按照顺序的来：font-style:italic;
font-variant:normal/small-caps /*小型大写字母*/
font-weight:bold;
font-size:20px;
line-height:20px;
font-family:"宋体";
其简写为：{font:italicnormalbold20px/20px宋体;} 注:为了区分size与height，用/隔离
当然颜色要另写:color:000000;
color也是有简写的；如color:#2233dd; 简写为color:#23d; 有时候简写的size无效，可以尝试设置字体试试。
|
background的简写： <背景>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
backfround-color:
background-image:
background-repeat:
background-attachment:fixed;（背景图像定位，防止随鼠标滚动背景而滚动；使背景静止不动；默认值为scroll，有时候忽略这些属性没写，浏览器还是会给它默认属性的）
《定位原则》 background-position:50%30% /30px40px /topright(如果只写一个left，那么第二个默认是center；第一个是水平位置，第二个是垂直)注：！只要有background-attachment：fixed时，background-position属性才能在firefox和opear中正常工作！
z-index为层叠顺序，一个页面它所处的位置都在z-index:0这一层，可以使用z-index这一属性，必须配合定位属性才有效
(css3) background-size:60px120px;(在css3之前，图片尺寸是由实际图片尺寸来确定的，但在css3中，使用size就可以调整大小了）
其简写为：{background:#000url(..)no-repeatfixed20%20px;} 注：简写是有顺序的，如同上右下左一样。
<background:nonerepeatscroll0%0%;>
none:设置无图片
repeat:设置重复
scroll:背景随浏览器滚动而滚动默认值 /fixed固定
0%:表示position定位，水平与垂直位置
|
padding/margin的简写 ：
按照盒子模型上、右、下、左的的特性，可写为：
padding:20px 30px 20px 30px;
这样可以简写为padding:20px 30px; 即上下为20像素，左右为30像素；同理出现padding:20px 30px 40px时，即为上为20像素，下为40像素，左右为30像素，
那么margin同理。
border的简写：
border的简写相对复杂一些，由于border有四条边，较特殊，即top right bottom left,那么每一条边都可简写，简写border-top:2px solid red;即2像素上红色实线边，因为有四条边，所以每一个都可自由简写，当然，默认四条边直接用border:2px solid red;就可以了
border设置style，width，color 如：border-style:solid/dashed; border-width:2px 3px 5px 6px; 注：其简写形式与上面一样。
list-style的简写：
类型有：list-style-type:disc; list-style-position:outside/inside; list-style-image:none; 设置它的圆点， 对象在外， 项目符号为图片。
其简写: {list-style:disc outside none;} (针对列表的样式)
宽度固定且居中的排版方式：
方法一：对container设置他的宽度width:900px;，以及设置margin:0 auto; 意思为上下margin为0 ，左右自动调整，即可实现居中的效果，完整的的代码是：margin:0px auto 0px auto;
注：需要设置width方能居中
方法二：首先对container设置position:relative;相对定位，left:50%;然后再设置margin-left:-400px;意思就是往回拉了400像素，再设置它的宽度为width:800px;这样就实现了居中的效果；所有浏览器都有效。
多媒体效果：
marquee: <!--多媒体字体的移动-->
opacity:0.6;<!--背景透明度--> ：filter:alpha(opacity:80),opacity:0.8 注0.6数值针对主流浏览器，一般在ie里数值是0-100：
、 《css3》 transition:padding 0.6s ease 0s;padding-left:7px; 缓慢右移动的效果
《css3》 border-radius:5px 6px 6px 8px; 每一个像素代表每一角的弧度，顺序上、右、下、左
滤镜效果：（一些css3）
1：cursor:pointer 常用的手形光标（光标属性），也有许多其他功能的属性值，其余浏览器都认识，hand也是可以的，但兼容性差，所以说设置pointer就好了
2：不透明度：filter:alpha（opacity=50）
3： 值：chrome(color=#fff)；对颜色进行透明处理
4 :（css3）：dropshadow/text-shadow/box-shadow一些阴影的效果， 其值为
box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
5：值：flipH/flipV ;水平与垂直翻转
6：( css3 )：-moz-/-webkit-transform: translate(-40px,45px)/*水平移动与竖值*/ rotate(-45deg)/*顺时针旋转*/ scale(2)/*缩小2倍*/ <!--简写--> <需要写上各浏览器的前缀，-moz-; -webkit->
transform:translate(-45px,45px);/*右移动*/ transform:rotate(23deg);/*顺时针旋转*/ transform:scale(2)/*缩小*/
7：box-sizing:border-box;对于设置padding值得问题，使padding在内容区内，
8： ::selection{background:#f27b2e;color:#fff} ::-moz-selection{....} ::-webkit-selection{....} css3属性，伪元素，改变默认的蓝底白字的文本选中方式，
9：动画效果，栗子： .box h2{transition:padding-left 0.3s ease 0s;}box里的h2先设置好返回值， .box:hover h2{padding-left:10px;transition:padding-left 0.3s ease 0s;} 悬浮box就能触发里的h2，并且向右移动10像素 ，可以的话也能设置阴影框，如box:hover{box-shadow:0 0 5px #f00;}
关于hack：(为了修补兼容性问题，常用hack来弥补，但最好不要多用，造成混乱)
《1》在ie5和ie6浏览器中，，，对于box的margin解释的不同做出的修改：
例：在ie5中，div{width:300px;margin: 0px 10px 0px 10px};它的解释为左右两边各减10px；也就变成了280px ,。。。。但是在ie6或其他浏览器时，解释就为左右填充10px；那么怎样避免呢，如下列：
div{width:300px!important;width/**/:340px;margin:0px 10px 0px 10px;} 关于/**/这个符号作用，在ie5，firefox中都支持，但ie6不支持
解释：ie5 ie6不能识别important，所以其他浏览器识别width:300px;而margin已经设置好；所以width为320px；；那么ie5呢，他识别了后面的width:340px；所以340-20=320.利用了ie5的相减，使之width:320px，，，，很好的解释了ie5和ie6的识别问题。
浏览器之间的兼容问题以及布局技巧：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
（1）： 在firefox中，定义contain的背景可直接在contain中定义，但这样在ie中显示不了，需要再给contain中嵌套一个子层，在子层中设置背景，这样就ok了。
（2）：当两列都设置了float后，那么在footer中，需要设置clear:both；即为清除两边带来的浮动影响，如果不这样做，copyright会自动浮动到两列之后，从而失去copyright的意义。
（3）：设置固定高度自适应的技巧，div{height:auto!important;/*优先执行自适应*/ height:200px;/*ie认识*/min-height:200px;/*ie不认识，其他认识*/照顾ie6浏览器不认识min-heiht，在ie6中对height的解释就是min-height，其余浏览器正常显示。
（关于min-height与max-height的意思，min-height为最小高度，子元素的内容超过min-height的话，父级会自动撑开，包容住子内容，如果子内容没超过父级，就是按父级高度，max-height则与之相反，如果内容超过max-height的高度，父级不会去自适应，超过就是超过，而子内容比父级小的话，父级就不会保持原本的最大高度了，随子内容变化而变化。min-width与max-width同理）
（4）：关于清除浮动的问题，有两种常见方法，一：在结构里设置<div style="clear:both";>或使用clear:both;的方法；初学者常用简单明了，二：设置伪元素:after，在对象的后面才起作用，代码为.clear:after{display:block;clear:both;visibility；font-size:0;height:0;content:"."}这个除ie其他浏览器都认识，解决方法： 添加*html.clear{zoom:1;} *:first-child+html.clear{zoom:1;},这些是hack选择集，*html只有ie6支持，*first-child+html只有ie7认识，写上就行了，目的是要使用ie私有属性zoom来触发layout进行兼容，最后设置在需要清除的<父元素 !>里就行了，取消带来的浮动影响，推荐使用这个，还有几种办法，如overflow：hidden；display：table等，不推荐使用
（5）：布局方法：div垂直居中的三种方法，一：当div内的文本是一行的时候，使用line-height就可使文本垂直居中，最后添加个overflow:hidden；超出部分隐藏；阻止文本自动换行，保持一行。（也可尝试vertical-align：middle加个line-height）
二：多行的垂直对齐方式，在一div中使用padding：25px；就可，当然前提是父元素高度是可伸展的，即自适应
三：多行的固定高度的垂直对齐方式，使用(父)display:table；display:table-cell;最后添加个vertical-align:middle；注意前者是写在父元素里，后者写在子元素里。 但是在ie6或以下不兼容，很遗憾，但已找到解决方法，我们可以使用定位的方式使垂直居中，首先我在此说明一下，在ie6，如果父级使用了定位，那么子级百分比相对定位的话，（数值那算了，正常）那么子级会继承父级的高度来计算百分比定位，如果父级设置绝对定位top:50%;而子级如果垂直居中的话，就必须使用top:-50%；子级是根据父级来百分比定位的，这是ie6的bug，既然父级是top50%，那么理所当然子级以父级标准top-50%；即可实现子级内容垂直居中，当然这是ie6才有作用的，如果浏览器全都有效，得运用hack写法：container{display:table;_position:relative;} content{dispaly:table-cell;vetical:middle;_position:absolute;_top:50%;} sub-content{_position:relative;_top:-50%;}
（6）：关于水平居中的方法：通常都是用margin：0auto的方法使之居中，（如果无效，那你得看看你有没有设置宽度了，没宽度怎么左右自适应，二是看看你有没有声明规范，三，ie是不是在混杂模式下）在ie混杂模式中，设置text-align:center;是可以使块级元素居中的，混杂模式下的ie是不支持margin:0auto的，（我想是没设置dtd的原因？）只能使行内元素居中，那么我想在全部都居中，怎么办呢，办法就是额外套一个父级，栗子 <div style="text-align:center"> div tyle="margin:0auto;></div></div>总之浏览器都处在混杂模式下，设置text-alignmargin:0auto是最好的选择，在标准模式下，ie是支持margin:0auto，但text-align不支持ie8的居中，其余还好，总之在有dtd文档类型的情况下，块级居中设置margin:0auto就好了 还有种方法：position-relative；left：50%；width：800px;margin-left:-400px;这种方法任何浏览器都有效，，最后还有种方法，更改DTD文档类型，为DTD XHTML1.0Transitional //EN，这样ie6也认识
总结:ie在设置混杂模式下，设置text-align是有效的，全部，（但不支持margin:0auto）但在ie标准模式下，只有ie8是无效的，但支持margin:0auto,如果都处于标准下，设置margin:0auto即可
（6）：用border做出的三角形(css3)； .triangle{display:block;font-size:0px;height:0px;width:0px;border:10pxsolid;border-color:#f60#fff#fff#fff;} 一个黄色小三角完成了，是不是很疑惑，它主要运用的是border属性，border-size:10px;大小为10，再添加颜色对它进行渲染；颜色值还是遵从上右下左的顺序排列，至于width,height font-size,block影响是有的，如果你把width去掉或加值，三角会无限拉长，（当然在父级内），height去掉没影响，但给它加高会变高，毕竟之前已经设置好了display:block;可以设置width和height，如果是行内元素，则高度是由font-size决定，还不明白自己去测试一下，很简单明了，还有种方法，利用before伪类，这个方法很好，但不太实用，如：li:before{height:0;width:0;border-color:transparent#f00;border-width:4px04px4pxsolid;content:"";display:block;position:relative;left:0;top:0;} 伪类before在内容的前面起作用，三角形大小由border-size控制，配合content使用，高度宽度需设置0看不见，只见三角形，注意content不能有内容
（7）：已知高度在div中水平垂直居中：第一种，在没有固定宽高后使用vertical:middle;就可；第二种，在图片宽高固定的情况下，使用绝对定位；在父级使用相对后，图片使用absolute后left:50%，right:50%，margin:-100px00-100px;width:200px;height:200px;
（8）：著名的ie6下浏览器的浮动双边距的bug，当设置了数个块级元素进行浮动时，如果使用了margin左右边距属性，且方向一致时，会出现双边距的bug，父级元素下的第一个子元素margin出现双边距，解决方法，设置display:inline）;或许有人担心设置了display类型会把浮动元素更改了，在此说明下，浮动元素它是脱离了文本流，但还是在z-index：0这一层，对浮动元素设置display类型是无效的，absolute也是；也可以单独对出现问题的那个元素设置display类型，为什么父级下的第二个元素不会出现双边距的问题，因为每个浮动元素都有相对应的对象，第一个其对应的是父元素，第二个对应的是第一个对象后。 《float与absolute会隐性的改变display类型，变成display：inline-block；》
（9）：在ie浏览器与ff浏览器之间，对于border的解释是不同的，比如说在ie中设置了一个height:100px;border:5px#000solid;的黑色边框，那么它的计算方式是这样的，90+5+5=100；
说明连边框的高度一同算就去了，但在firefox中，只有内容的高度才是100px;边框所占得高度是另外的，可看做firefox的height是110像素，如果这个父div里有子元素且有border的话，实现子元素随父级高度变化而变化，如果设置子级height：100%，那么在ie中显示的是正常的，但在firefox中可就不正常了，子级的底部会超过父级，我想这是因为firefox对border解释不同而造成的，想想，firefox中的父div的高度内容才是100ppx;border多出的部分不算进去，而在父div里面加了个子级，而且有border，按照firefox的解释，会有100px的内容和多出的border-size，子级上面多出的border在父border里，那么子级的内容就会往下面挤，从而出现挤出底部超线的情况。
（关于父级自适应高度的情况，这里做下简写，当父级div没有设置height的情况下，且子元素都是标准流的话，父div的高度随子级的变化而变化，如果父级设置高度的话，在ie中还是可以自适应，随内容变化而变化(不符合标准)，但在firefox中可不行，设置多少高度就是多少高度，除非你使用overflow属性影藏超出部分，（解：所谓标准流即可理解不是浮动元素，它的物理空间存在它的位置。）而无高度父div下的子级全是浮动元素的话，即脱离文本流的元素，这时候自适应高度不起作用，解决方法设置clear清除浮动，或者把父元素也设置了浮动，这样就可自适应了）
（10）：关于hack的写法：有时候布局的时候难免会有一些兼容性的问题，这时候可以采用hack来解决，
有三种用法：
(1)条件hack：一般是六种选情况 if指定IE <!--[if IE]> <![endif]-->
指定IE6以上的版本：<!-- [if gt IE6]> <![[endif]-->
指定IE7或以上的版本：<!--[if gte IE7]> <![endif]-->
指定IE7或以下的版本：<!--[if lt IE7]> <![endif]-->
指定IE7或更以下版本： <!--[if lte IE7]> <![]endif]-->
除了指定IE7无效其余有效：<!--[if !ie7]> <![endif]-->
(2)属性级hack：
_下划线，如:_display:inline;ie6才能识别，
*米符号，如*display:inline；ie7识别*，，但ie6也识别*
\9 ie6，ie7，ie8都可识别！！！
\0 ie8可识别！
;
IE浏览器都可识别+，，其余浏览器不识别！！！！
(3)选择级别的hack:
*html.class{...} //于ie6或更小版本
*+html.class{...} 。*first-child+html //ie7
.class:lang (zn-ch){...} //ie8或不是ie浏览器
.class:nth-child(1){...} //ie9或不是ie浏览器
其他浏览器只需执行标准即可 《！--慎用--》
要有顺序的来，标准写在最前面，ie7中间，ie6最后
|
(11)：css命名（常用）：
内容：content/container 导航：nav 侧栏：sidebar 登陆：login
栏目：column 标志：logo 页面主体：main
广告：banner 热点：hot 新闻：news
下载：download 子导航：subnav 菜单：menu
搜索：search 页脚：footer 滚动：scroll
版权：copyright 友情链接：friendlink 子菜单：submenu
内容：content 标签页：tab 文章列表：list
注册：regsiter 提示信息：msg 小技巧：tips
加入：joinus 栏目标题：title 指南：guild
服务：service 状态：status 投票：vote
尾：footer 合作伙伴：partner 登录条：loginbar
页面外围控制整体布局宽度：wrapper 左右中：left right center
（12）：制作网页时常用的三种图片格式：
1、GIF<图形交换格式>（只支持256色以内的图像，由于是采用无压缩存储，所以更适用于线条，图标等，可以生成较小文件，且可支持transparent,，最大特点可制作动画）
3、jpg（对于颜色十分丰富的图片，采用有损压缩，从而使文件格式更小，却不怎么失去品质，它支持有上百万的颜色，所以更实用于拍摄作品，照片，banner等）
2、png（集gif、jpg特点于一身，且可支持透明，一些颜色较少，且单一，颜色层次分明的情况下使用,如图标，按钮等，对于ie6来说，支持png-8的索引颜色的透明图片，并不支持png-24格式，）
以下是我查询到的资料：
图片文章
GIF意为Graphics Interchange format（图形交换格式），GIF图片的扩展名是gif。现在所有的图形浏览器都支持GIF格式，而且有的图形浏览器只熟悉GIF格式。GIF是一种索引颜色格 式，在颜色数很少的情况下，产生的文件极小，它的优点主要有：
1.GIF格式支持背景透明。GIF图片假如背景色设置为透明，它将与浏览器背景相结合，生成非矩形的图片。
2.GIF格式支持动画。在Flash动画出现之前，GIF动画可以说是网页中唯一的动画形式。GIF格式可以将单帧的图象组合起来，然后轮流播放每一帧而成为动画。虽然并不是所有的图形浏览器都支持GIF动画，但是最新的图形浏览器都已经支持GIF动画。
3.GIF格式支持图形渐进。渐进是指图片渐渐显示在屏幕上，渐进图片将比非渐进图片更快地出现在屏幕上，可以让访问者更快地知道图片的概貌。
4.GIF格式支持无损压缩。无损压缩是不损失图片细节而压缩图片的有效方法，由于GIF格式采用无损压缩，所以它更适合于线条、图标和图 纸。
GIF 格式的缺点同样相当明显。索引颜色是历史遗留的产物，在DOS下的老游戏几乎无一例外的采用索引颜色，这种格式本来早就应该淘汰了。但是由于带宽的限制，GIF从DOS时代红到了Internet时代。GIF这种索引颜色格式最大的缺点就是它只有256种颜色，这对于照片质量的图片是显然不够的。
JPEG 代表Joint Photograhic Experts Group（联合图像专家组），这种格式经常写成JPG，JPG图片的扩展名为jpg。
JPG最主要的优点是能支持上百万种颜色，从而可以用来表现照片。此外，由于JPG图片使用更有效的有损压缩算法，从而使文件长度更小，下载时间更短。有损压缩会放弃图像中的某些细节，以减少文件长度。它的压缩比相当高，使用专门的JPG压缩工具其压缩比可达180：1，而且图像质量从浏览角度来讲质量受损不会太大，这样就大大方便了网络传输和磁盘交换文件。JPG较GIF更适合于照片，因为在照片中损失一些细节不像对艺术线条那么明显。另外，JPG对照片的压缩比例更大，而最后的质量也更好。
但是从长远来看，JPG随着带宽的不断提高和存储介质的发展，它也应该是一种被淘汰的图片格式，因为有损压缩对图像会产生不可恢复的损失。所以经过压缩的JPG的图片一般不适合打印，在备份重要图片时也最好不要使用JPG。还有，JPG也不如GIF图像那么灵活，它不支持图形渐进、背景透明，更不支持动画。
PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG's Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。
PNG文件格式保留GIF文件格式的下列特性：
使用彩色查找表或者叫做调色板可支持256种颜色的彩色图像。
流式读/写性能(streamability)：图像文件格式答应连续读出和写入图像数据
这个特性很适合于在通信过程中生成和显示图像。
逐次逼近显示(progressive display)：这种特性可使在通信链路上传输图像文件的同时就在终端上显示图像，把整个轮廓显示出来之后逐步显示图像的细节，也就是先用低分辨率显示图像，然后逐步提高它的分辨率。
透明性(transparency)：这个性能可使图像中某些部分不显示出来，用来创建一些有特色的图像。
辅助信息(ancillary information)：这个特性可用来在图像文件中存储一些文本注释信息。
独立于计算机软硬件环境。
使用无损压缩。
PNG文件格式中要增加下列GIF文件格式所没有的特性：
每个像素为48位的真彩色图像。
每个像素为16位的灰度图像。
可为灰度图和真彩色图添加α通道。
添加图像的γ信息。
使用循环冗余码(cyclic redundancy code，CRC)检测损害的文件。
加快图像显示的逐次逼近显示方式。
标准的读/写工具包。
可在一个文件中存储多幅图像。
文件结构
总结：
这三种格式各有优缺点，其中PNG优点多多。虽然普及得还很一般，但是其非凡的优越性已经让我们对其产生非常大的爱好。至少我现在很喜欢这种格式。当然了对于制作页面的制作人员来说，页面总体积的大小那就是竞争力。所以我们还是必需要注重这三种格式的混合使用。那以什么时候用GIF什么时候用PNG 什么时候用JPG呢？我们下面一一来分析。
在实际的工作中，我发现一般的纯色的图形，比如一些小图标、平铺背景其中的色彩比较少，那么作为GIF格式虽然只有256种色彩，但是应对这种类型的图片那一定是非常的合适的。当然了，不排除有一些非凡的小图标色彩的丰富性，但是相信作为小图标其色彩有点损失也不会影响到整体的视觉效果，所以GIF 的适用范围是：小图标、平铺背景等色彩比较少的小型图片。
那么大图片又怎么选择呢，首先我们先了解一下JPG，我们使用Photoshop的朋友都知道，在最后导出图片时会有一个地方让我们选择这个JPG 图片的图片品质，100%是表示无压缩，当我们拿同一张图片导出不同的品质图片对比时我们发现品质低的很明显会比品质高的脏了很多，这样照片看起来就很不好，当然我们也发现这种情况在偏大色块的图片中犹为突出。所以比如天空、人像。非凡人像面部就会出现很难看的黑斑。当然假如对于照片质量要求不严格可以使用JPG并且降低品质。但是不适用于背景、小图标。
我个人觉得PNG是介于GIF与高品质JPG之间的一种选择，假如是简纯的小图标，PNG会比GIF大这么一点，但是品质上是差不多的。假如是普通的图片，那么PNG还是要比高品质的JPG要小一点的，但是PNG还是有点色彩损失的。不过假如图片不放大基本上看不出来。我们做页面基本上不是为了让人放大了挑刺。所以PNG也就是介于中间的一种选择。当然了，PNG还有一个很伟大的优点，那就是透明，虽然IE6之前还不支持这一特性。GIF也有透明，但是GIF只支持绝对的透明，不支持半透明，所以GIF的图片的边缘常会有一圈的白色的小点。而PNG就没有这些问题，随着时代的发展当IE6成为历史的时候我想我们就可以看到PNG的真实的威力。
当然了有一种非凡的情况可能会很非凡，那就是背景图片与前景图片的切合处，这种地方需要色彩结构一致才能产生良好的视觉效果。那么这种时候注重尽可能的不要使用不同格式混合使用。
个人总结：
gif适用于颜色较少，特点支持完全透明，半透明不支持，背景平铺的图片，小图标 。 jpg实用于颜色丰富，可以根据选择压缩，最高百分100无压缩，最大特点支持透明。 png用于颜色单一，较少以颜色的图片。
（13）去掉链接后出现的虚线框，设置outline:none;即可
（14）：以图换字， 介绍两种方法，第一种是利用display：none或visibility:hidden的方法，套个span即可，display:none生成的元素不显示框，以及框和内容都将不显示，不占据文本流的空间
举个栗子：<div class="url"><span>seo搜索</span></div> css: .url{background:url(...);width:100px;height:100px;} .url span{display:none}
必须加span元素，之前说过，display:none的作用不仅使内容消失，容器也会消失，如果不套一个标签，只给url加none，那背景图就看不到了，但这种方法只适用没有链接背景图，如果有链接就必须换一种方式了， 栗子：<div class="url"><a href=""><span>seo搜索</span></a> css: .url a{background:url(..);height:100px;width:100px;display:block;} .url a span{display:none;} 这种方式是把a标签转成块级元素，如果不转，那么它的内容就没了，a是行内元素，它的高度是根据内容多少而决定的，而内容消失了，那么就没有了A的链接
第二种 ，使用小字体font-size:0px;color:rgba(0,0,0,0);line-height:0;
还有种：display:block;width:0;height:0;overflow:hidden;
（15）路径问题：绝对路径，在本地里使用绝对的路径，如c:demo/index.html 这就是绝对路径，但是呢，绝对路径在本地里很犀利，在别人的电脑里就不行了，所以这时候我们要使用相对路径， 如 image/01.jpg 这是图片文件夹与网页在同一级别才会有效，但是假如网页在一个文件夹里，而这个文件夹与图片的文件夹是同一级，这时候想要使用到图片，那网页得往上跳一级才能看到图片文件夹，列如: ../image/01.jpg;即可。
（16）关于优先级的问题，一般情况下同样的样式，最后的样式会覆盖掉上一级的样式，但是使用！improtant就不同了，它会优先执行！improtant，因为！improtant的权重是最大的，大于一切规则，但使用这种方法时需要谨慎使用，假如当访问者更改了页面的样式，这个样式会自动存取到本地中，那么本地的样式取代于制作者的样式，而！improtant是最大规则，取代了本地样式，会出现只有！improtant的样式，会出问题滴。!improtant除了ie6不认识外，其余浏览器都认识。
普及一下：（子选择，如span{..}权重为1，类选择，如.span{...}权重为10；id选择，如#span{...}权重为100；以此类推，span img{...}权重1+1；span.css{...}权重10+1；#span.css{...}权重100+10；）
（17）有时候我们对一个div设置padding时，会莫名其妙的width或height增大了，(标准版)css里box模型很奇怪，但又没办法，或者你可以算准了width值，列如width:80px;padding10px;这样式可以相互抵消了，也可以使用css3属性，box-sizing:border-box属性，改变盒模型方式，这样它的padding值就在width里了，注：需要加扩展名的都要加，不同的内核浏览器加不同的扩展名！
（18）有时候我们设置超链接时，想让一个链接以另一窗口打开，就在A标签里设置好target="_blank"就行了，本页target="_self"但一旦超链接变多了，逐一设置显得很麻烦，可以使用<base target="_blank">在head里设置，统一链接显示方式，是很方便，但规范不同的情况下就会出现不同的错误，在宽松的DTD规范里 xhtml1.0 transitional是可行的，但在严谨的规范中是错误的，可以设置rel="external"需要js配合才行。
(19)超出文本以省略号显示，需要设置overflow:hidden先把溢出部分隐藏，前提得有width，再white-space:nowrap强制在一行显示，最后关键部分text-overflow:ellipsis溢出部分以省略号显示
（20）一行文本自动换行word-wrap:break-word，，，强制一行文本在一行显示white-space:nowrap;
1.word-break:break-all;只对英文起作用，以字母作为换行依据
2. word-wrap:break-word;只对英文起作用，以单词作为换行依据
3.{white-space:pre-wrap;只对中文起作用，强制换行
4.{white-space:nowrap;强制不换行，都起作用
（21）关于在ie6中的产生的3px的问题，如果两个块级元素，左边的浮动了，而右边的没有浮动，那么就会产生3像素的问题，目前知道的解决方法就是给右边的加上float
（22）在ie6中不能定义1像素的容器，这是默认的行高的造成的，解决方法给其加overflow：hidden、line-height:1px、zoom: 0.8
（23）纯css制作的圆角，兼容全部，直接上代码：b{display:blcok;height:1px;overflow:hidden;background:#f6f6f6;}这个目的是让每个b元素的背景为#f6f6f6，这样才能给他设置border，
.top1{width:300px;background:#ccc;margin:0 4px;}宽度为300，设置margin值控制角度，
.top2{width:300px;border-left:1px #ccc solid;border-right:1px #ccc solid;margin:0 3px;}第二角度，
.top3{width:302px;border-left:1px #ccc solid;border-right:1px #ccc solid;margin:0 2px;}第三角度，
.top4{width:304px;border-left:1px #ccc solid;border-right:1px #ccc solid;margin:0 1px;height:2px;}第四角度，height:2px过渡
下面给他content，.text-box{width:306px;height:100px;background:#f6f6f6;border-left:1px #ccc solid;border-right:1px #ccc solid;};中间部分，
这个方式太繁琐了，我们可以简写一下：
b{display:block;height:1px;background:#f6f6f6;overflow:hidden;}
w300{width:300px;margin:0 4px;background:#ccc;}
w300-2{width:300px;margin:0 3px;}
w302{width:302px;margin:0 2px;}
w304{width:304px;margin:0 1px;height:2px;}
b-l-r{border-left:1px #ccc solid;border-right:1px #ccc solid;}
.text-box{width:306px;height:100px;background:#f6f6f6;} 代码量好像是少了点，多用组合，少用继承-继开发修炼之道
（24）：有时候发现hover的伪类链接后就没有hover的样式了，你可以看看l v h a顺序有没有写错。love hate
(25)：发现个有趣的html5属性，x-webkit-speech写在input文本框里，即可出现小话筒样的语音识别图标，只可惜这个只有webkit核心的浏览器才能支持
placeholder=""可写入文本框内，输入内容自动消失文本内容,,（不实用）
（26）：伪类：focus当元素获得焦点是出现样式，如div:focus{background:#f00;},只有光标点击div块时，div变样式， 它的作用类似于:active（ie6 ie7不支持）
（27）：ie浏览器支持块级转inline-block；巧用haslayout；在ie中，其实是不认识display:inline-block属性的，之所以行内元素设置了此属性会有效，因为那是行内元素，只有行内元素设置了display：inline-block才会触发haslayout,从而拥有它的特性，但块级元素设置此属性是无用的！块级不会自动触发haslayout,解决方法有两个，一：先设置display:inline-block 再设置display:inline,让块级呈现内联，这样的话haslayout不会消失，
二：先设置好其他浏览器认识的display:inline-block;然后利用hack 如 <display:inline-block;_display:inline;_zoom:1;>这样的话只有ie把块级元素转行内，然后zoom：1触发haslayout （zoom相当于display：inline-block）从而实现行内元素触发haslayout拥有块级特性。
（28）有个关于列表的特性，ul列表如果不重置他，那么ul就会有默认的padding值，而且也有list-style，而dd呢则是有默认的margin值，而浮动li里面么如果包涵a或其他元素，在ie6里则是会触发haslayout，会有列表横占一行的特性，解决方法就是给a元素也加上浮动，但是a加上浮动的话，则会出现阶梯状的bug，解决方法就是给li加上display：inline