1、前端页面有哪三层构成，分别是什么？作用是什么？
结构层：由 HTML 或 XHTML 之类的标记语言负责创建，仅负责语义的表达。解决了页面“内容是什么”的问题。
表示层：由CSS负责创建，解决了页面“如何显示内容”的问题。
行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。
2、Doctype是什么？如何触发严格模式与混杂模式模式？区分它们有何意义？
Doctype是document type（文档类型）的简写，是用来说明所用的XHTML或HTML是什么版本的。XHTML1.0 提供了三种DTD声明可供选择，分别是：
1、过渡的(Transitional，也叫混杂模式)：要求比较宽松，允许继续使用HTML4.01的标识，完整声明为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tranisitional.dtd">
2、严格的(Strict)：要求严格的DTD，不能使用任何表现层的标识和属性，完整声明为
<!DOCTYPE html PUBLIC "-W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3、框架的(Frameset)：专门针对框架页面设计使用的DTD，如果页面中包含有框架，可以采用DTD，完整声明为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
定义成相应的声明就可以触发相应的模式。
区分的意义是为了最终能达到数据与表现相分离的目地。
3、简述什么叫做标签语义化，优点是什么？
所谓标签语义化，就是指使用正确的标签表达合适的网页内容
语义化的网页的好处，最主要的就是对搜索引擎友好，有了良好的结构和语义网页内容就容易被搜索引擎抓取
4、XHTML与HTML对比？
1、所有的标记都必须要有一个相应的结束标记
例如：<div></div> <p></p> <ul><li></li></ul> <span></span>
如果是单独不成对的标签，在标签最后加一个"/"来关闭它，例如：<br /> <hr /> <img /> <input />
2、所有标签的元素和属性的名字都必须使用小写
错误：<TITLE></TITLE> <BODY></BODY>
正确：<title></title> <body></body>
3、所有的XHTML标记都必须合理嵌套
错误：<p><b></p></b>
正确：<p><b></b></p>
4、所有的属性必须用引号""括起来
错误：<img width=300 />
正确：<img width=”300” />
5、把所有<和&特殊符号用编码表示
空格： <：< >：> &：&
6、给所有属性赋一个值
错误：<input …… checked />
正确：<input …… checked= "checked"/>
7、不要在注释内容中使“--”；“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。
错误：<!--这里是注释-----------这里是注释-->
正确：<!--这里是注释=======这里是注释-->
8、图片必须有说明文字
错误：<img src=”图片路径地址” title=”图片描述” />
正确：<img src=”图片路径地址” title=”图片描述” alt=”图片描述” />
9、XHTML 文档必须拥有一个根元素
所有的 XHTML 元素必须被嵌套于 <html> 根元素中。其余所有的元素均可有子元素。子元素必须是成对的且被嵌套在其父元素之中。基本的文档结构如下：
<html>
<head> ... </head>
<body> ... </body>
</html>
5、行内元素和块级元素各有哪些？
行内元素主要有：<span>、<a>、<b>、<img>、<br>、<button>、<strong>、<textarea>、<select>、<input>
块级元素主要有：<div>、<ul>、<li>、<p>、<fieldset>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hr>、<iframe>、<ol>、<pre>、<table>、<tr>、<td>
6、行内元素和块级元素如何相互转换？
行内元素可以通过display:block转为块级元素。块级元素可以通过display:inline转为行内元素。另外块级元素的margin和padding都正常，行内元素左右maring正常，上下不识别，也就是说不能通过margin-top和margin-bottom来改变行高
7、Display都有哪些属性？
Display的各个属性值
none 此元素不会被显示。（常用）
block 此元素将被显示为块级元素，此元素前后会带有换行符。（常用）
inline 默认。此元素会被显示为一个内联元素，元素前后没有换行符。（常用）
Inline-block 行内块元素。（常用）
list-item 此元素会被作为列表显示
run-in 此元素会根据其内容被作为块级元素或内联元素显示。
compact 此元素会根据其内容被作为块级元素或内联元素显示。
marker
table 此元素会被作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会被作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会被作为一个或多个行的分组来显示（类似<tbody>）。
table-header-group 此元素会被作为一个或多个行的分组来显示（类似<thead>）。
table-footer-group 此元素会被作为一个或多个行的分组来显示（类似<tfoot>）。
table-row 此元素会被作为一个表格行显示（类似<tr>）。
table-column-group 此元素会被作为一个或多个列的分组来显示（类似<colgroup>）。
table-column 此元素会被作为一个单元格列显示（类似<col>）
table-cell 此元素会被作为一个表格单元格显示（类似<td> 和 <th>）
table-caption 此元素会被作为一个表格标题显示（类似<caption>）
8、使用CSS，让一个div消失在视野中；发挥想象力？
1.opacity：0； 2.height:0; 3.设置z-index的值； 4.display:none; 5.visibility:hidden;
9、Display:none与visibility:hidden的区别?
visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。
display: none----将元素的显示设为无，即在网页中不占任何的位置。
10、web标准中定义id与class有什么区别吗
一、web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他；
二、属性的优先级问题 ID 的优先级要高于class,看上面的例子
三、方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.
11、Css盒模型
CSS盒模型：网页设计中的每个元素都是长方形的盒子，如图
盒子本身的大小的计算：
width(即offsetWidth)：width + padding-left + padding-right + border-left + border-right
height(即offsetHeight)：height + padding-top + padding-bottom + border-top + border-bottom
Margin 比较特别，它不会影响盒子本身的大小，但是它会影响和盒子有关的其他内容。
12、CSS引入的方式有哪些?
（1）行内式：在标签的style属性中设置CSS样式，如下：
<div style="300Px; height:300px; background:red;"></div>
（2）内嵌式：将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中：
<style type="text/css">
body{padding:0; margin:0;} </style>
（3）链接式：将一个.css文件引入到HTML文件中，在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件，如下：
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
（4）导入式：将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>
标记中，使用的语法如下：
<style type="text/css">
@import"mystyle.css"; /*此处要注意.css文件的路径*/
</style>
13、link和@import的区别是?
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。
1、老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
2、加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。
3、兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
4、使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
14、CSS选择符有哪些？
CSS选择符主要有以下10类：
1、通配选择符：*{margin:0px;}
2、类型选择符：a{text-decoration:none;}
3、属性选择符：input[type="button"]{padding:5px;}
4、包含选择符：div.code a{text-decoration:none;}
5、子对象选择符：ul.test>li{font-size:14px;}
6、ID选择符：#test {color:red;}
7、类选择符：.test{color:red;}
8、选择符分组：body,ul,li{margin:0px;}
9、伪类及伪对象选择符：div:first-letter{font-size:16px;} a.test:hover{text-decoration:underline;}
10、相邻选择符：li+li{font-weight:bold;}
15、哪些属性可以继承？
CSS可以继承的属性有：
1、文字相关：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing
2、列表相关：list-style-image、list-style-position、list-style-type、list-style
3、颜色相关：color
4、透明度：opacity(opacity的继承有问题，子元素会继承祖元素的opacity，但是无法更改。)
另外，font-size继承的是父元素的大小，而不是比例。line-height当父元素是百分比或px值的时候，子元素跟父元素相同，当父元素是normal或数字的时候，子元素的line-height是子元素的字体大小乘以数字。
16、优先级算法如何计算？
重要性和来源的优先级排序从低到高是：
1、浏览器默认样式
2、用户在浏览器中定义的普通样式（normal规则，不带important规则）
3、开发人员定义的普通样式（ normal规则，不带important规则）
4、开发人员定义特殊样式（带important规则）
5、用户在浏览器中定义特殊样式（带important规则）
另外还有一些原则：
1、相同的样式在CSS规则后添加了!important的优先于没有添加的。
2、CSS规则在文档中出现的顺序后面定义的的优先于前面定义的。
3、内联样式优先于用link引入的样式和页面上<style>里的样式。
17、内联和important哪个优先级高？
important高，DEMO：
<style type="text/css">
.test{padding:10px;border-radius:5px;border:1px solid red!important;}
</style>
<div class="test" style="border:1px solid blue;">Test</div>
18、你如何管理CSS文件、JS与图片？
1、对各个项目中CSS，JS里的稳定的通用代码进行提取，形成公共文件，然后利用CDN等资源进行缓存，减轻服务器压力。
2、去掉JS、CSS里的冗余代码，对代码进行精减。
3、对JS、CSS进行压缩合并，减少请求次数。
4、对页面上的小图标，背景等图片进行合并，减少请求次数。
19、背景图片合并原理是什么？
利用background-image；background- repeat；background-position； 组合来进行背景图片的定位
20、合并背景图片的优缺点？
优点：1、减少网页的HTTP请求次数，从而提高页面的性能；2、解决了给图片命名的困扰；3、更换风格方便
缺点：1、合并图片的时候比较麻烦，需要进行合理的排版留出合理的空间；2、开发的时候比较麻烦，需要准确测量每一个背景单元的精确位置；3、维护比较麻烦，如果需要添加新的图标就需要更改CSS
工具：CSS Sprites样式生成工具：adobe air（自行下载了解）
21、如何居中一个浮动的元素？
父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。
22、背景透明，背景之上的文字不透明方法？
方法一：
<style type="text/css">
.warp{ background:#eee url(back.jpg) no-repeat left top; 440px;height:400px; border:1px solid #ccc;}
.content { 180px; height:260px; margin:0px auto; padding:30px 30px;background:rgba(255, 255, 255, 0.6)!important;
filter:Alpha(opacity=60); background:#fff; /* 使用IE专属滤镜实现IE背景透明*/
.content p{ position:relative;} /*实现IE文字不透明*/
</style>
<div class="warp">
<div class="content"><p>背景透明，背景之上的文字不透明方法</p></div>
</div>
方法二：position方法
<style type="text/css">
.warp{ background:#eee url(back.jpg) no-repeat left top; 440px;height:400px; border:1px solid #ccc;}
.content { 180px; height:260px; margin:0px auto; padding:30px 30px; postition:relative;}
.content p.pos1{ 180px; height:24px; line-height:24px; position:absolute; bottom:0; left:0; background:#000; opacity:0.5; filter:alpha(opacity=50); z-index:1;}
.content p.pos2{ 180px; height:24px; line-height:24px; position:absolute; bottom:0; left:0; color:#fff; z-index:2'}
</style>
<div class="warp">
<div class="content">
<p class="pos1">背景透明，背景之上的文字不透明方法</p>
<p class="pos2">背景透明，背景之上的文字不透明方法</p>
</div>
</div>
方法三：css3方法
<style type="text/css">
.warp{ background:#eee url(back.jpg) no-repeat left top; 440px;height:400px; border:1px solid #ccc;}
.content { 180px; height:260px; margin:0px auto; padding:30px 30px;background:rgba(255, 255, 255, 0.6);}
</style>
<div class="warp">
<div class="content"><p>背景透明，背景之上的文字不透明方法</p></div>
</div>
23、左边固定，右边自适应方法？
方法一：position:absolute
<style>
body{ margin:0; height:100%}
html{ height:100%} /*兼容firefox的div高度100%*/
#left{ position:absolute; top:0; left:0; 200px; height:100%;
background-color:#CCCCCC}
#right{ margin-left:200px; height:100%; background-color:#0099FF}
</style>
<div id="left">left</div>
<div id="right">right</div>
方法二：用float来解决
<style type="text/css">
body{ margin:0; height:100% }
html{ height:100% }
#left{ 150px; height:100%; float:left; _margin-right:-3px;
background-color: yellow }
#main{ height:100%; background-color: green }
</style>
<div id="left"></div>
<div id="main"></div>
方法三：用float来解决
<style>
body{ margin:0; height:100%}
html{ height:100%} /*兼容firefox的div高度100%*/
#left{ 200px; height:100%; background-color:#CCCCCC; float:left}
#main{ 100%; height:100%; background-color:#0099FF}
</style>
<div id="main">
<div id="left">left</div>
Right
</div>
24、三栏布局 ；左定右定中间自适应？
方法一：绝对定位方法
html,body { margin:0; padding:0; height: 100%; }
#left, #right { position: absolute; top:0; 220px; height: 100%; }
#left { left:0; }
#right { right:0; }
#main { margin: 0 230px; height: 100%; }
<div id="left">左边栏</div>
<div id="right">右边栏</div>
<div id="main">主内容</div>
方法二：浮动方法
#left, #right { float: left; 220px;height: 200px; background: blue; }
#right{ float: right; }
#main { margin: 0 230px; background: red; height: 200px; }
<div id="left">left </div>
<div id="right">right</div>
<div id="main">mian</div>
方法三：负的margin值
#main { float: left; 100%; }
#mainContainer { margin: 0 230px; height: 200px; background: green; }
#left { float: left; margin-left: -100%; 230px }
#right { float: left; margin-left: -230px; 230px; }
#left .inner, #right .inner { background: orange; margin: 0 10px; height: 200px; }
这种方法如果在ie下会存在布局混乱的bug，你可以将div#right和div#left中的width值稍作修改：
#left, #right { float: left; margin: 0 0 0 -271px; 50%; * 49.9%; }
<div id="main">
<div id="mainContainer">main content</div>
</div>
<div id="left">
<div id="leftContainer" class="inner">left content</div>
</div>
<div id="right">
<div id="rightContainer" class="inner">right</div>
</div>
方法四：CSS3 Flexbox
.grid { display: -webkit-flex; display: -moz-flex; display: -o-flex; display: -ms-flex; display: flex; }
.col { padding: 30px; }
.fluid { flex: 1; }
.fixed { 400px; }
<div class="grid">
<div class="col fluid"></div>
<div class="col fixed"></div>
<div class="col fluid"></div>
</div>
25、三栏布局，中间内容不确定高度，问怎么让两边的背景始终与内容高度一致？
纯css方法一：
<style type="text/css">
/*主要利用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的*/
body, p, ul { margin:0; padding:0; }
#wrap { overflow:hidden; 1000px; margin:0 auto; }
#left, #center, #right { margin-bottom:-10000px; padding-bottom:10000px; }
#left { float:left; 250px; background:#00FFFF; }
#center { float:left; 500px; background:#FF0000;}
#right { float:right; 250px; background:#00FF00; }
</style>
<div id="wrap">
<div id="left">
<p>left</p>
</div>
<div id="center">
<p>center</p>
<p>center</p>
<p>center</p>
</div>
<div id="right">
<p>right</p>
</div>
</div>
纯css方法二：
<style type="text/css">
/*利用position border技巧方法*/
* {margin:0;padding:0;}
.header, .footer {900px;height:50px;margin:0 auto;background:#E5E5E5;}
.content {position:relative;600px;margin:10px auto;border-left:170px solid #333333;border-right:130px solid #CCCCCC;}
.mainBox {580px;margin-left:10px;overflow:hidden;background:#F4F4F4;}
.sideBar1 {position:absolute;top:0;right:-130px;130px;}
.sideBar2 {position:absolute;top:0;left:-170px;170px;color:#FFFFFF;}
</style>
<div class="header"></div>
<div class="content">
<div class="mainBox"><p>center</p><p>center</p><p>center</p></div>
<div class="sideBar1"><p>left</p></div>
<div class="sideBar2"><p>right</p></div>
</div>
<div class="footer"></div>
纯css方法三：
<style type="text/css">
/*用背景方法*/
body, p, ul { margin:0; padding:0; }
#wrap { 1000px; margin:0 auto; background:url(1.png) repeat-y; overflow:hidden;}
#left { float:left; 250px;}
#center { float:left; 500px;}
#right { float:right; 250px;}
</style>
<div id="wrap">
<div id="left">
<p>left</p>
</div>
<div id="center">
<p>center</p>
<p>center</p>
<p>center</p>
</div>
<div id="right">
<p>right</p>
</div>
</div>
js方法：
<style type="text/css">
* {margin:0;padding:0;}
#sidebar{float:left; 25%; background:#f00;}
#right{float:left; 50%; background:#ccc;}
#ccc{ float:left; 25%; background:green;}
</style>
<script language="javascript">
function SameH(sidebar,right,ccc)
{
var t=document.getElementById(sidebar);
var b=document.getElementById(right);
var c=document.getElementById(ccc);
var a = new Array();
a[0]=t.scrollHeight;
a[1]=b.scrollHeight;
a[2]=c.scrollHeight;
var MaxValue;
MaxValue = a[0];
for(n in a){
if (a[n] > MaxValue) {
MaxValue = a[n];}
}
t.style.height = MaxValue + "px";
b.style.height = MaxValue + "px";
c.style.height = MaxValue + "px";
}
</script>
<div id="container">
<div id="sidebar">sidebar </div>
<div id="right">22222</div>
<div id="ccc">
<p>fdfa</p>
<p>1 </p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
</div>
<script language="javascript">
SameH("sidebar","right","ccc");
</script>
26、css实现全兼容的菱形导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>菱形导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
ul,li,a,span{margin:0;padding:0;list-style:outside none;height:25px;line-height:25px;display:block;}
ul{padding-left:25px;}
ul li{float:left;display:inline;margin-right:26px;}
ul li a,ul li a span{background:url(http://www.codefans.net/jscss/demoimg/201112/navBg.png) -25px 0 no-repeat;}
ul li a{padding:0 25px;font-size:12px;color:#FFF;position:relative;float:left;text-align:center;}
ul li a span{position:absolute;top:0;25px;}
ul li a .al{left:-25px;background-position:left 0;}
ul li a .ar{right:-25px;background-position:right 0;}
ul li a:hover{background-position:-25px -25px;}
ul li a:hover .al{background-position:left -25px;}
ul li a:hover .ar{background-position:right -25px;}
ul li a:active,ul li.current a{background-position:-25px -50px;}
ul li a:active .al,ul li.current a .al{background-position:left -50px;}
ul li a:active .ar,ul li.current a .ar{background-position:right -50px;}
</style>
</head>
<body>
<ul>
<li>
<a href="javascript:void(0)"><span class="al"></span>首页<span class="ar"></span></a>
</li>
<li>
<a href="javascript:void(0)"><span class="al"></span>关于我们<span class="ar"></span></a>
</li>
<li>
<a href="javascript:void(0)"><span class="al"></span>公司新闻<span class="ar"></span></a>
</li>
<li>
<a href="javascript:void(0)"><span class="al"></span>网上商城<span class="ar"></span></a>
</li>
</ul>
</body>
</html>
27、Css实现小三角
/*三角向上*/
#triangle-up {
0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
/*三角向下*/
#triangle-down {
0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
/*三角向左*/
#triangle-left {
0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
/*三角向右*/
#triangle-right {
0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
/*直角右下*/
#triangle-bottomright {
0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
28、清除浮动的方法有哪些
方法一：如果高度是固定的，给父级加height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单，代码少，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
方法二：父级结尾处添加额外的标签<div style="clear:both;"></div>
.clearfloat{clear:both;}
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单，代码少，浏览器支持好，不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
方法三：父级div定义 伪类:after和zoom
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
.left{float:left;20%;height:200px;background:#DDD}
.right{float:right;30%;height:80px;background:#DDD}
.div2{background:#800080;border:1px solid red;margin-top:10px;98%}
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。
方法四：父级div定义 overflow：hidden
.div1{background:#000080;border:1px solid red;/*解决代码*/98%;overflow:auto}
.div2{background:#800080;border:1px solid red;margin-top:10px;98%}
.left{float:left;20%;height:200px;background:#DDD}
.right{float:right;30%;height:80px;background:#DDD}
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
方法五：父级div定义 overlow:auto
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
方法六：父级div也一起浮动
原理：所有代码一起浮动，就变成了一个整体
优点：没有优点
缺点：会产生新的浮动问题。
建议：不推荐使用，只作了解。
方法七：父级div定义 display:table
原理：将div属性变成表格
优点：没有优点
缺点：会产生新的未知问题。
建议：不推荐使用，只作了解。
方法八：父级结尾处添加标签<br style="clear:both;" />
原理：父级div定义zoom:1来解决IE浮动问题，结尾处加 br标签 clear:both
建议：不推荐使用，只作了解。
29、Position属性是什么含义？都有哪些值，都什么含义？
Position规定元素的定位类型:包含值有：static，relative，absolute，fixed
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit
规定应该从父元素继承 position 属性的值。
30、怎样使一个层垂直居中于浏览器中
这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二 <style type="text/css">
div { position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; 200px; height:200px; border:1px solid red; }
</style>