第三次作业
2017-02-26 本文已影响0人
闫八岁
问答题呀
1.内联元素如何转化成为块元素
display:block
2.元素类型有哪些？他们的特征分别是什么？
块元素 内联 内联块
块不设置时，一行都是，支持所有css
内联 不支持 heigh weigh 换行被解析
内联块 也是一大行 和块一样支持宽高 Ie6 ie7 不支
3.清浮动有哪些方法？你最喜欢哪个?为什么
1架高 扩展性不好
2 父级浮动 所有都加浮动，margin不好使
3inline block 清浮动方法
margin左右失效
4 空标签浮动 i最小高度19px
5 br清浮动 不符合工作中 结构 样式 行为分离的要求
6 after伪类 现在主流方法
after 伪类 元素内部未添加内容
zoom缩放 处罚下haslayout 使元素根据自身内容算宽高
ff不知持
4.什么是BFC？如何才能得到一个BFC
处了ie 6 7块级格式化上下文
5.Positon的值有哪些？
relative absolute fixed
7.怎么改变一个div的层级，写出代码让DIV1在DIV2在下
用z-index 数字越大 月后执行
8.如何实现层叠的DIV1与DIV2，上面DIV1不透明下面DIV2透明？
用opacity 0到1 透明度
9.合并行属性，合并列属性
<td colspan="2">合并两个单元格
<td rowspan="2"></td>合并列但严格
10.让DIV水平垂直居中
absolute-center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
程序题第一种方法
1用内联呀
<!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>
div{ width:400px;
height:400px;
background-color:#09F;
display:inline-block;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>
第二种方法
浮动了
<!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>
div{ width:400px;
height:400px;
background-color:#09F;
float:left;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<a></a>
</body>
</html>
第三种方法
用定位呀
<!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>
div{ width:400px;
height:400px;}
.div1
{ width:400px;
height:400px;
background-color:#09F;
}
.div2{
background-color:#09F;
position:relative;
left:400px;
bottom:400px;
}
.div3{
background-color:#09F;
position:relative;
left:800px;
bottom:800px;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<a></a>
</body>
</html>
