1.内联元素如何转化成为块元素
<span style="display:block">内联变块</span>
2.元素类型有哪些？他们的特征分别是什么？
内联元素、块元素、内联块元素
内联元素特征：（1）不支持宽高，宽高由内容撑开
（2）一行上可以显示同类的标签
（3）不支持上下的margin
（4）代码换行被解析
块元素特征：（1）未设置宽高时，独占一行
（2）支持所有的css命令
3.清浮动有哪些方法？你最喜欢哪个?为什么
（1）加宽高---------扩展性不好
（2）父级浮动--------margin失效
（3）inline-block---------margin左右auto失效
（4）空标签---------在IE下有问题
（5）br-------不符合要求
（6）after伪类-------（最喜欢的方法）可符合大部分的需求
注意：在IE6下还要加div{*zoom:1;}
4.什么是BFC？如何才能得到一个BFC
BFC----标准浏览器
a、float的值不为none
b、overflow的值不为visible
c、display的值为table-cell,table-caption,inline-block中的其中一个
d、position的值不为relitive,static
e、width|height|min-width|min-height(!auto)
5.Positon的值有哪些？
absolute---绝对定位；relative---相对定位；fixed---相对定位；static---默认值；
z-index:[数字]---定位层级
6.说一下绝对定位，相对定位和固定定位的区别
相对定位：a、不影响元素本身的特性
b、不使元素脱离文档流
c、无定位偏移量，无作用
d、提高层级
绝对定位：a、使元素完全脱离文档流
b、使内嵌支持宽高
c 、块属性标签内容撑开高度
d、如果有定位父级相对于定位父级发生相对偏移，无定位父级相对于 document发生偏移
e、相对定位一般配合绝对定位使用
f、提高层级
固定定位：与绝对定位特性基本一致，区别是始终相对整个文档进行定位
问题：IE6不支持固定定位
7.怎么改变一个div的层级，写出代码让DIV1在DIV2在下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.div1{width:200px;height:200px;background:yellow;
position:absolute;z-index:-1;}
.div2{width:100px;height:100px;background:green;
position:absolute;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
8.如何实现层叠的DIV1与DIV2，上面DIV1不透明下面DIV2透明？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
div{width:200px;height:200px;}
.box{
margin:100px auto;
position:relative;}
.div1{
position:absolute;
background:blue;
left:-6px;top:-6px;
z-index:2;
}
.div2{
position:absolute;
background:black;
right:-6px;
bottom:-6px;
z-index:1;
opacity:0;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
9.合并行属性，合并列属性
<td colspan = "2"></td>
<td rowspan = "2"></td>
10.让DIV水平垂直居中
编程1：
方法一：（定位）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.div1{width:100px;height:100px;background:yellow;
position:absolute;}
.div2{width:100px;height:100px;background:green;
position:absolute;left:100px;}
.div3{width:100px;height:100px;background:pink;
position:absolute;left:200px;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
方法2：（inlineblock类型转换）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
span{
width:100px;height:100px;background:pink;
display:inline-block;
}
</style>
</head>
<body>
<span>1</span>
<span>2</span>
<span>3</span>
</body>
</html>
方法三：（浮动）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
div{
width:100px;
height:100px;
background:pink;
float:left;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>
问题二：(没做出来)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.box{width:267px;height:1165px;padding:20px #FFF;}
.title1,.title2{display:inline-block;}
.title1{width:29px;height:29; border:1px solid #000;border-bottom:none;}
.title2{width:60px;height:20;font:bold normal 20px/40px "宋体"；}
.item1,item2{display:inline-block;}
.item1{width:66px;height:13px;font:bold normal 13px/20px "宋体"; }
.item2{width:58px;height:12;font:bold normal 13px/20px "宋体"；}
.body{background-image:url("img_2.png)" no-repeat;}/*不好使？？？*/
</style>
</head>
<body>
<div class="box">
<div class="title">
<div class="title1">TOP</div>
<div class="title2">排行榜</div>
</div>
<div class="item">
<div class="item1">最新排行</div>
<div class="item2">新课上线</div>
</div>
<div class="body">
<div class="body1"></div>
<div class="body2"></div>
<div class="body3"></div>
<div class="body4"></div>
<div class="body5"></div>
</div>
<div class="footer">
<div class="fotter1"></div>
<div class="fotter2"></div>
<div class="fotter3"></div>
<div class="fotter4"></div>
<div class="fotter5"></div>
</body>
</html>
网友评论