亚洲av无码一区东京热_ 理解CSS浮動(dòng)float、定位position

一 . 浮動(dòng)float

I . 定義及規則

float默認為none,對應標準流的情況。當float : left;時(shí)，元素就會(huì )向其父元素的左側靠緊，脫離標準流，同時(shí)寬度不再伸展至充滿(mǎn)父容器，而是根據自身內容來(lái)確定。

II . 演示規則

準備代碼

XML/HTML Code復制內容到剪貼板

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body
{
margin: 0;
padding: 0;
}
#father
{
background-color: cyan;
/*父級div 沒(méi)有定位造成子div的margin-top傳遞給父級*/
position: absolute;
}
#father *
{
margin: 10px;
padding: 10px;
border: 1px dashed red;
}
#son1
{
}
#son2
{
}
#son3
{
}
</style>
</head>
<body>
<div id="father">
<div id="son1">#son1</div>
<div id="son2">#son2</div>
<div id="son3">#son3-son3son3son3</div>
<p>
這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字
</p>
</div>
</body>
</html>

1、中間給#father加上position:absolute,是為了消除未定位父div的margin-top傳遞問(wèn)題,相關(guān)內容如下

嵌套div中margin-top轉移問(wèn)題的解決辦法

在這兩個(gè)瀏覽器中，有兩個(gè)嵌套關(guān)系的div，如果外層div的父元素padding值為0，那么內層div的margin-top或者margin-bottom的值會(huì )“轉移”給外層div。

XML/HTML Code復制內容到剪貼板

<!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ú)標題文檔</title>
</head>
<body>
<div style="background-color:#FF0000;width:300px; height:100px">上部層</div>
<div style="background-color:#009900; width:300px; height:300px;overflow:hidden ">
<div style="margin:50px; background-color:#000000;width:200px; height:200px"">子層</div>
</div>
</body>
</html>

原因：盒子沒(méi)有獲得 haslayout 造成 margin-top無(wú)效

解決辦法：
1、在父層div加上：overflow:hidden；
2、把margin-top外邊距改成padding-top內邊距；
3、父元素產(chǎn)生邊距重疊的邊有不為 0 的 padding 或寬度不為 0 且 style 不為 none 的 border。
    父層div加： padding-top: 1px;
4、讓父元素生成一個(gè) block formating context，以下屬性可以實(shí)現
    * float: left/right
    * position: absolute
    * display: inline-block/table-cell(或其他 table 類(lèi)型)
    * overflow: hidden/auto
   父層div加：position: absolute;

顯示效果為

2、1,2的float分別為left right時(shí),有

可見(jiàn)1,2脫離標準流,標準流中的son3當他們不存在,于是son3代替原來(lái)son1的位置,而son1的左border、son2的右border與son3的左右border重合

3、當1,2,3全都float left時(shí)

文字圍繞著(zhù)float過(guò)的div

4、1,2左浮動(dòng)，3右浮動(dòng)，當窗口寬度減小時(shí)，3會(huì )被擠下來(lái)

當3左浮動(dòng)，2右浮動(dòng)的時(shí)候，顯示為

當瀏覽器窗口寬度減小時(shí)，猜猜誰(shuí)會(huì )被擠下來(lái)，son2么？

答案還是son3，規則為：寫(xiě)在html文件中后面的會(huì )被擠下來(lái)，在html文件中，son3在son2后面，因此總是son3先擠下來(lái)。

5、增加son1高度，son3擠下來(lái)時(shí)會(huì )卡在那里

6、刪除盒子中的文字，3個(gè)子div全部左浮動(dòng)
顯示為

父div中的三個(gè)子div全部脫離標準流了,父div就縮成一條線(xiàn)了,可以用clear來(lái)修正
加一個(gè)margin-padding-border全為0,clear為both的空div,來(lái)?yè)未蟾竏iv

III . clear清除浮動(dòng)
如果前面有float:left的元素,他會(huì )影響下面元素,如上例中的p,在p元素中寫(xiě)clear : left即可消除前面左浮動(dòng)元素對本元素的影響.同理clear:both是左右都清除.

二 . 定位position

position取值有static absolute relative fixed

1. static
這個(gè)是默認的,即標準流排下來(lái),就是static定位方式.

2. fixed
在瀏覽器窗口中固定,什么論壇中的[回到頂部]這種按鈕就是fixed做的
練習做個(gè)回到頂部玩玩

CSS Code復制內容到剪貼板

<div id="backToTop">
回到頂部
</div>
#backToTop
{
width: 100px;
height: 50px;
background-color: red;
color: white;
cursor: pointer;
border-radius: 25px 0 0 25px;
padding-left: 20px;
text-align: center;
line-height: 50px;
position: fixed;
bottombottom: 80px;
rightright: 0;
}

顯示效果

3. relative相對定位

相對于自己的偏移,而且不脫離標準流,使用top/bottom left/right指定偏移量

4. absolute絕對定位

根據別的已定位元素進(jìn)行定位,應用absolute規則的脫離標準流

1）、這個(gè)別的元素:
離它最近的已定位的祖先元素或者瀏覽器窗口,當找不到前面的祖先元素時(shí),就以后者瀏覽器窗口來(lái)定位.
2）、已經(jīng)定位 : 是指position已經(jīng)設置,而且不是static...即position值不為static就是已經(jīng)定位的元素,未設置position或設置為static認為它沒(méi)有定位.
Trick

只設置 position : absolute,而不設置top/bottom/left/right值,那么元素會(huì )保持在原地,但是已經(jīng)脫離標準流.

三 . display

display取值有inline block none

設置為none，即可將其隱藏，像inline-block等新添加的

以上就是本文的全部?jì)热?，希望對大家學(xué)習CSS教程有所幫助。

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久