DIV+CSS很实用的20个技巧

CSS总结div中的内容垂直居中的五种⽅法⽂章⽬录⼀、⾏⾼（line-height）法如果要垂直居中的只有⼀⾏或⼏个⽂字，那它的制作最为简单，只要让⽂字的⾏⾼和容器的⾼度相同即可，⽐如：p { height:30px; line-height:30px; width:100px; overflow:hidden; }这段代码可以达到让⽂字在段落中垂直居中的效果。

⼆、内边距（padding）法另⼀种⽅法和⾏⾼法很相似，它同样适合⼀⾏或⼏⾏⽂字垂直居中，原理就是利⽤padding将内容垂直居中，⽐如：p { padding:20px 0; }这段代码的效果和line-height法差不多。

三、模拟表格法将容器设置为display:table，然后将⼦元素也就是要垂直居中显⽰的元素设置为display:table-cell，然后加上vertical-align:middle来实现。

html结构如下：<div id="wrapper"><div id="cell"><p>测试垂直居中效果测试垂直居中效果</p><p>测试垂直居中效果测试垂直居中效果</p></div></div>css代码：#wrapper {display:table;width:300px;height:300px;background:#000;margin:0 auto;color:red;}#cell{display:table-cell; vertical-align:middle;}实现如图所⽰：遗憾的是IE7及以下不⽀持。

四、CSS3的transform来实现css代码如下：position: relative;top:50%;transform:translateY(-50%);}.center-horizontal{position: relative;left:50%;transform:translateX(-50%);}五：css3的box⽅法实现⽔平垂直居中html代码：<div class="center"><div class="text"><p>我是多⾏⽂字</p><p>我是多⾏⽂字</p><p>我是多⾏⽂字</p></div></div>css代码：.center {width: 300px;height: 200px;padding: 10px;border: 1px solid #ccc;background:#000;color:#fff;margin: 20px auto;display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;display: -moz-box;-moz-box-orient: horizontal;-moz-box-pack: center;-moz-box-align: center;display: -o-box;-o-box-orient: horizontal;-o-box-pack: center;-o-box-align: center;display: -ms-box;-ms-box-orient: horizontal;-ms-box-pack: center;-ms-box-align: center;display: box;box-orient: horizontal;box-pack: center;box-align: center;}结果如图：六：flex布局（2018/04/17补充）html代码：<div><p>我是多⾏⽂字我是多⾏⽂字我是多⾏⽂字我是多⾏⽂字</p> <p>我是多⾏⽂字我是多⾏⽂字我是多⾏⽂字我是多⾏⽂字</p> </div></div>CSS代码：.flex{/*flex 布局*/display: flex;/*实现垂直居中*/align-items: center;/*实现⽔平居中*/justify-content: center;text-align: justify;width:200px;height:200px;background: #000;margin:0 auto;color:#fff;}实现效果：。

关于DIV布局的技巧二、DIV+CSS 网页布局的分类1、一列固定宽度一列布局是所有布局的基础，也是最简单的布局方式，用DIV+CSS 布局的代码如下：XHTML 代码：一列固定宽度CSS 代码：#main1 { width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; }2、一列自适应宽度自适应的布局能够根据浏览器窗口的大小自动改变其宽度和高度值，是网页设计中一种非常灵活的布局形式，用DIV+CSS 布局的代码如下：XHTML 代码：一列自适应宽度CSS 代码：#main2 { width: 70%; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; }3、一列固定宽度居中页面整体居中是网页布局中最常见到形式，在传统的表格布局中，使用TABLE 的align="center" 属性来实现，在DIV+CSS 布局中采用如下代码来实现：XHTML 代码：一列自适应宽度CSS 代码：DIV+CSS 网页布局方法探析。

如今的网页设计考虑得更多的是搜索引擎以及给用户带来更多的便利，传统的TABLE 网页布局由于其庞大的HTML 代码，使得其在搜索引擎方面显得有些无能为力，而用DIV+CSS 进行网页布局具有代码精简的优点使得其在这方面又体现出更多的优势。

但是又由于CSS 对不同浏览器存在兼容性问题，所以对于初学者来说，在使用DIV+CSS 进行网页布局过程中可能会遇到各种问题，本文就给大家探讨几点DIV+CSS 布局的技巧。

4、二列固定宽度在有一列固定宽度布局的基础上，实现二列固定宽度也就很简单了，用DIV+CSS 布局的代码如下：XHTML 代码：左侧右侧CSS 代码：#left { width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } #right{ width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; }5、二列固定宽度居中从一列固定宽度居中的布局方法中，我们就不难完成二列固定宽度居中了，可以使用一个居中的DIV 作为容器，将二列分栏的DIV 放置在容器中，从而就实现二列的居中显示。

CSS2.0中最常用的18条技巧应用Div+CSS网页面局，常常会遇到的CSS问题。

如果不能很好的控制CSS，影响CSS的效率发挥。

这里，我们看一下CSS常用技巧一、使用css缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。

用CSS缩写给你的网站加速：Web网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。

影响速度的因素有很多种，包括Web服务器的速度、访问者的Internet 连接情况，以及浏览器必须下载的文件大小。

尽管你无法控制服务器和连接的速度，但是你可以控制构成网站Web页面的文件大小。

为了让网站能够更快，Web的建设者都会按常规地压缩和优化网站上的每一个图像文件，这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量。

由于CSS样式表是纯文本文件，和图像相比相对较小，所以Web建设者很少考虑采取措施减少其CSS样式表文件的大小。

但是，通过使用CSS缩写以及其他的一些简单技巧，你可以在很大程度上减少样式表的大小。

在我对自己样式表的一次非正式的特别测试中，我把文件的大小降低了大约25-50%。

使用CSS的缩写性质：CSS的缩写性质(shorthand property)是一些专用的性质名，用来代替多个相关性质的集合。

例如，间隙性质(padding property)是顶部间隙(padding-top)、右侧间隙(padding-right)、底部间隙(padding-bottom)和左侧间隙(padding-left)的缩写。

使用速写性质让你能够把多个性质/属性对(property/attribute pair)压缩进CSS样式表的一行代码里。

具体内容请浏览：常用CSS缩写语法总结CSS教程11、CSS的属性缩写CSS常用缩写语法CSS中级教程快捷属性缩写二、明确定义单位，除非值为0。

忘记定义尺寸的单位是CSS新手普遍的错误。

在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。

本文向大家描述一下CSS+DIV排版技术的使用，主要包括纵向排列元素，横向排列元素，用列表排列元素和用绝对坐标定位元素等内容，用DIV把元素定义为块对象，用CSS 设置对象的格式和位置。

几种常用CSS+DIV排版技术用DIV把元素定义为块对象，用CSS设置对象的格式和位置。

CSS+DIV排版方式是目前应用很广的排版方式，它的使用非常灵活，可制作非常复杂的版面。

以下是几种常用的CSS+DIV排版技术。

纵向排列元素此类CSS+DIV排版技术用<div>标签定义块对象，由于<div>标签本身有换行作用，各元素自然排成一列。

用CSS的margin属性设置对象间的距离，用padding属性调整对象的宽度和高度。

举例：<styletypestyletype="text/css">#menu{width:100px。

font-size:15px。

}.dd{border:1pxdotted#0000FF。

padding-top:5px。

padding-bottom:5px。

padding-left:5px。

margin-bottom:3px。

}</style><dividdivid="menu"><divclassdivclass="dd">HTML</div><divclassdivclass="dd">CSS</div><divclassdivclass="dd">JavaScript</div></div>显示效果为：横向排列元素用<div>标签定义块对象，用CSS的float属性设置对象的浮动，此为CSS+DIV排版中的横向排列。

举例：<styletypestyletype="text/css">#box{height:110px。

DIV+CSS布局使⽤的个⼈⼼得⽹站制作离不开⽹页布局就是说DIV+CSS都会涉及到的，以下是⼯作中总结的⼀些技巧，留下备⽤，也可以学习。

1、ul：默认的ul的margin和padding不是0，如果在导航中⽤到了左浮动的li，往往会把外部的div撑⼤，导致页⾯变形，改成：ul{margin:0px; padding:0px;}2、img：（1）这⾥牵涉的不同浏览器的问题，ie6⾥显⽰的图⽚height总是要⼤于准确值，这⾥就需要我们记住下⾯这⼀点 img{ display：block}；（2）页⾯中最好不要⽤⼤块背景，能平铺的要平铺，否则加载起来会很慢，也不利于以后的优化和扩展，当然也有些⼤的⽹站，现在都尽量把背景统⼀放到⼀张图⽚上，⽤background-postion来取得背景。

（3）最好的格式就是gif格式，即确保了背景透明，在ie6中⼜不会有阴影，有时gif图⽚会有锯齿，这就需要我们保存成web格式，设置⼀下matter，matter的值⽤背景颜⾊的值越相近越好。

3、overflow：有时⼀些公司的注册协议都是很长，这就⽤到了overflow，可以把div的style⾥加上这个：overflow：auto4、float：有时候⼀些div会挤到页⾯的上⽅，这⾥可能就是浮动引起的，可以加上clear：both。

5、div：height等于1px的div，在ie6中可能并不是1px，在这个div的style⾥加上font-size：1px;这样就ok了。

6、id和class：当⼀个样式在页⾯中多次使⽤时，不要⽤id，要⽤class，要使⽤js的时候，样式最好不要⽤id，因为id要留给js使⽤。

7，link：.link：link{}、.link：visited{}、.link：hover{}、.link：active{}。

有⼀点，visited与hover的顺序⼀定不能倒换，否则ie6中会⼤⼤的问题。

实训4 div+css综合运用一、背景介绍在Web开发领域，div和css是两个基础、重要的概念。

div是HTML中的一个标签，用来划分网页的结构和布局；而css是一种样式表语言，用于描述HTML文档的呈现方式。

实训4中涉及到了div 和css的综合运用，旨在帮助学习者掌握这两个技术，并且能够灵活运用于实际项目中。

二、整体评估在实训4中，学习者需要通过实际操作，完成一个包含头部、导航、内容区域和底部的网页布局。

这样的任务要求对div和css的综合运用提出了很高的要求，需要考虑到页面的整体结构、样式和布局。

在评估过程中，我发现学习者需要注意以下几点：1. 结构清晰：div标签应该按照页面的结构和布局来合理地进行划分和嵌套，以确保页面结构清晰、层次分明。

2. 样式统一：css样式应该对整个页面起到统一、协调的作用，保证整体的美观和一致性。

3. 响应式布局：在综合运用中，需要考虑到不同设备上的显示效果，保证页面能够适配不同的屏幕尺寸。

4. 创新设计：除了基本的布局要求，学习者还可以通过css的特效和动画等进行创新设计，提升页面的互动性和吸引力。

三、文章撰写在本次实训4中，我们深入学习了div和css的综合运用，从理论到实践，都有了全面的了解和掌握。

通过对div的合理划分和css的样式设置，我们可以轻松实现一个精美、完善的网页布局。

在整个过程中，我对div和css的重要性有了更深的理解。

div作为网页设计中最基础的组件，它的合理划分和嵌套对于页面的结构和布局起着至关重要的作用。

通过div的灵活运用，我们可以将页面分割成不同的模块，从而更好地呈现页面内容，提高用户的浏览体验。

css则是页面样式的设计师，通过设置各种样式属性，我们可以实现页面的美化和个性化定制。

通过css的盒子模型、浮动布局、弹性布局等特性，我们可以完美定制各种不同风格的网页布局。

在综合运用的过程中，我深刻体会到了对div和css的熟练掌握意味着更自由地实现网页设计的愿景。

CSS技巧汇总---div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox...) CSS技巧1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字，就垂直居中了。

缺点是要控制内容不要换行2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。

这是一个ie6都存在的bug。

解决方案是在这个div里面加上display:inline;例如：<#div id=”imfloat”>相应的css为#IamFloat{float:left;margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}3.浮动ie产生的双倍距离#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px 的距离display:inline; //使浮动忽略}这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);#box{ display:block; //可以为内嵌元素模拟为块元素display:inline; //实现同一行排列的效果diplay:table;4 IE与宽度和高度的问题IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。

这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。

要解决这个问题，可以这样：#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto;min-width: 80px; min-height: 35px;}5.页面的最小宽度min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。

css实现收缩按钮嵌入div边沿的方法在网页设计中，我们经常需要添加收缩按钮来帮助用户控制页面元素的显示与隐藏，而将这些按钮嵌入div边沿则可以提高页面的美观性和用户体验。

在本文中，我将介绍一些简单且常用的CSS技巧，帮助你实现这一效果。

1.使用伪元素最常见的方法是使用伪元素::before或::after创建一个虚拟元素，然后设置其样式与位置来实现按钮的嵌入。

例如：```css/*创建一个虚拟元素*/div::before {content: "";position: absolute;width: 20px; /*按钮宽度*/height: 20px; /*按钮高度*/background-color: #ccc; /*按钮颜色*/text-align: center;line-height: 20px; /*居中显示按钮内容*/ top: 50%; /*垂直居中*/transform: translateY(-50%); /*平移*/right: -20px; /*按钮距离div右边沿的距离*/ }/*当鼠标悬停在div上时，改变按钮的样式*/ div:hover::before {background-color: #555; /*按钮悬停状态颜色*/ color: #fff; /*按钮悬停状态文字颜色*/ cursor: pointer; /*鼠标悬停样式改为手型*/}在上述代码中，我们使用`::before`伪元素创建了一个虚拟元素，在div的右边沿嵌入一个按钮。

我们可以通过调整`right`属性的值来控制按钮嵌入的距离，通过调整`width`和`height`属性的值来调整按钮的大小。

而通过使用`transform`属性和`top`属性，我们可以将按钮垂直居中。

2.使用绝对定位除了使用伪元素外，我们还可以通过设置div的`position`为`relative`，然后在div内部添加一个按钮，并将其`position`设置为`absolute`，利用绝对定位将按钮嵌入div边沿。

1、善用css缩写可以减少页面檔大小，提高下载速度，同时使代码简洁可读。

如：div{border-top:1px solid #cccccc;border-left:1px solid #cccccc;border-right:1px soli #cccccc;border-bottom:1px solid #cccccc;}可以写为p{border:1px solid #cccccc}再如：div{margin-top:10px;margin-right:20px;margin-bottom:30px;margin-left:40px;}可以改写为：/*注意上、右、下、左的书写顺序*/div{margin:10px 20px 30px 40px}/*注意，数值与单位不能有空格，每个值之间用空格隔开*/(详细请参考：css2参考手册、常用css缩写总结)2、可以同时为一个html元素的class属性设定多个规则(多重class定义)。

通常我们写法为：<p class=”a”></p>实际上我们可以为p元素指定多个规则，如：CSS：.a{…}.b{….}HTML：<p class="a b">该元素同时包括a和b中设定的样式</p>注意：多个规则之间用空格分开。

3、明确定义单位，除非值为0忘记定义尺寸是css初学者新手普遍存在的问题。

在html我们可以写width=”100”，但在css中应该给出一个准确的单位。

如：width:100px;height:50px;font-size:9pt ，0值除外，因为不论对于任何单位。

0值的大小都是相等的。

注意：不要在数值和单位之间加空格。

4、区分大小写在xhtml中，css定义的元素名称是区分大小写的，class和id的值在html和xhtml中也是区分大小写的，所以为了避免错误，推荐一律使用小写。

DIV实用技巧范文1.基本布局在开始使用DIV之前，建议先了解一些基本的布局属性。

可以使用CSS样式设置DIV的宽度、高度、边距和内边距等属性，以便更好地控制和布局网页的不同部分。

2.CSS清除浮动当在网页中使用浮动元素时，可能会遇到一些布局问题，如浮动元素不占用父元素的空间。

这时可以使用CSS的“clear”属性清除浮动。

通过在父元素的CSS样式中设置“clear:both;”，可以解决这个问题。

3.DIV的边框样式可以使用CSS样式为DIV添加边框，并且可以控制边框的颜色、宽度和样式。

例如，使用“border”属性可以设置DIV的边框样式。

4.悬停效果使用DIV可以轻松实现一些悬停效果，如改变背景颜色、字体颜色或添加阴影效果等。

通过为DIV设定:hover伪类，并在CSS样式中添加相应的属性，可以达到悬停效果。

5.定位技巧DIV可以实现绝对和相对定位，可以通过设置CSS的“position”属性来控制DIV的位置。

绝对定位可以使用“top”和“left”属性来精确定位DIV，而相对定位可以使用“top”和“left”属性来相对于其正常位置移动DIV。

6.创建响应式布局使用DIV可以轻松地创建响应式布局，使网页在不同设备和屏幕尺寸上都能正确显示。

可以使用CSS媒体查询来检测和适应不同的屏幕大小，并根据需要改变DIV的布局和样式。

7.创造层叠效果DIV可以通过使用CSS属性“z-index”来实现层叠效果，使一个DIV 覆盖另一个DIV。

可以通过调整z-index的值来改变DIV的堆叠顺序，从而实现不同的层叠效果。

8.实现背景图像DIV可以作为一个容器来显示背景图像。

通过设置CSS的“background-image”属性，并指定图像的URL，可以将图像设置为DIV 的背景。

9.使用DIV容器使用DIV容器可以将网页中的内容分组，并且可以通过设置CSS样式来控制容器的大小和位置。

使用DIV容器可以更好地组织和管理网页的布局，使其更易于维护和修改。

div文字中段落间距div元素是网页开发中常用的容器元素，可以用来包含文字、图片、视频等各种内容。

在div元素中，段落间距是一个常见的问题，特别是当我们希望调整段落间距时。

以下是一些关于调整div文字中段落间距的方法和技巧。

1. 使用CSS样式表可以通过使用CSS样式表来调整div文字中段落间距。

在样式表中，可以使用margin属性来设置段落间距。

例如，可以使用下面的样式来设置段落间距为20像素：div p {margin-bottom: 20px;}这个样式将会把所有div元素中的段落的底部边距设置为20像素。

2. 使用line-height属性除了使用margin属性外，我们还可以使用line-height属性来调整段落间距。

line-height属性设置行高，而行高的大小会影响段落之间的距离。

例如，可以使用下面的样式来设置行高为1.5：div p {line-height: 1.5;}这个样式将会把所有div元素中的段落的行高设置为1.5倍的字号大小。

3. 使用空的p元素有时候，我们可能需要在div元素中插入一些空行来调整段落间距。

这时候，可以使用空的p元素来实现。

例如，可以使用下面的代码来在两个段落之间插入一个空行：<div><p>这是第一个段落。

</p><p></p><p>这是第二个段落。

</p></div>这个代码将会在第一个段落和第二个段落之间插入一个空行，从而实现调整段落间距的效果。

总结以上是一些关于调整div文字中段落间距的方法和技巧。

无论是使用margin属性、line-height属性还是空的p元素，都可以帮助我们在网页开发中实现段落间距的调整。

div+css 10种方法在HTML 和CSS 中，有很多方法可以实现相同的效果。

以下是其中一些常见的方法，用于实现常见的页面布局：1. 流式布局（Fluid Layout）：使用百分比宽度、max-width 和相对定位等技术，使得网页可以根据浏览器窗口大小进行动态调整，适应不同的屏幕尺寸。

2. 弹性盒子布局（Flexbox Layout）：使用CSS3 弹性盒子模型，通过flex 容器和flex 项目的属性设置，实现灵活的页面布局。

3. 网格布局（Grid Layout）：使用CSS3 网格布局，通过定义网格容器和网格项目的属性，实现复杂的页面布局，包括多列布局、响应式设计等。

4. 响应式设计（Responsive Design）：使用媒体查询（Media Queries）和流式布局等技术，根据不同设备的屏幕尺寸和方向，调整页面布局和样式。

5. 浮动布局（Float Layout）：通过设置元素的浮动属性，实现多列布局和页面排版。

6. 定位布局（Positioning Layout）：使用相对定位、绝对定位和固定定位等属性，实现元素的精确定位和重叠布局。

7. 多列布局（Multi-column Layout）：使用CSS3 多列布局属性，实现文字和内容的多列排版。

8. 响应式图片和媒体（Responsive Images and Media）：使用max-width 属性、媒体查询和srcset 属性等技术，实现图片和视频等媒体文件的响应式设计。

9. 字体图标（Icon Fonts）：使用字体图标库，通过设置字体图标的Unicode 编码，实现页面图标的引入和使用。

10. CSS 动画和过渡（CSS Animation and Transition）：使用CSS3 动画和过渡属性，实现页面元素的动态效果和交互。

以上是一些常见的页面布局和样式设计方法，每种方法都有其适用的场景和优缺点。

根据具体的项目需求和设计目标，可以选择合适的布局方法和技术。

div+css⽂字垂直居中解决左侧头像右侧姓名，姓名多换⾏后相对于头像仍居中显⽰在说到这个问题的时候，也许有⼈会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不⽀持我只需做少许的CSS Hack技术就可以啊！所以在这⾥我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign 特性的元素才⽣效，例如表格元素中的<td>、<th>、<caption>等，⽽像<div>、<span>这样的元素是没有valign特性的，因此使⽤vertical-align对它们不起作⽤。

CSS⽹页布局DIV⽔平居中的各种⽅法⼀、单⾏垂直居中如果⼀个容器中只有⼀⾏⽂字，对它实现居中相对⽐较简单，我们只需要设置它的实际⾼度height和所在⾏的⾼度line-height相等即可。

如：（爱摩客）提供的代码⽚段：div {height:25px;line-height:25px;overflow:hidden;}这段代码很简单，后⾯使⽤overflow:hidden的设置是为了防⽌内容超出容器或者产⽣⾃动换⾏，这样就达不到垂直居中效果了。

（爱摩客）提供的代码⽚段：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns=""><head><title> 单⾏⽂字实现垂直居中 </title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">body { font-size:12px;font-family:tahoma;}div {height:25px;line-height:25px;border:1px solid #FF0099;background-color:#FFCCFF;}</style></head><body><div>现在我们要使这段⽂字垂直居中显⽰！</div></body></html>不过在Internet Explorer 6及以下版本中，这和⽅法不⽀持对图⽚设置垂直居中。

div+css布局中常用方法汇总1、让文本框textarea适应内容自动伸缩高度:textarea style="width:300px; overflow-y:visible"2、cursor:pointer 使鼠标变成手形3、word-wrap:break-word;控制是否断词4、word-break:keep-all;控制文本不断行5、最后finally，开始first，虚线dashed，内部里面的inner,外面的外表的outer，注释note，热点hotspot，branding品牌，翻页pageturn，奇数行add6、透明设置：filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;7、解决IE中列表高度显示不正确的问题：*html ul li{float:left;height:1%;}*html ul li{height:1%;}8、a:hover在ie6及以下必须加链接才会有效；.over+javascript用在th:hover 时ie6及以下才能识别。

9、onfocus='this.blur()',onfocus是获得焦点事件，blur是移除焦点，换句话说就是不让这个链接获得焦点10、直接模仿iframe产生滚动条#content{heitht:200px;width:300px;overflow:auto;}11、父li设置了高度，而子li的高度不同时，要先给li：height:auto，在嵌套的列表里，将父li 浮动后，要将子li的float=none，子列表的所有内容都float=none，父ul设置了margin时，子ul要margin=0，因为子会应用父的样式12、在写类名、id名尽量写的权级低一些，从尔避免后面覆盖要写很长13、高度不适应：高度不适应主要发生在两个嵌套的对象中，特别当内层对象使用margin或padding时，外层对象不能自动调节高度。

1.以下是下划线的效果<style>p.one {text-decoration:underline;} /* 下划线效果*/p.two {text-decoration:overline; }/* 顶划线*/p.three {text-decoration:line-through;} /* 中间划线*/p.four {text-decoration:blink;}/*闪烁，只在firefox中可以。

*/p.five{ text-decoration:underline overline line-through; }/* 三种同时,有几种就用空格隔开*/</style>2. 英文字母大小写的方式<style><!--p{ font-size:17px; }p.one{ text-transform:capitalize; } /* 单词首字大写*/p.two{ text-transform:uppercase; } /* 全部大写*/p.three{ text-transform:lowercase; } /* 全部小写*/-->font-family:Arial, Helvetica, sans-serif; /* 字体*/letter-spacing:-2px; /* 字母间距*/</style>3. vertical-align的用法！vertical-align只作用于在同一行内的元素vertical-align声明在很多中文文档中解释是“决定元素在垂直位置的显示”，它有下面几个参数baseline | sub | super | top | text-top | middle | bottom | text-bottom |baseline：与元素的基线对齐。

middle：与元素中部对齐。

sub：字下沉。

super：字上升。