19-21日问答作业&知识点总结
2017-01-25 本文已影响0人
星星yx
1.内联元素如何转化成为块元素？
display：biock;（显示为块）使内联元素具备块属性标签的特征
eg：
span{width:200px;
heigth:200px;
display:block;｝
<span></span>
补充：
display:inline;（显示为内联）使块元素标签具备内联元素的特征
display:inline-block;的特征
（1）、块在一行显示
（2）、内联元素支持宽度
（3）、没有宽度的时候，内容撑开宽度
（4）、标签之间的换行间隙被解析
（5）、IE6、7不支持块属性标签的inline-block
2.元素类型有哪些？他们的特征分别是什么？
块元素的特征
（1）、在没有设置宽度时，默认撑满一行
（2）、默认块元素独占一行
（3）、支持所有CSS命令
内联元素的特征
（1）、宽度有内容撑开
（2）、不支持宽高
（3）、一行可以继续显示同类型的标签
（4）、不支持上下的margin
（5）、代码换行被解析
3.清浮动有哪些方法？你最喜欢哪个?为什么？
（1）、加高度
存在的弊端：扩展性不好
（2）、父级浮动
存在的弊端：页面所有元素都加浮动，margin左右自动失效
（3）、inline-block
存在的弊端：margin左右的auto失效
（4）、空标签 方法;在底下加个空标签，对空标签clear：both;
存在的弊端：解决后IE6下还有2px的偏差
（5）、br清除浮动<br clear="alll"/>
存在的弊端：不符合工作中结构、样式、行为三者分离的要求
（6）、after伪类（伪类：给某一个元素添加特殊的效果，添加在选择器上）常用的清除浮动的办法，弊端小
格式：div:after{content:"……";
display:block;
clear:both;
}
clear{*zoom:1;}
<div class="clear"></div>
（7）、overflow:scroll|auto|hidden;
overflow:hidden;溢出隐藏（裁刀）
存在的弊端：需要配合宽度或zoom兼容IE6、7；
补充：
（1）、after伪类：元素内部尾部添加内容
after{content:"添加的内容";}在IE6、7不兼容
（2）、zoom缩放：
a：触发IE下haslayout，是元素根据自身内容计算宽高
b：FF不支持
4.什么是BFC？如何才能得到一个BFC?
BFC：（block formatting content）标准浏览器（除IE6、7、8）块级元素格式上下文
如何才能得到一个BFC?
a：”float的值不为none。
b：overflow的值不为visible。
c：display的值为table-cell, table-caption, inline-block中的任何一个。
d：position的值不为relative和static。
e：width|heght|min-widrh|min-height(!aotu)
5.Positon的值有哪些？ 说一下绝对定位，相对定位和固定定位的区别?
相对定位
position:relative;
定位元素位置控制：
top|rigth|bottom|left:定位元素偏移量
格式：
position:relative;
left;……
特征：
（1）、不影响元素本身特征
（2）、不使元素脱离文档流（元素移动之后原始位置会被保留）
（3）、如果没有定位偏移量，对元素本身没有任何影响
（4）、提升层级
绝对定位
absoute:绝对定位|定位层级
position:absoute:
（1）、使元素完全脱离文档流
（2）、使内嵌支持宽度
（3）、块属性标签内容撑开宽度
（4）、如果有定位父级相对于定位父级发生偏移，没有定位父级相对document（浏览器可视区域）发生偏移
（5）、相对定位一般都是配合绝对定位元素所使用
（6）、提升层级
z-index:[number];定位层级
（1）、定位元素默认后者层级高于前者；
（2）、建议在元素标签之间比较层级
固定定位
position:fixed;
与绝对定位的特征基本一致的，差别是始终相对整个文档进行定位（屏幕的可视区域）；
问题：IE6不支持固定定位
例：
podition:fixed;
rigth:0;
bottom:0;
固定到右下角
其他定位
position:static;默认值
position:inherit；从父级继承定位属性的值（不兼容）
文档流：文档中可显示对象在排列时所占用的位置
7.怎么改变一个div的层级，写出代码让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>
div{
width:200px;
height:200px;
}
.DIV1{
background-color:red;
position:absolute; /* 使用绝对定位 */
z-index:1; /* 使DIV1提高一各层次 */
}
.DIV2{
background-color:blue;
position:absolute;
}
</style>
</head>
<body>
<div class="box">
<div class="DIV1"></div>
<div class="DIV2"></div>
</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>
div{
width:200px;
height:200px;
}
.DIV1{
background-color:red;
position:absolute;
z-index:1;
}
.DIV2{
background-color:blue;
position:absolute;
opacity:0;
}
</style>
</head>
<body>
<div class="box">
<div class="DIV1"></div>
<div class="DIV2"></div>
</div>
</body>
</html>
9.合并行属性，合并列属性
合并行属性：
colspan:属性规定单元格可横跨的列数
<td colspan="number"></<td>
合并列属性：
rowspan:属性规定单元格可横跨的行数
<td rowspan="number"></<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>
div{
font:bold 50px/50px "宋体";
color:red;
margin:50% auto; /* 上下是浏览器的50% 左右居中 */
text-align:center; /* 设置字体居中 */
}
</style>
</head>
<body>
<div>DIV</div>
</body>
</html>
补充知识点：
透明度;opacity:n;（n属于[0,1] 0为完全透明，1为不透明）
父级加上透明度子级一定有透明度
在IE6、7下的格式
filter:alpha(opacity=0~100);
表格
表格的标签
table：表格
thead：表格头
tbody：表格主体
tr：表格行
th：元素定义表头
td：元素定义表格单元
<!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>
table{
border-collapse:collapde;/*单元格间隙合并*/
}
td,th{
padding:0;
}/*重置单元格默认填充*/
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td>shuxue</td>
<td>shuxue</td>
<td>shuxue</td>
<td>shuxue</td>
<td>shuxue</td>
</tr>
</tbody>
</table>
</body>
</html>
表单&表单元素
form:表单；
<form action=""></form>
<input type="可以为a的所有种类" name="……" value="默认的东西"/>
a为｛
text：文本框
password：密码
radio：单选
checkbox：多选
submit：提交
reset：重置
buttom：按钮
image：图片
file：上传
hidden：隐藏
｝
