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;不換行，超出部分隱藏且以省略號形式出現（部分瀏覽器支持）

View Code

3,清除浮動的幾種方式

(1)父級div定義  僞類:after和zoom

clearfix：after{

content：""；

display：block；

visibility：hidden；

height：0；

line-height：0；

clear：both；

}

.clearfix{zoom：1}

View Code

(2)雙僞元素法：

.clearfix：before，.clearfix：after {

content： ""；

display： block；

clear： both；

}

.clearfix {

zoom： 1；

}

View Code

(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;}

View Code

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

View Code

瀏覽器兼容問題

css:

a,各個瀏覽器默認的內外邊距不一樣*{margin:0;padding:0;}

b,塊元素中含有圖片時，ie6-7 中會出現圖片下有空隙

解決：
一、在源代碼中讓</div>和<img>在同一行
二、將圖片轉換爲塊級對象 display:block;
三、設置圖片的垂直對齊方式 vertical-align:top/middle/bottom
四、改變父對象的屬性，若是父對象的寬、高固定，圖片大小隨父對象而定，那麼能夠對父元素設置：
overflow:hidden;
五、設置圖片的浮動屬性 float:left;

View Code

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;
 ......
}

View Code

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