1.內(nèi)聯(lián)元素如何轉(zhuǎn)化成為塊元素
style="display:inline">塊變內(nèi)聯(lián)
style="display:block">內(nèi)聯(lián)變塊
2.元素類型有哪些剔交?他們的特征分別是什么矢门?
a塊元素
塊元素默認(rèn)占據(jù)一行漫拭,寬度與父容器一致隔嫡,高度為內(nèi)容+padding的高度虐拓。
塊元素可以通過設(shè)置margin和padding的值來控制塊元素與其他元素的邊距以及自身邊框與內(nèi)容的留白(內(nèi)邊距)贯被。
塊元素可以設(shè)置寬度和高度鞭光。
塊元素設(shè)置高度,padding笋庄,margin會(huì)撐大父容器的文檔流效扫,當(dāng)然這要在父容器沒有設(shè)置固定高度的前提下。
b行內(nèi)元素
對(duì)行內(nèi)元素設(shè)置高度相關(guān)的都是沒有效果的直砂,如設(shè)置margin-top菌仁,margin-bottom,padding-top静暂,padding-bottom济丘,height這些屬性都是無效的。
對(duì)行內(nèi)元素設(shè)置寬度也是無效的洽蛀,行內(nèi)元素的寬度只有左右內(nèi)邊距和內(nèi)容寬度來決定摹迷。
c行內(nèi)塊元素
行內(nèi)塊元素對(duì)其設(shè)置高度,寬度郊供,padding和margin都是有效果的峡碉。
行內(nèi)塊元素不會(huì)獨(dú)占一行,如果該行內(nèi)塊元素在設(shè)置完寬度驮审、padding鲫寄、margin之后,父容器后面的寬度還能夠容的下第二元素疯淫,那么第二個(gè)元素就會(huì)與第一個(gè)元素同行顯示地来,否則,另起一行熙掺。
兩個(gè)同行顯示的行內(nèi)塊元素未斑,對(duì)其上下的元素的間隔距離,以其中最大的間距為主币绩。
3.清浮動(dòng)有哪些方法蜡秽?你最喜歡哪個(gè)?為什么
a.父級(jí)div定義height
優(yōu)點(diǎn):簡(jiǎn)單、代碼少类浪、容易掌握
b.結(jié)尾處加空div標(biāo)簽clear:both
優(yōu)點(diǎn):簡(jiǎn)單载城、代碼少、瀏覽器支持好费就、不容易出現(xiàn)怪問題
c.父級(jí)div定義overflow:hidden
優(yōu)點(diǎn):簡(jiǎn)單诉瓦、代碼少、瀏覽器支持好
d.父級(jí)div定義overflow:auto
優(yōu)點(diǎn):簡(jiǎn)單力细、代碼少睬澡、瀏覽器支持好
e.父級(jí)div也一起浮動(dòng)
f.結(jié)尾處加br標(biāo)簽clear:both
我最喜歡結(jié)尾處加空div標(biāo)簽clear:both,比較方便眠蚂。
4.什么是BFC煞聪?如何才能得到一個(gè)BFC
5.Positon的值有哪些?
absolute
生成絕對(duì)定位的元素逝慧,相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位昔脯。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定啄糙。
fixed
生成絕對(duì)定位的元素,相對(duì)于瀏覽器窗口進(jìn)行定位云稚。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定隧饼。
relative
生成相對(duì)定位的元素,相對(duì)于其正常位置進(jìn)行定位静陈。
因此燕雁,"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。
static默認(rèn)值鲸拥。沒有定位拐格,元素出現(xiàn)在正常的流中(忽略 top, bottom, left, right 或者z-index聲明)。inherit規(guī)定應(yīng)該從父元素繼承 position 屬性的值刑赶。
6.說一下絕對(duì)定位捏浊,相對(duì)定位和固定定位的區(qū)別
1、相對(duì)定位不會(huì)失去文檔流中的位置角撞,而絕對(duì)定位和固定定位都會(huì)失去原來在文檔流中的位置而被下面的替代呛伴;
2、無論是相對(duì)谒所、絕對(duì)還是固定定位热康,當(dāng)偏移量超出上面、左邊瀏覽器窗體(或者說超出可視區(qū)域)的時(shí)候劣领,超出的內(nèi)容都會(huì)被隱藏姐军;而超出下面和右邊的時(shí)候,相對(duì)定位和固定定位會(huì)隱藏超出的部分內(nèi)容尖淘,而絕對(duì)定位會(huì)出現(xiàn)滾動(dòng)條奕锌。
3、相對(duì)村生、絕對(duì)和固定定位都會(huì)浮在正常文檔流的上面惊暴,如果遮蓋了正常顯示的文檔流,可以設(shè)置z-index來消除趁桃。
7.怎么改變一個(gè)div的層級(jí)辽话,無標(biāo)題文檔body{margin:0;}#div1{width:50px;height:50px;background:red;position:absolute;z-index:1;top:50px;}#div2{width:50px;height:50px;background:yellow;position:relative;}div1div2
無標(biāo)題文檔body{margin:0;}#div1{width:50px;height:50px;background:red;position:absolute;z-index:1;top:50px;}#div2{width:50px;height:50px;background:yellow;position:relative;}無標(biāo)題文檔body{margin:0;}#div1{width:50px;height:50px;background:red;position:absolute;z-index:1;top:50px;}#div2{width:50px;height:50px;background:yellow;position:relative;}
8.如何實(shí)現(xiàn)層疊的DIV1與DIV2,上面DIV1不透明下面DIV2透明卫病?
9.合并行屬性油啤,合并列屬性
colspan? 屬性規(guī)定單元格可橫跨的列數(shù)。
rowspan? 屬性規(guī)定單元格可橫跨的行數(shù)蟀苛。
合并的數(shù)量+剩余的數(shù)量=總數(shù)
一行合并刪當(dāng)前行益咬,跨行合并刪除當(dāng)前行的其他行。
10.讓DIV水平垂直居中
margin:50%;