web前端之Html和Css應(yīng)用中的細節(jié)問題

1譬圣、居中的n種方法：

①、margin: 0 20%;

——設(shè)置margin上下外邊距的值設(shè)置為0痢掠，左右外邊距設(shè)置成相同的百分比，既可將盒子居中只估。

②志群、margin: 0 auto;

width: 1000px;

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

③吁脱、#outer_div

{

padding: 30px;

text-align: center;

}

#inner_div

{display: inline-block; /*行內(nèi)塊元素*/

padding: 50px;

background-color: red;}

——使用兩個盒子的嵌套實現(xiàn)，這里只需要將父盒子中的text-align的值設(shè)置為center彬向，然后再將子盒子display的值設(shè)置成inline-block（行內(nèi)塊元素）便可實現(xiàn)居中兼贡。

2、關(guān)于margin屬性之外邊距合并問題：

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

a里烦、全部都為正值凿蒜，取最大者；

b胁黑、不全是正值废封，則都取絕對值，然后用正值減去最大值丧蘸；

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

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

③颈畸、設(shè)置了overflow屬性的元素和它的子元素之間的margin不會被合并（overflow取值為visible除外）乌奇。

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

⑤徙缴、設(shè)置了display:inline-block的元素试伙，垂直margin不會被合并，甚至和他們的子元素之間也是一樣于样。

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

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

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

一個應(yīng)用了清除操作的元素的margin-top絕不會和它的塊級父元素的margin-bottom合并威沫。

注意贤惯，那些已經(jīng)被合并覆蓋的元素的位置對其他已經(jīng)被合并的元素的位置沒有任何影響；只有在對這些元素的子元素定位時壹甥，border-top邊界位置才是必需的救巷。

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

解決方案：

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

l 把margin-top外邊距改成padding-top內(nèi)邊距;

l 父元素產(chǎn)生邊距重疊的邊有不為 0 的 padding 或?qū)挾炔粸?0 且 style 不為 none 的 border

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

讓父元素生成一個 block formating context棒假，以下屬性可以實現(xiàn)

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做的，觸發(fā)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標(biāo)簽客年，以及css的clear屬性

⑥、采用br標(biāo)簽籍琳，以及css的clear屬性

⑦蝌数、采用br標(biāo)簽愕掏，以及其自身HTML的clear屬性

4、瀏覽器的兼容性：

①顶伞、瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J的外補丁和內(nèi)補丁不同

問題癥狀：隨便寫幾個標(biāo)簽饵撑，不加樣式控制的情況下，各自的margin 和padding差異較大唆貌。

碰到頻率:100%

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

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

②锨咙、瀏覽器兼容問題二：塊屬性標(biāo)簽float后语卤，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大

問題癥狀:常見癥狀是IE6中后面的一塊被頂?shù)较乱恍?/p>

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

解決方案：在float的標(biāo)簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性

備注：我們最常用的就是div+CSS布局了粱侣，而div就是一個典型的塊屬性標(biāo)簽，橫向布局的時候我們通常都是用div float實現(xiàn)的蓖宦，橫向的間距設(shè)置如果用margin實現(xiàn)，這就是一個必然會碰到的兼容性問題油猫。

③稠茂、瀏覽器兼容問題三：設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6情妖，IE7睬关，遨游中高度超出自己設(shè)置高度

問題癥狀：IE6、7和遨游里這個標(biāo)簽的高度不受控制毡证，超出自己設(shè)置的高度

碰到頻率：60%

解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度电爹。

備注：這種情況一般出現(xiàn)在我們設(shè)置小圓角背景的標(biāo)簽里。出現(xiàn)這個問題的原因是IE8之前的瀏覽器都會給標(biāo)簽一個最小默認的行高的高度料睛。即使你的標(biāo)簽是空的丐箩，這個標(biāo)簽的高度還是會達到默認的行高摇邦。

④、瀏覽器兼容問題四：行內(nèi)屬性標(biāo)簽屎勘，設(shè)置display:block后采用float布局施籍，又有橫行的margin的情況，IE6間距bug

問題癥狀：IE6里的間距比超過設(shè)置的間距

碰到幾率：20%

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

備注：行內(nèi)屬性標(biāo)簽概漱，為了設(shè)置寬高丑慎，我們需要設(shè)置display:block;(除了input標(biāo)簽比較特殊)。在用float布局并有橫向的margin后瓤摧，在IE6下竿裂，他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內(nèi)屬性標(biāo)簽照弥，所以我們再加上display:inline的話腻异，它的高寬就不可設(shè)了。這時候我們還需要在display:inline后面加入display:talbe产喉。

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

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

碰到幾率：20%

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

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

⑥九秀、瀏覽器兼容問題六：標(biāo)簽最低高度設(shè)置min-height不兼容

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

碰到幾率：5%

解決方案：如果我們要設(shè)置一個標(biāo)簽的最小高度200px粘我，需要進行的設(shè)置為：

{

min-height:200px;

height:auto !important;

height:200px;

overflow:visible;

}

⑦鼓蜒、瀏覽器兼容問題七：透明度的兼容CSS設(shè)置

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

分類:css

標(biāo)簽:css

好文要頂關(guān)注我收藏該文