1.内联元素如何转化成为块元素？
让内联元素产生浮动或者将它的display属性值设置为block即可。
display:block ; 显示为块，使内联元素具备块属性标签的特性
2.元素类型有哪些？他们的特征分别是什么？
块元素：display:block ;
1.没有设置宽度时，默认撑满一行。
2.默认块元素独占一行。
3.支持所有CSS命令。
内联元素：display:inline;
1.宽高由内容撑开。
2.不支持宽高。
3.一行内可以继续显示跟同类的标签。
4.不支持上下的margin。
5.代码换行被解析。
内联块元素：display:inlineblock;
1、块元素能在一行显示。
2、内联元素支持宽高。
3、没有宽度的时候由内容撑开宽度。
3.清除浮动有哪些方式？你最喜欢哪一种？为什么？
clear
clear:left （左）right （右）both （左右两边）none （没有）inherit （继承）；元素的某个方向上不能有浮动元素
clear:both; 在左右两侧均不允许有浮动元素。
加高度
问题：高度不定时不方便清除，扩展性不好。
父级浮动
问题：页面中所有元素都加浮动，margin左右auto失效（floats bad ！）
inline-block 清浮动方法：
问题：margin左右auto失效；
空标签清除浮动
问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）
br清除浮动 <br clear="all"/>
问题：不符合工作中：结构、样式、行为，三者分离的要求。
after伪类清除浮动方法 给浮动元素的父级加after伪类
after伪类： 元素内部末尾添加内容；
after{content"添加的内容";} IE6，7下不兼容
zoom 缩放
a.触发 IE下 haslayout，使元素根据自身内容计算宽高。
b.FF 不支持；
clear:after{content:'';display:block;clear:both;}
clear{zoom:1;}
overflow:hidden 清浮动方法；给浮动元素的父级加overflow
问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；
overflow: scroll | auto | hidden；
overflow:hidden;溢出隐藏（裁刀！）（超出父级隐藏）
overflow:scroll;（超出父级有滚动条）
本人喜欢overflow:hidden 清浮动方法：虽然此方法有一定的局限性，不过overflow:scroll;这条命令比较人性化。每个方法都需要学习，具体环境具体考虑。
4.什么是BFC？如何才能得到一个BFC?
BFC (block formatting context) 块格式化上下文 标准浏览器
a.float的值不为none。
b.overflow的值不为visible。
c.display的值为table-cell, table-caption, inline-block中的任何一个。
d.position的值不为relative和static。
e.width|height|min-width|min-height:(!aotu)
5.Postion的值有哪些？
position:relative | absolute | fixed | static | inherit;
position:absolute; 绝对定位
position:fixed; 固定定位
position:static ; 默认值
position:inherit ; 从父元素继承定位属性的值 (不兼容)
position:relative; 相对定位
6.说一下绝对定位、相对定位和固定定位的区别？
position:relative; 相对定位
*需要谁移动就给谁加定位
a.不影响元素本身的特性；
b.不使元素脱离文档流（元素移动之后原始位置会被保留）；
c.如果没有定位偏移量，对元素本身没有任何影响；
d.提升层级
定位元素位置控制
top/right/bottom/left （上 右 下 左）定位元素偏移量。
top:200px; 上部留有200px。
left:200px; 左侧留有200px。
position:absolute; 绝对定位
a、使元素完全脱离文档流（元素移动之后原始位置不会被保留）；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document（浏览器可视区域的）发生偏移；
e、相对定位一般都是配合绝对定位元素使用；
f、提升层级
position:fixed； 固定定位
与绝对定位的特性基本一致，差别是始终相对整个文档（浏览器可视区域的）进行定位；问题：IE6不支持固定定位；
position:fixed;
right:0; 可直接定位方向
bottom:0;
7.怎么改变一个div的层级，写出代码让div1在div2下。
代码从上往下执行，后面的能覆盖前面的，定位元素默认后者层级高于前者；改变兄弟标签之间层级最好用z-index:number;来定位层级。为了让div1在div2后执行，需要提升div1的等级，代码如下：
<!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>
body{margin:0;}
#div1{width:50px;height:50px;background:red;position:absolute;z-index:1;top:50px;}
#div2{width:50px;height:50px;background:yellow; position:relative;}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>
8.如何实现层叠的div1与div2，上面div1不透明下面div2透明？
标准浏览器透明度设置： opacity:0~1; （完全透明~不透明）
父级加透明度子级也会被继承。
IE浏览器6.7下的透明度设置： filter:alpha(opacity=0~100); （完全透明~不透明）
代码如下：
<!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:100px;height:100px;background:red;position:absolute;z-index:1;}
#div2{width:100px;height:100px;background:black; position:absolute;top:20px;left:20px;opacity:0.5;}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html
9.合并行属性，合并列属性
colspan 属性规定单元格可横跨的列数。
<td colspan="2"></td> 合并两个单元格
rowspan 属性规定单元格可横跨的行数。
<td rowspan="2"></td> 合并两个单元格
合并的数量+剩余的数量=总数
一行合并删当前行，跨行合并删除当前行的其他行。
10.让div水平垂直居中
margin:50%;
网友评论