溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS浮動和定位屬性介紹”，在日常操作中，相信很多人在CSS浮動和定位屬性介紹問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS浮動和定位屬性介紹”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
CSS Display(顯示) 與 Visibility（可見性）
display：屬性設置一個元素應如何顯示。
visibility：屬性指定一個元素應可見還是隱藏。
隱藏元素 - display:none 或 - visibility:hidden
隱藏一個元素可以通過把display屬性設置為"none"，或把visibility屬性設置為"hidden"。
display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了但仍然會影響布局。
display(不占空間)：隱藏。none不顯示 block顯示
visibility(占空間)：隱藏。 hidden不顯示 visitle顯示
display:inline：可以把塊級元素變成內聯元素
http://www.iis7.com/b/wzjk/
display:block：可以把內聯元素變成塊級元素，不允許有它內部的嵌套塊元素。
塊級元素(block)特性：
總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
內聯元素(inline)特性：
和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的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
內聯元素主要有：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
可變元素(根據上下文關系確定該元素是塊元素還是內聯元素)：applet ,button ,del ,iframe , ins ,map ,object , script
CSS中塊級、內聯元素的應用：利用CSS我們可以擺脫上面表格里HTML標簽歸類的限制，自由地在不同標簽/元素上應用我們需要的屬性。
主要用的CSS樣式有以下三個：
display:block -- 顯示為塊級元素
display:inline -- 顯示為內聯元素
display:inline-block -- 顯示為內聯塊元素，表現為同行顯示并可修改寬高內外邊距等屬性
我們常將<ul>元素加上display:inline-block樣式，原本垂直的列表就可以水平顯示了。
。。。。。。
CSS Position(定位)
CSS position 屬性，允許您將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。
position 屬性指定了元素的定位類型。
position 屬性的五個值：
static：默認值，沒有定位，元素出現在正常的流中，靜態定位的元素不會受到 top, bottom, left, right影響。
absolute：絕對定位，相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>，元素和其他元素重疊。
relative：相對定位，相對其正常位置，(相對靈活，按元素自己的位置)，相對定位元素的定位是相對其正常位置。
fixed：固定定位，即使窗口是滾動的它也不會移動，注意：Fixed定位在IE7和IE8下需要描述!DOCTYPE才能支持.Fixed定位使元素的位置與文檔流無關，因此不占據空間，Fixed定位的元素和其他元素重疊。
sticky：可以把它稱之為粘性定位，依賴于用戶的滾動，在 position:relative 與 position:fixed 定位之間切換
元素可以使用的頂部，底部，左側和右側屬性定位。然而，這些屬性無法工作，除非是先設定position屬性。他們也有不同的工作方式，這取決于定位方法
z-index：指定了一個元素的堆疊順序（哪個元素應該放在前面，或后面），一個元素可以有正數或負數的堆疊順序，具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
clip:rect：裁剪元素，先有定位
overflow:scroll：內容溢出時，顯示隱藏內容
overflow:hidden：內容溢出時，隱藏
overflow:auto：自動處理溢出內容
overflow-x：指定如何處理右邊/左邊邊緣的內容溢出元素的內容區域。值：auto，hidden，scroll，visible，no-display，no-content
overflow-y：指定如何處理頂部/底部邊緣的內容溢出元素的內容區域。值：auto，hidden，scroll，visible，no-display，no-content
。。。。。。
CSS float(浮動)
CSS float 屬性定義元素在哪個方向浮動，浮動元素會生成一個塊級框，直到該塊級框的外邊緣碰到包含框或者其他的浮動框為止。
浮動，可以讓行內和塊變成行內塊
浮動，會使元素向左或向右移動，其周圍的元素也會重新排列。
浮動，往往是用于圖像，但它在布局時一樣非常有用
元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果圖像是右浮動，文本流將環繞在它左邊
如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰
清除浮動 - 使用 clear
元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。
clear 屬性指定元素兩側不能出現浮動元素。
1.<div style="clear:both;"></div>浮動清除
2.overflow：hiddc，auto
到此，關于“CSS浮動和定位屬性介紹”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
