html css 小技巧小bug 總結

 

 

一.Firefox和chrome下textarea解決自動展開

textarea {    resize: none;}

 

二. IE7下，<p>等標籤內部<a>添加float屬性後沒有和文字排在一行

 

<!-- '顯示模式:' 和 '列表模式','縮圖模式' 沒有在同一行中顯示--><div class="view">　　顯示模式:   <a style="float:right;" title="列表模式" href="#" >列表模式</a>   <a style="float:right;" title="縮圖模式" href="#" >縮圖模式</a></div><!-- '顯示模式:' 和 '列表模式','縮圖模式' 在同一行中顯示--><div class="view">   <a style="float:right;" title="列表模式" href="#" >列表模式</a>   <a style="float:right;" title="縮圖模式" href="#" >縮圖模式</a>   顯示模式:</div>

 

結論： 在塊元素中有文字時，需要有部分文字有float屬性時，應該把浮動的文字放在塊元素的內部前面，這樣才會在同一行中浮動，而不會在下一行才浮動

三. IE7下，padding的值會算入width中

　　　查看元素布局時，會發現布局中的width把padding的值算了進去。

 

 

四、字型間距

行間距： line-height;

字間間距：letter-spacing;

首字縮排：text-indent;

 

 

五、圖片垂直水平置中

在圖片寬高未知，但最大寬高確定的情況下，在div等盒子中需要圖片垂直水平都置中的實現可以用<table><td>來實現：

html：

 

<table>      <td><img src="http://img5.hao123.com/data/8f5d57e5bc12734a86afa7f6ef0afba9_0" alt="" /></td></table>

 

css：

td{    vertical-align:middle;    text-align:center;    width: 355px;    height: 400px;}td img{    max-width:280px;    max-height:400px;}

 

 六、ie下固定table的寬高

在ie下直接給table寬高值不能夠實現固定寬高，這是需要再增加一個屬性：table-layout

文法：
table-layout : auto | fixed 
參數：
auto : 　預設的自動演算法。布局將基於各儲存格的內容。表格在每一儲存格讀取計算之後才會顯示出來。速度很慢
fixed : 　固定式配置的演算法。在這演算法中，水平布局是僅僅基於表格的寬度，表格邊框的寬度，儲存格間距，列的寬度，而和表格內容無關

table{    table-layout: fixed;    width: 200px;    height: 120px;}

 

 

 七、清除浮動屬性 clear的使用注意事項：

1、clear不是一個標籤，它是css中的一個屬性。

2、其屬性值有四個

　　clear:both|left|right|none;

　　clear:both;表示該元素兩邊都不存浮動元素。      

　　clear:left;表示該元素左邊不存在浮動元素。      

　　clear:right;表示該元素右邊不存在浮動元素。      

　　clear:none表示兩邊允許有浮動元素。

3、該屬性的值指出了不允許有浮動物件的邊。換句話，clear屬性的作用就是“清除”浮動。 這個屬性是用來控制float屬性在文檔流的物理位置的。當屬性設定float（浮動）時，他所在的物理位置已經脫離文檔流了，但是大多時候我們希望文檔流能識別float（浮動）,或者是希望float（浮動）後面的元素不被float（浮動）所影響，這個時候我們就需要用clear:both;來清除。

clear:both 使用不當造成的例子：在ie8+，chrome，Firefox下出現

 

.aa {    float:left;    width:100px;    height:200px;    border:1px solid red;}.bb {    margin-left:110px;    border:1px solid blue;    width:330px;}.cc {    float:left;    width:100px;    height:100px;    border:1px solid green;}.dd {    float:left;    border:1px solid black;    width:100px;    height:100px;}.clear{        clear:both;}

 

html:

<div class="aa"></div><div class="bb">    <div class="cc"></div>    <div class="cc"></div>    <div class="cc"></div>    <div class="clear"></div>    <div class="dd"></div></div>

結果：因為.clear 的使用不當，在<div class="clear"></div>的位置清除了文檔流的物理位置，使左右兩邊都沒有浮動屬性。造成bug出現

 修改css代碼：

 

.aa {    float:left;    width:100px;    height:200px;    border:1px solid red;}.bb {    margin-left:110px;    border:1px solid blue;    width:330px;}.cc {    float:left;  // 改為right    width:100px;    height:100px;    border:1px solid green;}.dd {    float:left;    border:1px solid black;    width:100px;    height:100px;}.clear{        clear:both;  // 改為 right}

//或者在父元素加 .clearfix

.clearfix:after{
　　content:".";
　　visibility:hidden;
　　height:0;
　　clear:both;

　　display: block;
}

// 上面的那段代碼有時候不是很給力，clear屬性有些過猶不及

// 這段外國的代碼和拉轟

.clearfix{

　　overflow: auto;

　　_height:1%;

}

// 真心的下面這段也是可以的

.clearfix{
　　overflow:hidden;
　　_zoom: 1;
}

 

結果：

結論：使用clear的時候要注意 需要清除的浮動位置是left、right，還是both。

 

七、欄位換行

欄位自動換行有兩個屬性控制：word-break 和 word-wrap

p{word-break : break-allword-wrap : break-word}

文法：
word-break : normal | break-all | keep-all 
參數：
normal : 　依照亞洲語言和非亞洲語言的文本規則，允許在字內換行
break-all : 　該行為與亞洲語言的normal相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本
keep-all : 　與所有非亞洲語言的normal相同。對於中文，韓文，日文，不允許字斷開。適合包含少量亞洲文本的非亞洲文本
說明：
設定或檢索對象內文本的字內換行行為。尤其在出現多種語言時。
對於中文，應該使用break-all 。
對應的指令碼特性為wordBreak。

 word-wrap : normal | break-word 
參數：
normal : 　允許內容頂開指定的容器邊界
break-word : 　內容將在邊界內換行。如果需要，詞內換行（word-break）也行發生

 

 

八、 table清除4像素的間距

在table標籤加入 border-collapse:collapse; 屬性

 

table{border-collapse:collapse;}