HTML和CSS疑点解析

1,让不定宽高的div,垂直水平居中?

父盒子:display:table-cell;text-align:center;vertical-align:middle

div盒子:display:inline-block;vertical-align:middle;

2,CSS强制英文、中文换行与不换行 强制英文换行

1. word-break:break-all;只对英文起作用，以字母作为换行依据

2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据

3. white-space:pre-wrap; 只对中文起作用，强制换行

4. white-space:nowrap; 强制不换行，都起作用

5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）

3,清除浮动的几种方式

(1)父级div定义  伪类:after和zoom

clearfix：after{

content：""；

display：block；

visibility：hidden；

height：0；

line-height：0；

clear：both；

}

.clearfix{zoom：1}

(2)双伪元素法：

.clearfix：before，.clearfix：after {

content： ""；

display： block；

clear： both；

}

.clearfix {

zoom： 1；

}

(3)父级 div 定义 overflow：hidden 超出盒子部分会被隐藏，不推荐使用.

(4) 结尾处加空 div 标签 clear：both

(5)父级 div 定义 height

3,请用 div+css 写出图片水平垂直居中的样式

方法一：（表格转换法）

Html：<div class='wrap'><div></div class='cell'><img src=></div>

CSS: .wrap{display:table;} .cell{ display:table-cell;text-align:center;vertical-align:middle;}

方法二：（基线对齐法）

Html：<div class="wrap"><img src=""><span></span></div>

CSS:.wrap{text-align:center;} img{ vertical-align:middle;} span{ height:100%;display:inline-block;vertical- 上海传智播客·黑马程序员 www.itheima.com 第 26 页 共 118 页 align:middle;}

4,inline-block 水平呈现的元素间，换行显示或空格分隔的情况下会有间距

父元素{font-size：0；-webkit-text-size-adjust：none；}

5,css 去掉 iPhone、iPad 默认按钮样式

input[type="button"], 
input[type="submit"],
 input[type="reset"] { -webkit-appearance: none; }

 textarea { -webkit-appearance: none;}

浏览器兼容问题

css:

a,各个浏览器默认的内外边距不同*{margin:0;padding:0;}

b,块元素中含有图片时，ie6-7 中会出现图片下有空隙

解决：
1、在源代码中让</div>和<img>在同一行
2、将图片转换为块级对象 display:block;
3、设置图片的垂直对齐方式 vertical-align:top/middle/bottom
4、改变父对象的属性，如果父对象的宽、高固定，图片大小随父对象而定，那么可以对父元素设置：
overflow:hidden;
5、设置图片的浮动属性 float:left;

c,IE6 双倍边距的问题

ie6 中设置浮动，同时又设置 margin 时，会出现双倍边距的问题

 d,Table 宽度固定，td 自动换行

解决： 设置 Table 的 table-layout:fixed，td 的 word-wrap:break-word

e,在 ie6 下透明的 png 图片会带一个背景色 解决： background-image: url(icon_home.png); background-repeat: no-repeat; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); _background-image: none;

 

 

 

 

js部分

(1)使用 window.event 无法在 FF 上运行

可以把 event 传到函数里变通解决：
onMouseMove = "functionName(event)"
function functionName (e) {
 e = e || window.event;
 ......
}

(2)event.x 与 event.y 问题

mX = event.x ? event.x : event.pageX;

(3)禁止选取网页内容

FF 需要用 CSS 禁止，IE 用 JS 禁止 解决方法： IE: obj.onselectstart = function() {return false;} FF: -moz-user-select:none;