web前端之Html和Css應用中的細節問題

1、居中的n種方法：

①、margin: 0 20%;

——設置margin上下外邊距的值設置為0，左右外邊距設置成相同的百分比，既可將盒子居中。

②、margin: 0 auto;

width: 1000px;

——設置margin上下外邊距的值設置為0，左右外邊距都設置成auto，然后再設置盒子的寬度，既可將盒子居中。

③、#outer_div

{

padding: 30px;

text-align: center;

}

#inner_div

{display: inline-block; /*行內塊元素*/

padding: 50px;

background-color: red;}

——使用兩個盒子的嵌套實現，這里只需要將父盒子中的text-align的值設置為center，然后再將子盒子display的值設置成inline-block（行內塊元素）便可實現居中。

2、關于margin屬性之外邊距合并問題：

①、在常規文檔流中，2個或以上的塊級盒模型相鄰的垂直margin會被合并。最終的margin值計算方法如下：

a、全部都為正值，取最大者；

b、不全是正值，則都取絕對值，然后用正值減去最大值；

c、沒有正值，則都取絕對值，然后用0減去最大值。

②、相鄰的盒模型中，如果其中的一個是浮動的（floated），垂直margin不會被合并，甚至一個浮動的盒模型和它的子元素之間也是這樣。

③、設置了overflow屬性的元素和它的子元素之間的margin不會被合并（overflow取值為visible除外）。

④、設置了絕對定位（position:absolute）的盒模型，垂直margin不會被合并，甚至和他們的子元素之間也是一樣。

⑤、設置了display:inline-block的元素，垂直margin不會被合并，甚至和他們的子元素之間也是一樣。

⑥、如果一個盒模型的上下margin相鄰，這時它的margin可能合并覆蓋（collapse through）它。在這種情況下，元素的位置（position）取決于它的相鄰元素的margin是否被合并。

a、如果元素的margin和它的父元素的margin-top折疊在一起，盒模型border-top的邊界定義和它的父元素相同。

b、另外，任意元素的父元素不參與margin的合并，或者說只有父元素的margin-bottom是參與計算的。如果元素的border-top非零，那么元素的border-top邊界位置和原來一樣。

一個應用了清除操作的元素的margin-top絕不會和它的塊級父元素的margin-bottom合并。

注意，那些已經被合并覆蓋的元素的位置對其他已經被合并的元素的位置沒有任何影響；只有在對這些元素的子元素定位時，border-top邊界位置才是必需的。

⑦、根元素的垂直margin不會被合并。

解決方案：

l 在父層div加上：overflow:hidden；

l 把margin-top外邊距改成padding-top內邊距;

l 父元素產生邊距重疊的邊有不為 0 的 padding 或寬度不為 0 且 style 不為 none 的 border

父層div加： padding-top: 1px;

讓父元素生成一個 block formating context，以下屬性可以實現

l * float: left/right

l * position: absolute

l * display: inline-block/table-cell(或其他 table 類型)

l * overflow: hidden/auto

l 父層div加：position: absolute;

3、float屬性的消除：

①、清除浮動方法一：（clear:both;）

ul{list-style:none;}

ul li{float:left; margin:5px;}

.clear{clear:both;overflow:hidden;}

②、清除浮動方法二：（overflow:auto）

{

list-style:none;

overflow:auto;

_zoom:1;

/*zoom是為了兼容ie6做的，觸發ie6下的haslayout屬性*/

}

ul li

{

float:left;

margin:5px;

}

③、清除浮動方法三：(:after 偽類元素)

#after ul:after

{

content: ".";

display: block;

height: 0;

line-height: 0;

clear: both;

visibility: hidden;

}

④、采用display:table將對象變成table形式

⑤、采用div標簽，以及css的clear屬性

⑥、采用br標簽，以及css的clear屬性

⑦、采用br標簽，以及其自身HTML的clear屬性

4、瀏覽器的兼容性：

①、瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補丁和內補丁不同

問題癥狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。

碰到頻率:100%

解決方案：CSS里 *{margin:0;padding:0;}

備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符*來設置各個標簽的內外補丁是0。

②、瀏覽器兼容問題二：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大

問題癥狀:常見癥狀是IE6中后面的一塊被頂到下一行

碰到頻率：90%（稍微復雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）

解決方案：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性

備注：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。

③、瀏覽器兼容問題三：設置較小高度標簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設置高度

問題癥狀：IE6、7和遨游里這個標簽的高度不受控制，超出自己設置的高度

碰到頻率：60%

解決方案：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度。

備注：這種情況一般出現在我們設置小圓角背景的標簽里。出現這個問題的原因是IE8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。

④、瀏覽器兼容問題四：行內屬性標簽，設置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug

問題癥狀：IE6里的間距比超過設置的間距

碰到幾率：20%

解決方案：在display:block;后面加入display:inline;display:table;

備注：行內屬性標簽，為了設置寬高，我們需要設置display:block;(除了input標簽比較特殊)。在用float布局并有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline后面加入display:talbe。

⑤、瀏覽器兼容問題五：圖片默認有間距

問題癥狀：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。

碰到幾率：20%

解決方案：使用float屬性為img布局

備注：因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道。（使用負margin，雖然能解決，但負margin本身就是容易引起瀏覽器兼容問題的用法，所以建議不要使用）

⑥、瀏覽器兼容問題六：標簽最低高度設置min-height不兼容

問題癥狀：因為min-height本身就是一個不兼容的CSS屬性，所以設置min-height時不能很好的被各個瀏覽器兼容

碰到幾率：5%

解決方案：如果我們要設置一個標簽的最小高度200px，需要進行的設置為：

{

min-height:200px;

height:auto !important;

height:200px;

overflow:visible;

}

⑦、瀏覽器兼容問題七：透明度的兼容CSS設置

做兼容頁面的方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容，當然熟練到一定的程度就沒這么麻煩了。建議經常會碰到兼容性問題的新手使用。很多兼容性問題都是因為瀏覽器對標簽的默認屬性解析不同造成的，只要我們稍加設置都能輕松地解決這些兼容問題。如果我們熟悉標簽的默認屬性的話，就能很好的理解為什么會出現兼容問題以及怎么去解決這些兼容問題。

分類:css

標簽:css

好文要頂關注我收藏該文