第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

css float屬性

css float屬性

慕先生4543078 2017-06-19 11:11:05
<div></div> <div></div> <div></div> <div></div>div{ ????width:?100px; ????height:?100px; ????background:?red; ????margin:?5px; } div:nth-of-type(2){ ????float:?left; }結(jié)果我本來(lái)是想讓第二個(gè)、第三個(gè)<div>并列,水平拉開(kāi)5px對(duì)齊。我有幾個(gè)問(wèn)題:1、為什么第二個(gè)<div>加了float:left后margin都沒(méi)了?2、按理說(shuō)第三個(gè)<div>應(yīng)該是排在第二個(gè)<div>后面的,并且拉開(kāi)5px的margin的,這個(gè)和第二個(gè)<div>的外邊距沒(méi)什么關(guān)系,為什么會(huì)和第二個(gè)重疊了?而且加了float屬性后似乎上邊距消失了,這是為什么?3、我想讓第一個(gè)占一行,第四個(gè)占一行,第二、第三占一行,第二個(gè)和第三個(gè)并列應(yīng)該怎么寫(xiě)css?
查看完整描述

1 回答

已采納
?
李曉健

TA貢獻(xiàn)1036條經(jīng)驗(yàn) 獲得超461個(gè)贊

1:?第二個(gè)<div>加了float:left后margin是有的。

2:因?yàn)榈诙€(gè)設(shè)置了浮動(dòng),所以他會(huì)脫離文檔流,就會(huì)蓋在第三個(gè)的上面

3

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<style>
?div{
?width:?100px;
?height:?100px;
?margin:?5px;
?}
?div:nth-of-type(2),div:nth-of-type(3){
?display:?inline-block;
?}

?</style>
</head>
<body>
<div?style="background-color:?#00a854"></div>
<div?style="background-color:?red"></div>
<div?style="background-color:?blue"></div>
<div?style="background-color:?yellow"></div>
</body>
</html>


查看完整回答
反對(duì) 回復(fù) 2017-06-19
  • 慕先生4543078
    慕先生4543078
    感謝你的回答,關(guān)于第二點(diǎn)我還有個(gè)不明白的地方:第二個(gè)<div>設(shè)置了float屬性后,脫離文檔流,那不應(yīng)該是從頭排起嗎(即覆蓋到第一個(gè)<div>,從文檔的初始位置開(kāi)始)。這個(gè)“脫離文檔流”是以什么為標(biāo)準(zhǔn)來(lái)定位的?
  • 李曉健
    李曉健
    浮動(dòng)層:給元素的float屬性賦值后,就是脫離文檔流,進(jìn)行左右浮動(dòng),緊貼著父元素(默認(rèn)為body文本區(qū)域)的左右邊框。 而此浮動(dòng)元素在文檔流空出的位置,由后續(xù)的(非浮動(dòng))元素填充上去:塊級(jí)元素直接填充上去,若跟浮動(dòng)元素的范圍發(fā)生重疊,浮動(dòng)元素覆蓋塊級(jí)元素。內(nèi)聯(lián)元素:有空隙就插入。
  • qq_刮開(kāi)有獎(jiǎng)_0
    qq_刮開(kāi)有獎(jiǎng)_0
    float只對(duì)后邊元素有影響,是不會(huì)蓋到前邊元素上的
  • 1 回答
  • 1 關(guān)注
  • 2807 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)