2/25/2017 10:26:17 PM
css定位
一切皆為框：
- div、h1 或 p 元素常常被稱為塊級元素，即“塊框”。
- span拂共，strong等稱為行內(nèi)元素，即“行內(nèi)框”姻几。
- 把文本添加到一個塊級元素的開頭（
如<div> some text <p>Some more text.</p> </div>）宜狐，即使沒有把這些文本定義為段落势告，它也會被當(dāng)作段落對待，這種情況下這個框稱為無名框抚恒，不與專門定義的元素相關(guān)聯(lián)咱台。 - 塊級元素的文本行也會發(fā)生類似的情況。假設(shè)有一個包含三行文本的段落俭驮。每行文本形成一個無名框回溺。無法直接對無名塊或行框應(yīng)用樣式，因為沒有可以應(yīng)用樣式的地方（注意表鳍，行框和行內(nèi)框是兩個概念）。
CSS 有三種基本的定位機制：普通流祥诽、浮動和絕對定位譬圣。默認(rèn)普通流。
塊級框從上到下一個接一個地排列雄坪，框之間的垂直距離是由框的垂直margin計算出來（margin合并）厘熟。
行內(nèi)框在一行中水平布置∥可以使用水平內(nèi)邊距（padding-left/right）绳姨、邊框（border-left/right）和外邊距（margin-left/right）調(diào)整它們的間距。但是阔挠，垂直內(nèi)邊距飘庄、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框（Line Box）购撼，行框的高度總是足以容納它包含的所有行內(nèi)框跪削。
如下：
<!DOCTYPE html>
<html>
<head>
<title>空標(biāo)簽合并</title>
<style type="text/css">
br{margin: 20px;background-color: #0f0;}
br.NO1{margin: 20px;margin-bottom: 30px;background-color: #00f;}
p{margin: 10px 15px;background-color: #f00;color: #00f;}
body{background-color: #000;}
div{background-color: #fff;color: #aaa;}
p.inline span{background-color: #dad;margin: 60px;}
</style>
</head>
<body>
<br/>
<br class="NO1" />
<p>我沒有邊框</p>
<br/>
<div>
some text
<p class="inline">Some more text.Some more <span>Some more text.</span>Some more text.Some more text.Some more text.Some more text.Some more text.Some more text.Some more text.Some more text.</p>
<p>我們的天空我們的天空我們的天空我們的天空我們的天空我們的天空我們的天空我們的天空我們的天空我們的天空我們的天空我們的天空我們的天空我們的天空</p>
</div>
</body>
</html>
position定位屬性：
值：static；relative迂求；absolute碾盐；fixed
-
static默認(rèn)沒有定位
top,bottom,left,right或者z-index聲明 -
relative（相對定位）相對于自身：定義元素框偏移某個距離，這個距離可以為負值揩局。
格式如下：p{position: relative;left: 70px;top：80px;}毫玖，將這個屬性加到上例代碼中p選擇器內(nèi)。
此時會發(fā)生什么情況呢凌盯？我原本理解的是元素框向左偏移70px付枫，向上偏移80px，但實際如下圖：
圖片說明文字
relative描述為“生成相對定位的元素驰怎，相對于其正常位置（以元素框左上角為起點）進行定位励背。
注意：在使用相對定位時，無論是否進行移動砸西，元素仍然占據(jù)原來的空間叶眉。因此址儒，移動元素會導(dǎo)致它覆蓋其它框。
‘left:20’ 會向元素的left位置添加20 像素衅疙。”
所以position: relative;left: 70px;top：80px;的意思是向元素框left添加70px莲趣，top添加80px，實際即所有的p元素向右下偏移指定的值饱溢。
position:relative;left:-20px的意思是從元素框左側(cè)減去：“-20px”喧伞。
- absolute（絕對定位）相對于static定位以外的第一個已定位的父元素：如下：
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">這是帶有絕對定位的標(biāo)題</h2>
<p>通過絕對定位，元素可以放置到頁面上的任何位置绩郎。下面的標(biāo)題距離頁面左側(cè) 100px潘鲫，距離頁面頂部 150px。</p>
</body>
absolute絕對定位：絕對定位的元素的位置相對于最近的已定位祖先元素肋杖，如果元素沒有已定位的祖先元素溉仑，那么它的位置相對于最初的包含塊。
在本例中父元素為body状植，所以相對于整個頁面進行定位浊竟。指的是h2的margin的角點距離整個頁面左側(cè)100px，距離頁面頂部150px津畸。因為margin也屬于h2的一部分振定。
如果設(shè)置了absolute屬性彈沒有設(shè)置值，那么使用了absolute的元素在代碼中在哪個位置在瀏覽器中就還是在那個位置肉拓，absolute屬性定義的元素是脫離了文檔流后频。
設(shè)置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位暖途，包含塊可能是文檔中的另一個元素或者是初始包含塊徘郭。元素原先在正常文檔流中所占的空間會關(guān)閉，即完全脫離了正常的文檔流丧肴，（可能覆蓋在普通文本流上方）残揉，因此不占據(jù)空間，就好像該元素原來不存在一樣芋浮。元素定位后生成一個塊級框抱环，而不論原來它在正常流中生成何種類型的框。
提示：因為絕對定位的框與文檔流無關(guān)纸巷，所以它們可以覆蓋頁面上的其它元素镇草。可以通過設(shè)置 z-index 屬性來控制這些框的堆放次序瘤旨。
-
fixed（固定定位）相對于瀏覽器窗口
元素的margin角點相對于整個窗口的定位梯啤。可以把fixed看作是absolute的特殊情況存哲。
注意：
- 定位之后的元素A在顯示頁面上可能會覆蓋原本在此位置上的普通流元素B因宇，A有多大就覆蓋多達面積七婴。
- 可用像素和百分比設(shè)置定位值。
子元素在父元素中居中定位
當(dāng)子元素定位屬性為absolute/fixed察滑，這個時候子元素脫離了文本流打厘，父元素定位屬性為relative，在沒有設(shè)置偏移量的情況下贺辰，子元素永遠在父元素里面户盯，設(shè)置了偏移量之后可能會離開父元素的界面。
在不知道父元素尺寸的情況下饲化，將一個元素在父元素中居中放置莽鸭，最簡單的方式是，給父元素設(shè)定一個relative屬性吃靠，子元素設(shè)定一個absolute/fixed屬性硫眨，如下所示：
<head>
<style type="text/css">
p {
position: relative;
padding: 50px;
background-color: #f00;
}
span{position: absolute;
left: 50%;
top: 50%;
background-color: green;
transform: translate(-50%,-50%);}
</style>
</head>
<body>
<p>aswwwwwwwwwwd <span>artfgyhjk</span></p>
</body>
span元素在p元素內(nèi)，設(shè)定span{left: 50%;top: 50%;}撩笆，即span以p元素長寬為基數(shù)捺球，以自身左上角為基點缸浦，向右偏移50%夕冲，向下偏移50%，此時span元素左上角與p元素中心點對齊裂逐。我們要實現(xiàn)的是中心點與中心點對齊歹鱼，此時再額外設(shè)定一個transform: translate(-50%,-50%),使span以自身的長寬為基數(shù)，以自身左上角為基點卜高，向左偏移50%弥姻，向上偏移50%，成功啦~
注意：以下這兩段代碼實現(xiàn)的效果相同
span{position: absolute;
left: 50%;
top: 50%;
background-color: green;
transform: translate(-50%,-50%);}
span{position: absolute;
right: 50%;
bottom: 50%;
background-color: green;
transform: translate(50%,50%);}
設(shè)置元素的形狀
檢索或設(shè)置對象的可視區(qū)域掺涛。區(qū)域外的部分是透明的庭敦。
clip屬性剪裁絕對定位元素，只有當(dāng)position的值設(shè)定為“absolute”或“fixed”時薪缆，clip屬性才可以用秧廉。
clip值為auto（默認(rèn)）和shape。
- auto：默認(rèn)不剪裁拣帽。
- shape：設(shè)置元素的形狀疼电，唯一合法的形狀值是：rect (top, right, bottom, left)
rect(<number>|auto <number>|auto <number>|auto <number>|auto)： 依據(jù)上-右-下-左的順序提供自對象左上角為(0,0)坐標(biāo)計算的四個偏移數(shù)值，其中任一數(shù)值都可用auto替換减拭，即此邊不剪切蔽豺。
- 示例1：clip:rect(auto 50px 20px auto)
說明：上邊不剪切，從右往左剪切到圖片寬度為50px拧粪，從下往上剪切到圖片高度為20px修陡，左邊不剪切沧侥。
- 示例2：clip:rect(10px 70px 40px 10px)
說明：圖片從上往下剪切10px，從右往左剪切到圖片寬度為（70-10）px濒析，從下往上剪切到圖片高度為（40-10）px正什，從左往右剪切10px
即：盒子的實際高度為|bottom-top|，實際寬度為|right-left|号杏。
（和截圖時調(diào)整寬度和高度是一樣的道理）
