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%;