第三次作業(yè)

問(wèn)答題

1.內(nèi)聯(lián)元素如何轉(zhuǎn)化成為塊元素

display-block

2.元素類(lèi)型有哪些？他們的特征分別是什么？

塊元素內(nèi)聯(lián)元素
塊元素：
1.獨(dú)占一行。
2.支持所有的樣式议谷。
3.不設(shè)置寬度時(shí)炉爆，寬度撐滿(mǎn)整行堕虹。
內(nèi)聯(lián)元素：
1.可以在一行顯示。
2.不支持寬高芬首，對(duì)上下的margin和padding等特性支持的也有問(wèn)題赴捞。
3.寬度由內(nèi)容撐開(kāi)。
代碼換行會(huì)被解析郁稍。

3.清浮動(dòng)有哪些方法赦政？你最喜歡哪個(gè)?為什么

1.clear清除浮動(dòng)
2.加高（問(wèn)題：擴(kuò)展性不好）
3.父級(jí)浮動(dòng) （問(wèn)題：頁(yè)面中所有元素都加浮動(dòng)，margin左右自動(dòng)失效（floats bad ！））
4.inline-block 清浮動(dòng)方法（問(wèn)題：margin左右auto失效）
5.空標(biāo)簽清浮動(dòng) （問(wèn)題：IE6 最小高度 19px恢着；（解決后IE6下還有2px偏差））
6.br清浮動(dòng) （問(wèn)題：不符合工作中：結(jié)構(gòu)桐愉、樣式、行為掰派，三者分離的要求从诲。）
7.after偽類(lèi) 清浮動(dòng)方法
8.overflow:hidden 清浮動(dòng)方法 overflow:hidden;溢出隱藏（問(wèn)題：需要配合寬度或者 zoom 兼容IE6 IE7）
最喜歡after偽類(lèi) 清浮動(dòng)方法，它沒(méi)有那么多的副作用靡羡，用起來(lái)相對(duì)來(lái)說(shuō)比較方便系洛。

4.什么是BFC？如何才能得到一個(gè)BFC

BFC(Block Formatting Context)略步，簡(jiǎn)單講描扯，它是提供了一個(gè)獨(dú)立布局的環(huán)境，每個(gè)BFC都遵守同一套布局規(guī)則趟薄。例如绽诚，在同一個(gè)BFC內(nèi)，盒子會(huì)一個(gè)挨著一個(gè)的排杭煎，相鄰盒子的間距是由margin決定且垂直方向的margin會(huì)重疊憔购。而float和clear float也只對(duì)同一個(gè)BFC內(nèi)的元素有效。
觸發(fā)BFC的條件：
a岔帽、float的值不為none玫鸟。
b、overflow的值不為visible犀勒。
c屎飘、display的值為table-cell, table-caption, inline-block中的任何一個(gè)。
d贾费、position的值不為relative和static钦购。
e、width|height|min-width|min-height:(!aotu)

5.Positon的值有哪些褂萧？

position:relative | absolute | fixed | static | inherit

6.說(shuō)一下絕對(duì)定位押桃，相對(duì)定位和固定定位的區(qū)別

絕對(duì)定位：
a.使元素完全脫離文檔流
b.使內(nèi)嵌支持寬高
c.塊屬性標(biāo)簽內(nèi)容撐開(kāi)寬度
d.如果有定位父級(jí)，相對(duì)于定位父級(jí)發(fā)生偏移导犹，沒(méi)有定位父級(jí)唱凯，相對(duì)于document發(fā)生偏移
e.相對(duì)定位一般都是配合絕對(duì)定位
f.提升層級(jí)
相對(duì)定位：
a.不影響元素本身的特性
b.不會(huì)使元素脫離文檔流
c.如果沒(méi)有定位偏移量，對(duì)元素本身沒(méi)有影響
d.提升層級(jí)
固定定位：
與相對(duì)定位的特征基本一致谎痢，差別是始終相對(duì)整個(gè)文檔進(jìn)行定位磕昼。問(wèn)題：IE6不支持固定定位。

7.怎么改變一個(gè)div的層級(jí)节猿，寫(xiě)出代碼讓DIV1在DIV2在下

通過(guò)z-index改變層級(jí)
.div1 { position:absolute; } .div2 { position:absolute; z-index:1; }

8.如何實(shí)現(xiàn)層疊的DIV1與DIV2票从，上面DIV1不透明下面DIV2透明？

.div1 { position:absolute; z-index:1; } .div2 { position:absolute; opacity：0-1; }

9.合并行屬性，合并列屬性

合并行:colspan=" "
合并列:rowspan=" "

10.讓DIV水平垂直居中

.box { width:300px; height:400px; position:absolute; left:50%; right:50%; margin:-200px 0px 0px -150px; }

編程題

1.

（1）方法一（類(lèi)型轉(zhuǎn)換）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
div{
    font:20px/30px "宋體";
    }
span {
    width:100px;
    height:100px;
    background:red;
    display:inline-block;
    }
</style>
</head>
<body>
<div >類(lèi)型轉(zhuǎn)換</div>
<span></span>
<span></span>
<span></span>

效果圖截圖

Paste_Image.png

（2）方法二（浮動(dòng)）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
div {
    font:20px/30px "宋體";
    }
span {
    width:100px;
    height:100px;
    background:red;
    float:left;
    margin-right:8px;
    }
</style>
</head>
<body>
<div>浮動(dòng)</div>
<span></span>
<span></span>
<span></span>
</body>
</html>

效果圖截圖

Paste_Image.png

（2）方法三（定位）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
span {
    font:20px/30px "宋體";
    }
div {
    width:100px;
    height:100px;
    background:red;
    }
.div2 {
    position:relative;
    left:108px;
    bottom:100px;
    }
.div3 {
    position:relative;
    left:216px;
    bottom:200px;
    }
</style>
</head>
<body>
<span>定位</span>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

效果圖截圖

Paste_Image.png

2.騰訊大學(xué)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
.title {
    width:228px;
    height:21px;
    position:relative;
    margin-bottom:19px;
    }
.title1 {
    width:19px;
    height:19px;
    border:1px solid #000;
    border-bottom:none;
    font:7px/15px "宋體";
    text-align:center;
    }
.title2 {
    position:absolute;
    left:31px;top:0px;
    font:19px/20px "宋體";
    color:#000;
        }
.head {
    width:228px;
    height:35px;
    position:relative;
    margin-bottom:15px;
    }
.head1 {
    width:110px;
    height:35px;
    border:1px solid #cccccc;
    border-bottom:none;
    background-image:url(xiaodian.jpg);
    background-repeat:no-repeat;
    background-position:-2px 30px;
    margin:0px 3px 0px 3px;
    font:12px/35px "宋體";
    text-align:center;
    color:#000;
    }
.head2 {
    width:110px;
    height:35px;
    border-bottom:1px solid #cccccc;
    position:absolute;
    left:114px;
    top:0px;
    background-image:url(xiaodian.jpg);
    background-repeat:no-repeat;
    background-position:right 32px;
    font:12px/35px "宋體";
    text-align:center;
    color:#cccccc;
    }
.body1 {
    width:228px;
    height:160px;
    background-image:url(tupian1.jpg);
    position:relative;
    margin-bottom:20px;
    }
.body11 {
    width:228px;
    height:26px;
    background:black;
    position:absolute;
    bottom:0px;
    opacity:0.5;
    }
.body12 {
    width:20px;
    height:26px;
    background:#e2291c;
    position:absolute;
    left:0px;
    bottom:0px;
    font:9px/26px "宋體";
    text-align:center;
    color:#fff;
    }
.body13 {
    width:228px;
    height:26px;
    position:absolute;
    bottom:0px;
    font:11px/26px "宋體";
    color:#fff;
    text-indent:30px;
    }
.body2 {
    width:228px;
    height:160px;
    background-image:url(tupian2.jpg);
    position:relative;
    margin-bottom:20px;
    }
.body21 {
    width:228px;
    height:26px;
    background:black;
    position:absolute;
    bottom:0px;
    opacity:0.5;
    }
.body22 {
    width:20px;
    height:26px;
    background:#e2291c;
    position:absolute;
    left:0px;
    bottom:0px;
    font:9px/26px "宋體";
    text-align:center;
    color:#fff;
    }
.body23 {
    width:228px;
    height:26px;
    position:absolute;
    bottom:0px;
    font:11px/26px "宋體";
    color:#fff;
    text-indent:30px;
    }
.body3 {
    width:228px;
    height:160px;
    background-image:url(tupian3.jpg);
    position:relative;
    margin-bottom:20px;
    }
.body31 {
    width:228px;
    height:26px;
    background:black;
    position:absolute;
    bottom:0px;
    opacity:0.5;
    }
.body32 {
    width:20px;
    height:26px;
    background:#f6a544;
    position:absolute;
    left:0px;
    bottom:0px;
    font:9px/26px "宋體";
    text-align:center;
    color:#fff;
    }
.body33 {
    width:228px;
    height:26px;
    position:absolute;
    bottom:0px;
    font:11px/26px "宋體";
    color:#fff;
    text-indent:30px;
    }
.body4 {
    width:228px;
    height:160px;
    background-image:url(tupian4.jpg);
    position:relative;
    margin-bottom:20px;
    }
.body41 {
    width:228px;
    height:26px;
    background:black;
    position:absolute;
    bottom:0px;
    opacity:0.5;
    }
.body42 {
    width:20px;
    height:26px;
    background:#ec5a2e;
    position:absolute;
    left:0px;
    bottom:0px;
    font:9px/26px "宋體";
    text-align:center;
    color:#fff;
    }
.body43 {
    width:228px;
    height:26px;
    position:absolute;
    bottom:0px;
    font:11px/26px "宋體";
    color:#fff;
    text-indent:30px;
    }
.body5 {
    width:228px;
    height:160px;
    background-image:url(tupian5.jpg);
    position:relative;
    margin-bottom:11px;
    }
.body51 {
    width:228px;
    height:26px;
    background:black;
    position:absolute;
    bottom:0px;
    opacity:0.5;
    }
.body52 {
    width:20px;
    height:26px;
    background:#f6a544;
    position:absolute;
    left:0px;
    bottom:0px;
    font:9px/26px "宋體";
    text-align:center;
    color:#fff;
    }
.body53 {
    width:228px;
    height:26px;
    position:absolute;
    bottom:0px;
    font:11px/26px "宋體";
    color:#fff;
    text-indent:30px;
    }
.body2222 {
    position:relative;
    }
.body6 {
    width:227px;
    height:30px;
    position:absolute;
    }
.body61 {
    width:0px;
    height:0px;
    border-top:16px solid #9fd15a;
    border-left:9px solid #9fd15a;
    border-right:9px solid #9fd15a;
    border-bottom:4px solid #fff;
    }
.body62 {
    font-size:11px;
    color:#fff;
    position:absolute;
    left:6px;
    top:4px;
    }
.body63 {
    width:227px;
    height:30px;
    font:12px/30px "宋體";
    text-indent:23px;
    color:#000;
    position:absolute;
    top:-9px;
    }
.body7 {
    width:227px;
    height:30px;
    position:absolute;
    }
.body71 {
    width:0px;
    height:0px;
    border-top:16px solid #9fd15a;
    border-left:9px solid #9fd15a;
    border-right:9px solid #9fd15a;
    border-bottom:4px solid #fff;
    position:absolute;
    left:-6px;
    top:13px;
    }
.body72 {
    font-size:11px;
    color:#fff;
    position:absolute;
    left:-3px;
    top:-12px;
    }
.body73 {
    width:227px;
    height:30px;
    font:12px/30px "宋體";
    text-indent:23px;
    color:#000;
    position:absolute;
    top:-9px;
    }   
.body8 {
    width:227px;
    height:30px;
    position:absolute;
    }
.body81 {
    width:0px;
    height:0px;
    border-top:16px solid #9fd15a;
    border-left:9px solid #9fd15a;
    border-right:9px solid #9fd15a;
    border-bottom:4px solid #fff;
    position:absolute;
    left:-6px;
    top:13px;
    }
.body82 {
    font-size:11px;
    color:#fff;
    position:absolute;
    left:-3px;
    top:-12px;
    }
.body83 {
    width:227px;
    height:30px;
    font:12px/30px "宋體";
    text-indent:23px;
    color:#000;
    position:absolute;
    top:-9px;
    }
.body9 {
    width:227px;
    height:30px;
    position:absolute;
    }
.body91 {
    width:0px;
    height:0px;
    border-top:16px solid #9fd15a;
    border-left:9px solid #9fd15a;
    border-right:9px solid #9fd15a;
    border-bottom:4px solid #fff;
    position:absolute;
    left:-6px;
    top:13px;
    }
.body92 {
    font-size:11px;
    color:#fff;
    position:absolute;
    left:-3px;
    top:-12px;
    }
.body93 {
    width:227px;
    height:30px;
    font:12px/30px "宋體";
    text-indent:23px;
    color:#000;
    position:absolute;
    top:-9px;
    }
.body10 {
    width:227px;
    height:30px;
    position:absolute;
    }
.body101 {
    width:0px;
    height:0px;
    border-top:16px solid #9fd15a;
    border-left:9px solid #9fd15a;
    border-right:9px solid #9fd15a;
    border-bottom:4px solid #fff;
    position:absolute;
    left:-6px;
    top:13px;
    }
.body102 {
    font-size:11px;
    color:#fff;
    position:absolute;
    left:-3px;
    top:-12px;
    }
.body103 {
    width:227px;
    height:30px;
    font:12px/30px "宋體";
    text-indent:23px;
    color:#000;
    position:absolute;
    top:-9px;
    }
</style>
</head>
<body>
<div class="box">
<div class="title">
<div class="title1">TOP</div>
<div class="title2">排行榜</div>
</div>
<div class="head">
<div class="head1">最熱排行</div>
<div class="head2">新課上線(xiàn)</div>
</div>
<div class="body">
<div class="body1">
<div class="body11"></div>
<div class="body12">1</div>
<div class="body13">張小龍：微信四大價(jià)值觀(guān)</div>
</div>
<div class="body2">
<div class="body21"></div>
<div class="body22">2</div>
<div class="body23">劉超：互聯(lián)網(wǎng)新時(shí)代需要什么樣...</div>
</div>
<div class="body3">
<div class="body31"></div>
<div class="body32">3</div>
<div class="body33">馬化騰：騰訊將專(zhuān)注于做互聯(lián)網(wǎng)...</div>
</div>
<div class="body4">
<div class="body41"></div>
<div class="body42">4</div>
<div class="body43">IT領(lǐng)袖峰會(huì)圓桌會(huì)談：互聯(lián)網(wǎng)下...</div>
</div>
<div class="body5">
<div class="body51"></div>
<div class="body52">5</div>
<div class="body53">微信支付對(duì)實(shí)體商業(yè)的價(jià)值幾何?</div>
</div>
<div class="body2222">
<div class="body6">
<div class="body61"></body>
<div class="body62">6</body>
<div class="body63">張小龍：小程序正式發(fā)布峰鄙，開(kāi)...</body>
</div>
<div class="body7">
<div class="body71"></body>
<div class="body72">7</body>
<div class="body73">馬化騰：通向互聯(lián)網(wǎng)未來(lái)的七...</body>
</div>
<div class="body8">
<div class="body81"></body>
<div class="body82">8</body>
<div class="body83">馬化騰：騰訊現(xiàn)在只做兩件事</body>
</div>
<div class="body9">
<div class="body91"></body>
<div class="body92">9</body>
<div class="body93">使用UE4制作VR內(nèi)容的優(yōu)化</body>
</div>
<div class="body10">
<div class="body101"></body>
<div class="body102">10</body>
<div class="body103">何凌南：謠言在想什么</body>
</div>
</div>
</div>
</div>                              ps:有史以來(lái)最長(zhǎng)的代碼浸间，累到吐血(╥﹏╥)
</body>
</html>

效果圖截圖

Paste_Image.png

。吟榴。发框。不會(huì)用ps把兩張圖拼一起，分開(kāi)截的圖(╥﹏╥)

學(xué)習(xí)心得：作業(yè)真的是一次比一次難煤墙！應(yīng)該是方法太麻煩了梅惯，第二個(gè)編程作業(yè)一共花了六七個(gè)小時(shí)才做出來(lái)，前幾天有事情耽誤了三天課程仿野，結(jié)果我也用了三天把前面的攆了回來(lái)铣减，結(jié)果現(xiàn)在的課程也落下三天......
做這個(gè)東西真的是累，從早晨一直在電腦前坐到晚上脚作，無(wú)論如何吧葫哗，總之最終把東西做出來(lái)了真的是特別高興，也感謝同學(xué)們和學(xué)長(zhǎng)們的幫助球涛。

百度云鏈接: http://pan.baidu.com/s/1o7TDixc
密碼: j5nt

最后編輯于：2017.12.05 07:25:59

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末劣针，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子亿扁，更是在濱河造成了極大的恐慌捺典，老刑警劉巖，帶你破解...
沈念sama閱讀 216,544評(píng)論 6贊 501
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件从祝，死亡現(xiàn)場(chǎng)離奇詭異襟己，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)牍陌，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,430評(píng)論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)擎浴，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人毒涧，你說(shuō)我怎么就攤上這事贮预。” “怎么了契讲？”我有些...
開(kāi)封第一講書(shū)人閱讀 162,764評(píng)論 0贊 353
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵仿吞，是天一觀(guān)的道長(zhǎng)。經(jīng)常有香客問(wèn)我怀泊，道長(zhǎng)茫藏，這世上最難降的妖魔是什么误趴？我笑而不...
開(kāi)封第一講書(shū)人閱讀 58,193評(píng)論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任霹琼，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘枣申。我一直安慰自己售葡，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 67,216評(píng)論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布忠藤。她就那樣靜靜地躺著挟伙，像睡著了一般。火紅的嫁衣襯著肌膚如雪模孩。梳的紋絲不亂的頭發(fā)上尖阔，一...
開(kāi)封第一講書(shū)人閱讀 51,182評(píng)論 1贊 299
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音榨咐，去河邊找鬼介却。笑死，一個(gè)胖子當(dāng)著我的面吹牛块茁，可吹牛的內(nèi)容都是我干的齿坷。我是一名探鬼主播，決...
沈念sama閱讀 40,063評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼数焊，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼永淌！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起佩耳，我...
開(kāi)封第一講書(shū)人閱讀 38,917評(píng)論 0贊 274
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤遂蛀，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后干厚，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體答恶，經(jīng)...
沈念sama閱讀 45,329評(píng)論 1贊 310
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,543評(píng)論 2贊 332
?白月光啟示錄
正文我和宋清朗相戀三年萍诱，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了悬嗓。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 39,722評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡裕坊，死狀恐怖包竹，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情籍凝，我是刑警寧澤周瞎，帶...
沈念sama閱讀 35,425評(píng)論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站饵蒂，受9級(jí)特大地震影響声诸，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜退盯，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,019評(píng)論 3贊 326
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一彼乌、第九天我趴在偏房一處隱蔽的房頂上張望泻肯。院中可真熱鬧，春花似錦慰照、人聲如沸灶挟。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 31,671評(píng)論 0贊 22
一樁弒父案毒租，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)稚铣。三九已至，卻和暖如春墅垮，著一層夾襖步出監(jiān)牢的瞬間惕医，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 32,825評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工算色，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留曹锨，地道東北人。一個(gè)月前我還...
沈念sama閱讀 47,729評(píng)論 2贊 368
代替公主和親
正文我出身青樓剃允，卻偏偏與公主長(zhǎng)得像沛简，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子斥废，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,614評(píng)論 2贊 353

第三次作業(yè)

問(wèn)答題

1.內(nèi)聯(lián)元素如何轉(zhuǎn)化成為塊元素

2.元素類(lèi)型有哪些？他們的特征分別是什么？

3.清浮動(dòng)有哪些方法赦政？你最喜歡哪個(gè)?為什么

4.什么是BFC？如何才能得到一個(gè)BFC

5.Positon的值有哪些褂萧？

6.說(shuō)一下絕對(duì)定位押桃，相對(duì)定位和固定定位的區(qū)別

7.怎么改變一個(gè)div的層級(jí)节猿，寫(xiě)出代碼讓DIV1在DIV2在下

8.如何實(shí)現(xiàn)層疊的DIV1與DIV2票从，上面DIV1不透明下面DIV2透明？

9.合并行屬性，合并列屬性

10.讓DIV水平垂直居中

編程題

1.

2.騰訊大學(xué)

推薦閱讀更多精彩內(nèi)容