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得自己根据实际情况具体微调。