CSS徹底研究(3)-浮動,定位 一 . 浮動float I . 定義及規則 float預設為none,對應標準流的情況。當float : left;時，元素就會向其父元素的左側靠緊，脫離標準流，同時寬度不再伸展至充滿父容器，而是根據自身內容來確定。 II . 演示規則 準備代碼 <html xml ...
CSS徹底研究(3)-浮動,定位
一 . 浮動float
I . 定義及規則
float預設為none,對應標準流的情況。當float : left;時，元素就會向其父元素的左側靠緊，脫離標準流，同時寬度不再伸展至充滿父容器，而是根據自身內容來確定。
II . 演示規則
準備代碼
<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 沒有定位 造成子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>- 中間給#father加上
position:absolute,是為了消除未定位父div的margin-top傳遞問題,見http://blog.sina.com.cn/s/blog_6bec36f9010110w9.html
顯示效果為
- 1,2的float分別為left right時,有
可見1,2脫離標準流,標準流中的son3當他們不存在,於是son3代替原來son1的位置,而son1的左border、son2的右border與son3的左右border重合 - 當1,2,3全都float left時
文字圍繞著float過的div - 1,2左浮動，3右浮動，當視窗寬度減小時，3會被擠下來
當3左浮動，2右浮動的時候，顯示為
當瀏覽器視窗寬度減小時，猜猜誰會被擠下來，son2麽？
答案還是son3，規則為 ： 寫在html文件中後面的會被擠下來，在html文件中，son3在son2後面，因此總是son3先擠下來。 - 增加son1高度，son3擠下來時會卡在那裡
- 刪除盒子中的文字，3個子div全部左浮動
顯示為
父div中的三個子div全部脫離標準流了,父div就縮成一條線了,可以用clear來修正
加一個margin-padding-border全為0,clear為both的空div,來撐大父div
III . clear清除浮動
如果前面有float:left的元素,他會影響下麵元素,如上例中的p,在p元素中寫clear : left即可消除前面左浮動元素對本元素的影響.同理clear:both是左右都清除.
二 . 定位position
position取值有static absolute relative fixed
1. static
這個是預設的,即標準流排下來,就是static定位方式.
2. fixed
在瀏覽器視窗中固定,什麼論壇中的[回到頂部]這種按鈕就是fixed做的
練習做個回到頂部玩玩
<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;
bottom: 80px;
right: 0;
}顯示效果
3. relative相對定位
相對於自己的偏移,而且不脫離標準流,使用top/bottom left/right指定偏移量
4. absolute絕對定位
根據別的已定位元素進行定位,應用absolute規則的脫離標準流
- 這個別的元素:
離它最近的已定位的祖先元素 或者 瀏覽器視窗,當找不到前面的祖先元素時,就以後者瀏覽器視窗來定位. - 已經定位 : 是指position已經設置,而且不是static...即position值不為static就是已經定位的元素,未設置position或設置為static認為它沒有定位.
Trick
只設置 position : absolute,而不設置top/bottom/left/right值,那麼元素會保持在原地,但是已經脫離標準流.
三 . display
display取值有inline block none
設置為none，即可將其隱藏，像inline-block等新添加的，參考http://www.w3school.com.cn/cssref/pr_class_display.asp
