這篇文章主要介紹“CSS浮動(dòng)和定位屬性介紹”，在日常操作中，相信很多人在CSS浮動(dòng)和定位屬性介紹問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS浮動(dòng)和定位屬性介紹”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！
CSS Display(顯示) 與 Visibility（可見性）
display：屬性設(shè)置一個(gè)元素應(yīng)如何顯示。
visibility：屬性指定一個(gè)元素應(yīng)可見還是隱藏。
隱藏元素 - display:none 或 - visibility:hidden
隱藏一個(gè)元素可以通過把display屬性設(shè)置為"none"，或把visibility屬性設(shè)置為"hidden"。
display:none可以隱藏某個(gè)元素，且隱藏的元素不會(huì)占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會(huì)從頁(yè)面布局中消失。
visibility:hidden可以隱藏某個(gè)元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了但仍然會(huì)影響布局。
display(不占空間)：隱藏。none不顯示 block顯示
visibility(占空間)：隱藏。 hidden不顯示 visitle顯示
display:inline：可以把塊級(jí)元素變成內(nèi)聯(lián)元素
http://www.iis7.com/b/wzjk/
display:block：可以把內(nèi)聯(lián)元素變成塊級(jí)元素，不允許有它內(nèi)部的嵌套塊元素。
塊級(jí)元素(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)都不可改變，就是里面文字或圖片的大小;
塊級(jí)元素主要有：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
可變?cè)?根據(jù)上下文關(guān)系確定該元素是塊元素還是內(nèi)聯(lián)元素)：applet ,button ,del ,iframe , ins ,map ,object , script
CSS中塊級(jí)、內(nèi)聯(lián)元素的應(yīng)用：利用CSS我們可以擺脫上面表格里HTML標(biāo)簽歸類的限制，自由地在不同標(biāo)簽/元素上應(yīng)用我們需要的屬性。
主要用的CSS樣式有以下三個(gè)：
display:block -- 顯示為塊級(jí)元素
display:inline -- 顯示為內(nèi)聯(lián)元素
display:inline-block -- 顯示為內(nèi)聯(lián)塊元素，表現(xiàn)為同行顯示并可修改寬高內(nèi)外邊距等屬性
我們常將
。。。。。。
CSS Position(定位)
CSS position 屬性，允許您將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個(gè)表格才能完成的任務(wù)。
position 屬性指定了元素的定位類型。
position 屬性的五個(gè)值：
static：默認(rèn)值，沒有定位，元素出現(xiàn)在正常的流中，靜態(tài)定位的元素不會(huì)受到 top, bottom, left, right影響。
absolute：絕對(duì)定位，相對(duì)于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對(duì)于，元素和其他元素重疊。
relative：相對(duì)定位，相對(duì)其正常位置，(相對(duì)靈活，按元素自己的位置)，相對(duì)定位元素的定位是相對(duì)其正常位置。
fixed：固定定位，即使窗口是滾動(dòng)的它也不會(huì)移動(dòng)，注意：Fixed定位在IE7和IE8下需要描述!DOCTYPE才能支持.Fixed定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間，F(xiàn)ixed定位的元素和其他元素重疊。
sticky：可以把它稱之為粘性定位，依賴于用戶的滾動(dòng)，在 position:relative 與 position:fixed 定位之間切換
元素可以使用的頂部，底部，左側(cè)和右側(cè)屬性定位。然而，這些屬性無法工作，除非是先設(shè)定position屬性。他們也有不同的工作方式，這取決于定位方法
z-index：指定了一個(gè)元素的堆疊順序（哪個(gè)元素應(yīng)該放在前面，或后面），一個(gè)元素可以有正數(shù)或負(fù)數(shù)的堆疊順序，具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
clip:rect：裁剪元素，先有定位
overflow:scroll：內(nèi)容溢出時(shí)，顯示隱藏內(nèi)容
overflow:hidden：內(nèi)容溢出時(shí)，隱藏
overflow:auto：自動(dòng)處理溢出內(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(浮動(dòng))
CSS float 屬性定義元素在哪個(gè)方向浮動(dòng)，浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，直到該塊級(jí)框的外邊緣碰到包含框或者其他的浮動(dòng)框?yàn)橹埂?/p>
浮動(dòng)，可以讓行內(nèi)和塊變成行內(nèi)塊
浮動(dòng)，會(huì)使元素向左或向右移動(dòng)，其周圍的元素也會(huì)重新排列。
浮動(dòng)，往往是用于圖像，但它在布局時(shí)一樣非常有用
元素的水平方向浮動(dòng)，意味著元素只能左右移動(dòng)而不能上下移動(dòng)。
一個(gè)浮動(dòng)元素會(huì)盡量向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>
浮動(dòng)元素之后的元素將圍繞它。
浮動(dòng)元素之前的元素將不會(huì)受到影響。
如果圖像是右浮動(dòng)，文本流將環(huán)繞在它左邊
如果你把幾個(gè)浮動(dòng)的元素放到一起，如果有空間的話，它們將彼此相鄰
清除浮動(dòng) - 使用 clear
元素浮動(dòng)之后，周圍的元素會(huì)重新排列，為了避免這種情況，使用 clear 屬性。
clear 屬性指定元素兩側(cè)不能出現(xiàn)浮動(dòng)元素。
1.
浮動(dòng)清除2.overflow：hiddc，auto
到此，關(guān)于“CSS浮動(dòng)和定位屬性介紹”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
重慶分公司
重慶分公司
