1.内联元素如何转换成块元素？
方法如下：
display:block;
display:inline-block;
或者使用浮动：
float:left\right\inherit\none;
2.元素类型有哪些？它们的特征分别是什么？
元素类型有：内联元素和块状元素。
内联元素的特点：
（1）可以和其他元素在同一行上。
（2）不支持宽高，对上下margin和padding等样式的支持也有一定的问题。
（3）元素的宽度就是它包含的文字或图片的宽度。
块元素的特点：
（1）独占一行。
（2）支持所有样式。
（3）不设置宽度时，宽度会撑满整行。
3.清浮动有哪些方法？你最喜欢哪个？为什么？
清浮动的方法：
（1）加高。给浮动元素的父级加上与浮动元素相同的高度。
问题：扩展性不好。
（2）给父级加上浮动。
问题：页面上所有元素都得加上浮动，margin左右自动失效。
（3）inline-block清浮动。
问题：margin左右自动失效。
（4）空标签清浮动。
问题：IE6下有最小高度，解决后，IE6下有2px偏差。
（5）br清浮动。
<br clear="all"/>
问题：不符合结构-样式-行为三者分离的要求。
（6）after伪类 清浮动。（给浮动元素的父级加上 clearfix 标签）
clearfix:after{content:"" display:block;c;clear:both;}
在IE6下还得添加：
clearfix{*zoom:1;}
(6)overflow：hidden 清浮动。
问题：需要配合宽度或者zoom。
最喜欢的是 after伪类清浮动。 因为方便，不会产生什么副作用。
4.什么是BFC？如何才能得到一个BFC
BFC（block formatting context）是块级元素格式化上下文。
在下列这些情况下会创建新的BFC
（1）浮动元素（不为none时）；
（2）绝对定位元素；
（3）表格的单元格；
（4）表格的标题；
（5）display:inline-block；
（6）overflow的值不为visible。
5.position的值有哪些？
position:relative\absolute\static\fixed
6.说一下绝对定位，相对定位和固定定位的区别
相对定位：（1）本身作为自己的参照物；
（2）不会使元素脱离文档流；（元素移动后原始位置会被保留。）
（3）不影响元素本身的特性，如果没有定位偏移量，对元素本身没有任何影响；
（4）提升层级。
绝对定位：（1）使元素完全脱离文档流；
（2）使内嵌元素支持宽高；
（3）块属性标签内容撑开宽度；
（4）如有定位父级相对于定位父级发生偏移，没有定位父级则相对于document发生偏移。
（5）相对定位一般都是配合绝对定位元素使用。
（6）能够提升层级。
固定定位与绝对定位的特性基本一致，它们的区别就是固定定位偏移基准是相对于屏幕来定位，绝对定位是相对于父级来定位，ie6不兼容固定定位。
7.怎么改变一个div的层级，写出代码让div1在div2的下面
可以使用z-index：[这里填层级];来改变div的层级。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.div1{
width:200px;
height:200px;
background:blue;
position:absolute;}
.div2{
width:200px;
height:200px;
background:red;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
8.如何实现层叠的div1和div2，上面div1不透明下面div2透明？
实现代码：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.div1{
width:200px;
height:200px;
background:blue ;
position:relative;
margin:100px auto;
opacity:0.8;}
.div2{
width:200px;
height:200px;
background:red center;
position:absolute;
left:-6px;
top:-6px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
9.合并行属性，合并列属性。
合并行属性：
<td rowspan="2"></td>
合并列属性：
<td colspan="2"></td>
10.让div水平垂直居中
代码实现：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.box{
width:400px;
height:200px;
background:red;
position:absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-150px;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
其中margin-left和margin-right得自己根据实际情况具体微调。
网友评论