無標題文章

CSS之定位 一,課程導入; 正常文檔流:指的是HTML文檔在進行內容布局時所遵循的從左到右,從上到下的表現方式。HTML中的大多數元素都處在正常的文檔流中,而一個元素要脫離正常流的唯一途徑就是浮動或定位。 二,定位的常見幾種形式; 1,CSS有三種基本的定位機制:普通流,浮動和絕對定位; a,普通流demo:

1.普通流

b,相對定位demo:

2.相對定位

總結:1,上面例子可以看出,對藍色div進行相對定位,分別右移,下移20px后綠色div位置并沒有相應變化,而是在原位置,藍色div遮擋住了部分綠色div。 c,絕對定位demo:

絕對定位

(**總結2的解釋**加上:position:relative)

總結: 1,相對定位可以看作特殊的普通流定位,元素位置是相對于他在普通流中位置發生變化,而絕對定位使元素的位置與文檔流無關,也不占據文檔流空間。 2,絕對定位的元素的位置是相對于距離他最近的非static祖先元素位置決定的。如果元素沒有已定位的祖先元素,那么他的位置就相對于初始包含塊兒(body或html神馬的)元素。 d,固定定位demo:

4.固定定位

e,浮動定位demo: 1,基本知識: 浮動模型也是一種可視化格式模型,浮動的框可以左右移動(根據float屬性值而定),直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣。浮動元素不在文檔的普通流中,文檔的普通流中的元素表現的就像浮動元素不存在一樣. 1,)不浮動:

5.浮動之不浮動

6.右浮動

7.左浮動

8.整體左浮動

9.寬度不夠時

10.高度不夠時

f.行框清理demo: 1. 理解:前面指出浮動會讓元素脫離文檔流,不影響不浮動元素.實際上并不完全如此,如果浮動的元素后面有一個文檔流中元素,那么這個元素的框會表現的像浮動元素不存在,但是框的文本內容會受到浮動元素的影響,會移動以留出空間.用術語說就是浮動元素旁邊的行框被縮短,從而給浮動元素流出空間,因而行框圍繞浮動框。 2.代碼:

11.行框和清理:不浮動時

11111111111 11111111111

浮動時

11111111111 11111111111

三,display:inline-block; 1.由于div是塊級元素,所以框會以縱向形式排列。在實際操作中往往需要將框橫向排列。所以可以使用:display:inlin-block; 2.代碼: 1):

框框1

框框2

框框3

2): 3.總結: 1.至于中間的縫隙,追溯到本質原因是元素之間的空白符引起的,所以在父元素設置fone-size的大小,可以調節空白縫隙的大小。 2.代碼: .boxBg{ margin: 0 auto; width:500px; height:200px; border:2px solid #ccc; font-size:34px;(文字的大小影響縫隙,為0就沒有縫隙了,想要有文字,在子元素中設置) }

'?9=?=w

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,792評論 1 92
  • 浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響? 浮動元素的特征:1. 不占據普通文檔流...
  • vue插件介紹 2. 插件分類 主要注冊與綁定機制如下: export default{install(Vue...
    Osmond_wang閱讀 339評論 0 1
  • 網頁基礎總結(4) 一.網頁基礎 1.選擇器優先級關系 !important>ID>類>元素 內聯樣式表>嵌入>外...
    糖心m閱讀 220評論 0 0
  • 說起草,腦海中對它的印象就是,生命力強,具有綠化作用。 而今在一個小小臥室里,有一盆草來做伴,精神可耐,恰可以韜光...
    堇然閱讀 463評論 0 0