說起佈局其實就和蓋房子的道理一樣,你首先要蓋好房子的模型(規劃好頁面的佈局),房子的雛形蓋好後就是往房子裡面佈置傢具了(在佈局裡面添加東西),這樣,房子蓋好後不論你往裡面添加什麼傢具也不能影響房子(杠精請坐下),佈局也一樣,佈局完成後,只需要在佈局的容器裡面添加更加細化的東西就行了。切忌邊寫內容邊布 ...
說起佈局其實就和蓋房子的道理一樣,你首先要蓋好房子的模型(規劃好頁面的佈局),房子的雛形蓋好後就是往房子裡面佈置傢具了(在佈局裡面添加東西),這樣,房子蓋好後不論你往裡面添加什麼傢具也不能影響房子(杠精請坐下),佈局也一樣,佈局完成後,只需要在佈局的容器裡面添加更加細化的東西就行了。切忌邊寫內容邊佈局,這可能因為內容導致佈局的改寫,費時費力、得不償失
實現佈局的常用方法
1. float
Float 的設計初衷僅僅是為了實現文字環繞效果,所以瞭解了 Float的設計初衷,我們就能明白 Float的特有的行為表現了
包裹
- 堅挺
- 收縮
- 隔絕
這種特性稱之為 BFC(Block Formatting Context——塊級格式化上下文), 具有這種包裹性的元素有
- display:inline-block / table-cell
- position: absolute/fixed/sticky
- overflow:hidden/scroll
破壞
如果浮動元素是某一個元素的父元素,那麼子元素就會溢出父元素,而父元素將會塌陷
2. 定位
優點:
- 使用定位屬性,結合邊偏移屬性,可以將元素放置在任何需要的位置,這樣做的好處在於,無需考慮元素本身的顯示方式和頁面代碼中所處的位置,直接將元素分離出來進行定位。
缺點:
- 在使用絕對定位屬性的時候,由於元素的位置已經確定,並獨立於文檔之外,所以當元素中的內容發生變化時,其他元素無法根據絕對定位元素的變化而作相應的調整,最終將會導致頁面中內容重疊或者產生空白。
- 在使用相對定位屬性的時候,由於頁面中會保留元素原來占有的位置,所以會在原有位置上產生空白區域,同時,由於相對定位的優先順序高於普通元素所以也可能造成元素內容的重疊
如果可以的情況下,輕易不要使用定位進行佈局,複雜的層級關係會導致你的定位越來越亂,難以維護。
3. Table
優點:
- 容易上手(據說是。。。)
- 可以形成複雜的變化,簡單快速
- 表現上更加“嚴謹”,在不同瀏覽器中都能得到很好的相容
- 適合數據展示
缺點:
- Table要比其它html標記占更多的位元組。(延遲下載時間,占用伺服器更多的流量資源。)
- Tablle會阻擋瀏覽器渲染引擎的渲染順序。(會延遲頁面的生成速度,讓用戶等待更久的時間。)
- Table里顯示圖片時需要你把單個、有邏輯性的圖片切成多個圖。(增加設計的複雜度,增加頁面載入時間,增加HTTP會話數。)
- Table會影響其內部的某些佈局屬性的生效(比如
里的元素的height:100%)(這會限制你頁面設計的自由性。) 4. Grid
Grid
適用於佈局大畫面。它們使頁面的佈局變得非常容易,甚至可以處理一些不規則和非對稱的設計。Grid
佈局則是將容器劃分成"行"和"列",產生單元格,然後指定"項目所在"的單元格,可以看作是二維佈局
5. Flex
Flex
非常適合對齊元素內的內容。你可以使用Flex
來定位設計上一些較小的細節。Flex
佈局是軸線佈局,只能指定"項目"針對軸線的位置,可以看作是一維佈局。- 不需要進行瀏覽器相容測試
- 超簡潔語法、響應式佈局
- 相容性較差
CSS常見佈局
單列佈局
常見的單例佈局有兩種
- 一種就是頭部(header)和內容(main)、尾部(footer)等寬居中的佈局
- 另一個就是頭部(header)和尾部(footer)等寬,內容(main)略窄居中的佈局
特點:定寬、水平居中
兩列佈局
特點:側欄固定寬度(如廣告等)、主欄自適應
實現方法有很多,這裡只舉一種方法(以左側欄固定為例)
DOM
<div class="main"> <!--左側--> <div class="left"></div> <!--右側--> <div class="right"></div> </div>
CSS
// 頁面 .main{ display: flex; height: 100vh; // 左側 .left{ background: red; width: 300px; } // 右側 .right{ background: yellow; flex: 1 1 auto; } }
三列佈局
- 一種是兩端側欄寬度固定、中間欄自適應
- 一種是一端側欄與中間欄寬度固定、另一端側欄自適應
實現方法有很多,這裡只舉一種方法(以第一個為例)
DOM
<div class="box"> <!--主要內容--> <div class="middle"></div> <!--左側邊欄--> <div class="left"></div> <!--右側邊欄--> <div class="right"></div> </div>
CSS
// 頁面 .box{ display: flex; height: 100vh; min-width: 700px; // 左側邊欄 .left{ order: 0; background: red; width: 300px; } // 主要內容 .middle{ order: 1; background: pink; flex: 1 1 auto; } // 右側邊欄 .right{ order: 2; background: yellow; width: 300px; } }
註意:這裡我們把
<div class="middle"></div>
放在了最上方,因為DOM是按順序渲染的,所以優先載入主要內容,但這會導致位置的先後順序錯亂,這裡可以用flex
佈局的order
屬性來改變位置的先後順序粘連佈局
特點:
- 當內容
<main>
的高度足夠長時,<main>
後面的<footer>
會緊跟在<main>
元素的後面 - 當
<main>
元素的高度不足的時候(比如小於屏幕的高度),<footer>
能夠‘粘連’在屏幕底部
第一種
DOM
<div class="box"> <!--內容外框--> <div class="middle"> <!--主要內容--> <div class="main"></div> </div> <!--底部--> <div class="footer"></div> </div>
CSS
// 頁面 .box{ height: 100%; // 內容外框 .middle{ min-height: 100%; // 主要內容 .main{ padding-bottom: 50px; background: pink; height: 300px; // 高度應該是內容的高度(這裡只是展示用) } } // 底部 .footer{ background: yellow; height: 50px; margin-top: -50px; } }
第二種(flex)
DOM
<div class="box"> <!--內容外框--> <div class="middle"> <!--主要內容--> <div class="main"></div> </div> <!--底部--> <div class="footer"></div> </div>
CSS
// 頁面 .box{ display: flex; flex-direction: column; // 內容外框 .middle{ flex-basis: 100vh; // min-height: 100vh;也可以 // 主要內容 .main{ padding-bottom: 50px; background: pink; height: 30vh; // 高度應該是內容的高度(這裡只是展示用) } } // 底部 .footer{ background: yellow; height: 50px; margin-top: -50px; } }
這兩種的方法區別不大,主要看你喜歡用那個(~ ̄▽ ̄)~
多欄佈局(Multi-Columns Layout)
多欄佈局是CSS3新增佈局中的一種,儘管它很低調。
我們可以用它實現分欄的效果
DOM
<div class="box"> <div class="middle"> 丙辰中秋,歡飲達旦,大醉,作此篇,兼懷子由。明月幾時有?把酒問青天。不知天上宮闕,今夕是何年。我欲乘風歸去,又恐瓊樓玉宇,高處不勝寒。起舞弄清影,何似在人間?(何似 一作:何時;又恐 一作:惟 / 唯恐)轉朱閣,低綺戶,照無眠。不應有恨,何事長向別時圓?人有悲歡離合,月有陰晴圓缺,此事古難全。但願人長久,千里共嬋娟。 </div> </div>
CSS
// 頁面 .middle{ column-count: 3; column-rule: dotted; column-gap: 50px; width: 700px; margin: 30px auto }
也可以用它來實現古書的排版
DOM
<div class="box"> <div class="middle"> 丙辰中秋,歡飲達旦,大醉,作此篇,兼懷子由。明月幾時有?把酒問青天。不知天上宮闕,今夕是何年。我欲乘風歸去,又恐瓊樓玉宇,高處不勝寒。起舞弄清影,何似在人間?(何似 一作:何時;又恐 一作:惟 / 唯恐)轉朱閣,低綺戶,照無眠。不應有恨,何事長向別時圓?人有悲歡離合,月有陰晴圓缺,此事古難全。但願人長久,千里共嬋娟。 </div> </div>
CSS
// 頁面 .middle{ width: 300px; height: 200px; margin: 100px auto; columns: 10; column-rule: 1px dashed rgb(213,213,213); direction: rtl; word-wrap: break-word; text-align: center; }
瀑布流
使用css的multi-column為例來實現
DOM
<div id="Falls"> <!--每一個模塊--> <div class="item"> <!--圖片--> <img class="item_img" src="地址"/> <!--圖片信息--> <div class="image_info">努力保持一個好心情</div> </div> ... </div>
CSS
// 頁面 #Falls{ margin: 0 auto; column-count: 5; column-width: 240px; column-gap: 20px; // 每一個模塊的樣式 .item{ break-inside: avoid; // 防止多列佈局,分頁媒體和多區域上下文中的意外中斷 margin-bottom: 10px; background: #fff; border: 1px solid #ccc; // 圖片的樣式 .item_img{ width: 100%; vertical-align: middle; } // 圖片信息 .image_info{ padding: 5px 10px; text-align: center; } } }
您的分享是我們最大的動力!
更多相關文章-
不管是在app註冊、登錄里,還是在網頁註冊里,都會看到驗證碼;那這個驗證碼要怎麼實現呢?通過js有兩種方法可以達到這樣的效果,下麵代碼奉上哦! 方法一:這個方法比較好理解,首先定義一個數組,將會產生的字母,數值都放進去;有4位就迴圈4次,每迴圈一次產生一個隨機結果,將每次的結果累加起來存入想要放的位 ...
-
看了很多關於sort()函數的定義和解釋還是不太清楚,尤其是初學者很容易看懵,這裡講講自己是如何理解的。 首先,要理解sort()內部是利用遞歸進行冒泡排序的; 例如: var arr = [1, 5, 4, 2]; sort()方法的比較邏輯為:第一輪:1和5比,1和4比,1和2比第二 ...
-
今天在群里聊天有人說 flex的那幾個居中屬性好難記,時不時都要嘗試一下,或者查看一下文檔,現在我把我自己的記憶方式分享一下。。。 1. flex的居中主要是通過這三個屬性來實現的: 2. 總結 3. 記憶方式 原文:https://javascript.shop/2019/08/flex-just ...
-
強烈推薦 GitHub 上值得前端學習的開源實戰項目。 Vue.js "vue element admin 是一個後臺前端解決方案,它基於和 element ui 實現" "基於 iView 的 Vue 2.0 管理系統模板" "基於 vue2 + vuex 構建一個具有 45 個頁面的大型單頁面應 ...
-
相容性 1 頁面在不同瀏覽器中可能顯示不同 在IE6下 子級的寬度會撐開父級設置好的寬度 溫馨提示:和模型的計算一定要精確,IE瀏覽器可能顯示不同 相容性 2 在IE6中,元素浮動,如果寬度需要內容撐開, 需要給裡面的快元素 添加浮動 才可以 相容性 3 在IE6,7下,元素要通過浮動{float: ...
-
JavaScript也是可以“繼承”的! 各位看官或是好奇,或是一知半解。什麼是prototype,__proto__,constructor、哪種繼承方式好。今天就在這交流交流。 什麼是prototype,__proto__,constructor https://blog.csdn.net/cc ...
-
BOM(瀏覽器對象模型)讓JavaScript可以和瀏覽器進行交流。 一 BOM是什麼 當我們使用瀏覽器打開一個網頁時,瀏覽器會為該頁面創建一個視窗,專門用於展示該網頁的內容。這時瀏覽器會在記憶體中創建一個對象,專門用於記錄描述該視窗的屬性和狀態變化等信息,這個對象就被稱為瀏覽器對象模型,通常我們也叫 ...
-
const element = <h1>Hello, world!</h1>; 首先我們看到聲明瞭一個element元素,而他的內容並非字元串或者html。 它被稱為 JSX,是一個 JavaScript 的語法擴展我們建議在 React 中配合使用 JSX,JSX 可以很好地描述 UI 應該呈現出 ...
一周排行-
Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程,Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor,topic=orders 本文前提知識:熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
-
引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識,這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示,用於衡量代碼被測試覆蓋的程度,幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率(Line Coverage)、分支覆蓋率(Bra ...
-
前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫,記錄了使用電腦模擬,模擬PLC,自至完成測試的詳細流程,並重點介紹了在這個過程中的易錯點,供參考。 用到的軟體: 1.Windows環境下鏈路層網路訪問的行業標準工具(WinPcap_4_1_3.exe)下載鏈接:http ...
-
從依賴倒置原則(Dependency Inversion Principle, DIP)到控制反轉(Inversion of Control, IoC)再到依賴註入(Dependency Injection, DI)的演進過程,我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
-
關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制,這與其他面相對對象語言有區別。關於私有屬性和私有方法,有如下要點: 1、通常我們約定,兩個下劃線開頭的屬性是私有的(private)。其他為公共的(public); 2、類內部可以訪問私有屬性(方法); 3、類外 ...
-
C++ 訪問說明符 訪問說明符是 C++ 中控制類成員(屬性和方法)可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符: public:允許從類外部的任何地方訪問成員。 private:僅允許在類內部訪問成員。 protected:允許在類內部及其派生類中訪問成員。 示 ...
-
寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先,【static_cast,dynamic_cast】【父類指針,子類指針】,兩兩一組,共有4種組合:用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
-
/******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
-
相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage,將包下的類按照一定規則註冊成Be ...
-
操作系統 :CentOS 7.6_x64 opensips版本: 2.4.9 python版本:2.7.5 python作為腳本語言,使用起來很方便,查了下opensips的文檔,支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...
-Advertisement- 所有分類