CSS Display(顯示) 與 Visibility（可見性）
display：屬性設(shè)置一個元素應(yīng)如何顯示。
visibility：屬性指定一個元素應(yīng)可見還是隱藏。
隱藏元素 - display:none 或 - visibility:hidden
隱藏一個元素可以通過把display屬性設(shè)置為"none"，或把visibility屬性設(shè)置為"hidden"。
display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了但仍然會影響布局。
display(不占空間)：隱藏。none不顯示 block顯示
visibility(占空間)：隱藏。 hidden不顯示 visitle顯示
display:inline：可以把塊級元素變成內(nèi)聯(lián)元素
http://www.iis7.com/a/lm/yczmljgj/
display:block：可以把內(nèi)聯(lián)元素變成塊級元素，不允許有它內(nèi)部的嵌套塊元素。
塊級元素(block)特性：
總是獨(dú)占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;
內(nèi)聯(lián)元素(inline)特性：
和相鄰的內(nèi)聯(lián)元素在同一行;
寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，就是里面文字或圖片的大小;
塊級元素主要有：address , blockquote , center , dir , div , dl , fieldset , form , h2 , h3 , h4 , h5 , h6 , h7 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
內(nèi)聯(lián)元素主要有：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可變元素(根據(jù)上下文關(guān)系確定該元素是塊元素還是內(nèi)聯(lián)元素)：applet ,button ,del ,iframe , ins ,map ,object , script
CSS中塊級、內(nèi)聯(lián)元素的應(yīng)用：利用CSS我們可以擺脫上面表格里HTML標(biāo)簽歸類的限制，自由地在不同標(biāo)簽/元素上應(yīng)用我們需要的屬性。
主要用的CSS樣式有以下三個：
display:block -- 顯示為塊級元素
display:inline -- 顯示為內(nèi)聯(lián)元素
display:inline-block -- 顯示為內(nèi)聯(lián)塊元素，表現(xiàn)為同行顯示并可修改寬高內(nèi)外邊距等屬性
我們常將

元素加上display:inline-block樣式，原本垂直的列表就可以水平顯示了。
。。。。。。
CSS Position(定位)
CSS position 屬性，允許您將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務(wù)。
position 屬性指定了元素的定位類型。
position 屬性的五個值：
static：默認(rèn)值，沒有定位，元素出現(xiàn)在正常的流中，靜態(tài)定位的元素不會受到 top, bottom, left, right影響。
absolute：絕對定位，相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于，元素和其他元素重疊。
relative：相對定位，相對其正常位置，(相對靈活，按元素自己的位置)，相對定位元素的定位是相對其正常位置。
fixed：固定定位，即使窗口是滾動的它也不會移動，注意：Fixed定位在IE7和IE8下需要描述!DOCTYPE才能支持.Fixed定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間，F(xiàn)ixed定位的元素和其他元素重疊。
sticky：可以把它稱之為粘性定位，依賴于用戶的滾動，在 position:relative 與 position:fixed 定位之間切換
元素可以使用的頂部，底部，左側(cè)和右側(cè)屬性定位。然而，這些屬性無法工作，除非是先設(shè)定position屬性。他們也有不同的工作方式，這取決于定位方法
z-index：指定了一個元素的堆疊順序（哪個元素應(yīng)該放在前面，或后面），一個元素可以有正數(shù)或負(fù)數(shù)的堆疊順序，具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
clip:rect：裁剪元素，先有定位
overflow:scroll：內(nèi)容溢出時，顯示隱藏內(nèi)容
overflow:hidden：內(nèi)容溢出時，隱藏
overflow:auto：自動處理溢出內(nèi)容
overflow-x：指定如何處理右邊/左邊邊緣的內(nèi)容溢出元素的內(nèi)容區(qū)域。值：auto，hidden，scroll，visible，no-display，no-content
overflow-y：指定如何處理頂部/底部邊緣的內(nèi)容溢出元素的內(nèi)容區(qū)域。值：auto，hidden，scroll，visible，no-display，no-content
。。。。。。
CSS float(浮動)
CSS float 屬性定義元素在哪個方向浮動，浮動元素會生成一個塊級框，直到該塊級框的外邊緣碰到包含框或者其他的浮動框?yàn)橹埂?br/>浮動，可以讓行內(nèi)和塊變成行內(nèi)塊
浮動，會使元素向左或向右移動，其周圍的元素也會重新排列。
浮動，往往是用于圖像，但它在布局時一樣非常有用
元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框?yàn)橹埂?br/>浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果圖像是右浮動，文本流將環(huán)繞在它左邊
如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰
清除浮動 - 使用 clear
元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。
clear 屬性指定元素兩側(cè)不能出現(xiàn)浮動元素。
1.
浮動清除
2.overflow：hiddc，auto



創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的云安網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！


本文題目：CSS浮動和定位
文章轉(zhuǎn)載：http://weahome.cn/article/goiggg.html