html5浮動層彈窗 求教 是html代碼

html

交城ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

style?type="text/css"

.black_overlay{????

display:?none;????

position:?absolute;top:?0%;????

left:?0%;????

width:?100%;????

height:?100%;????

background-color:?black;????

z-index:1001;????

-moz-opacity:?0.8;????

opacity:.80;????

filter:?alpha(opacity=80);??????

}????

.white_content{????

display:?none;????

position:?absolute;????

top:?25%;??left:?25%;????

width:?50%;????

height:?50%;????

padding:?16px;????

border:?16px?solid?black;????

background-color:?white;????

z-index:1002;????

overflow:auto????

}????

/style

script?type="text/javascript"

/script

body

input?type="button"?text="彈出層"?onClick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"

div?id="light"?class="white_content"????

a?href="#"?onClick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"?style="color:black;z-index:9999"Close/a????

div?style="width:715px;height:360px;border:#ccc?solid?1px;"?id="dituContent"

這里就是彈出的內(nèi)容

/div????

/div????

/body

/html

就是這樣的。使用postion屬性和層的隱藏和顯示就實(shí)現(xiàn)啦

html5 如果給父元素設(shè)置了浮動,他的子元素會跟著它一起提升一個(gè)層次嗎？

子元素會保持原來在父級的顯示方式，但是會跟隨父級浮動到對應(yīng)位置。

在前端中，父級的 浮動、定位都是不能夠繼承。

在HTML5 CSS3中,請簡述一下清除浮動的三種方法以及各自的優(yōu)缺點(diǎn)？

1、使用clear:both清除浮動

在代碼中在放一個(gè)空的div標(biāo)簽，然后給這個(gè)標(biāo)簽設(shè)置clear:both來清除浮動對頁面的影響。

優(yōu)點(diǎn)：簡單，方便兼容性好

缺點(diǎn)：因?yàn)闀斐山Y(jié)構(gòu)混亂，不利于后期維護(hù)

建議：一般情況下不建議使用該方法

2、利用偽元素clearfix來清除浮動

給父級元素添加了一個(gè):after偽元素，通過清除偽元素的浮動，達(dá)到撐起父元素高度的目的

.clearfix:after {

display: block;

clear: both;

content: "";

visibility: hidden;

height: 0;

}

.clearfix { zoom: 1; }

原理：IE8以上和非IE瀏覽器才支持:after，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題

優(yōu)點(diǎn)：瀏覽器支持好，不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）

缺點(diǎn)：代碼多，不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用，才能讓主流瀏覽器都支持

建議：推薦使用，建議定義在公共類，以減少css代碼

3、父級div定義overflow方法

當(dāng)給父元素設(shè)置了overflow樣式，不管是overflow:hidden或overflow:auto都可以清除浮動只要它的值不為visible就可以了。

.parent-container {

/* other style... */

overflow: hidden;

}

原理：它的本質(zhì)就是建構(gòu)了一個(gè)BFC，這樣使得達(dá)到撐起父元素高度的效果。

優(yōu)點(diǎn)：簡單，代碼少，瀏覽器支持好

缺點(diǎn)：不能和position配合使用，因?yàn)槌龅某叽绲臅浑[藏

建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用

4、雙偽元素方法的使用

通過給父元素設(shè)置雙偽元素來達(dá)到清除浮動的效果，即添加:before和:after偽元素。

.clearfix:before,.clearfix:after {

content: "";

display: block;

clear: both;

}

與方法2相同