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>
网友评论