WEB布局與定位

BULLET POINT


  • 瀏覽器使用流在頁面中放置元素。
  • 塊元素從上向下流,各元素之間有一個換行。默認(rèn)的,每個塊元素會占瀏覽器窗口的整個寬度。
  • 內(nèi)聯(lián)元素在塊元素內(nèi)部從左上方流向右下方。如果需要多行,瀏覽器會換行,在垂直方向上擴展外圍塊元素,來包含這些內(nèi)聯(lián)元素。
  • 正常頁面流中的兩個塊元素上下相鄰的外邊距會折疊為最大外邊距的大小,或者如果兩個外邊距大小相同,則會折疊成為一個外邊距。
  • 浮動元素會從正常流中取出,浮動到左邊或者右邊。
  • 浮動元素放在塊元素之上,不會影響正常的頁面流。不過,內(nèi)聯(lián)元素會考慮浮動元素的邊界,圍繞著這個浮動元素。
  • clear屬性用來指定一個塊元素左邊或右邊(或者左右兩邊)不能有浮動元素。設(shè)置了clear屬性的塊元素會下移,知道它旁邊沒有塊元素。
  • 浮動元素必須有特定的寬度,不能設(shè)置為auto。
  • 流體布局是指,其中內(nèi)容的寬度是固定的,不會隨著瀏覽器窗口擴展或收縮。這有一個好處,可以對設(shè)計提供更多控制,不過也要付出代價,這樣就不能有效地使用瀏覽器寬度了。
  • 凝膠布局是指,其中內(nèi)容寬度是固定的,但是外邊距會隨著瀏覽器窗口擴展或收縮。凝膠布局通常會把內(nèi)容放在中央。這樣凍結(jié)布局同樣有好處,不過通常更美觀。
  • position屬性可以設(shè)置為4個值:stactic(靜態(tài))、absolute(絕對)、fixed(固定)和relative(相對)。
  • 靜態(tài)定位是默認(rèn)方式,將元素放在頁面的正常流中。
  • 絕對定位允許將元素放在頁面上的任何位置。默認(rèn)地,絕對定位元素相對于頁面邊界來放置。
  • 如果一個絕對定位元素嵌套在另一個定位元素中,這個元素就會相對于外包含元素定位。
  • 絕對定位可以使用z-index屬性分層放置,使一個元素在另一個元素上面。z-index值越大,說明它層次越高(在屏幕上離你越近)。
  • 固定定位元素總是相對于瀏覽器窗口定位,頁面滾動時,固定定位的元素不會移動。頁面中的其他內(nèi)容會相對在這些固定定位元素線面正常滾動。
  • 相對定位元素首先正常流入頁面,然后按指定的量偏移,從而留出它們原先所在的空間。
  • 使用相對定位時,left、right、top和bottom是指距正常流中該元素位置的偏移量。
  • CSS表格顯示允許一種表格布局來擺放元素。
  • 要創(chuàng)建CSS表格顯示,需要使用對應(yīng)表格的一個塊元素,對應(yīng)行的塊元素,以及對應(yīng)單元格的塊元素。通常這些塊元素都是<div>元素。
  • 如果需要建立多欄布局,而且內(nèi)容欄是均勻的,表格顯示就是一個很好的布局策略。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容