CSS 兩欄布局和三欄布局的實現

文章目錄

    • 一、兩欄布局的實現
      • 1. float+margin
      • 2. flaot+BFC
      • 3. 定位+margin
      • 4. flex 布局
      • 5. grid布局
    • 二、三欄布局的實現
      • 1. float + margin
      • 2. float + BFC
      • 3. 定位 + margin(或者定位+BFC)
      • 4. flex布局
      • 5. 圣杯布局
      • 6. 雙飛翼布局

一、兩欄布局的實現

兩欄布局其實就是左側定寬,右側自適應的布局

1. float+margin

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: flex;height: 300px;}.left {width: 100px;background: red;}.right {flex: 1;background: green;}</style></head><body><div class="container"><div class="left"></div><div class="right"></div></div></body>
</html>

2. flaot+BFC

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: flex;height: 300px;}.left {width: 100px;background: red;}.right {flex: 1;background: green;}</style></head><body><div class="container"><div class="left"></div><div class="right"></div></div></body>
</html>

知識課堂
先來看兩個相關的概念:
?????●Box: Box是CSS布局的對象和基本單位,一個頁面是由很多個Box組成的,這個Box就是我們所說的盒模型。
?????●Formatting context: 塊級上下文格式化,它是頁面中的一塊渲染區域,并且有一 套渲染規則,它決定了其子元素將如何定位,以及和其他元素的關系和相互作用。

塊格式化上下文(Block Formatting Context, BFC) 是Web頁面的可視化CSS渲染的一部分,是布局過程中生成塊級盒子的區域,也是浮動元素與其他元素的交互限定區域。

通俗來講: BFC是一 -個獨立的布局環境,可以理解為一個容器,在這個容器中按照一定規則進行物品擺放,并且不會影響其它環境中的物品。如果一個元素符合觸發BFC的條件,則BFC中的元素布局不受外部影響。

創建BFC的條件:
●根元素: body;
●元素設置浮動: float除none以外的值;
●元素設置絕對定位: position (absolute、 fixed);
●display值為: inline-block、 table-cell、 table-caption、 flex等 ;
●overflow值為: hidden、 auto、 scroll;

BFC的特點:
●垂直方向上,自.上而下排列,和文檔流的排列方式-致。
●在BFC中上下相鄰的兩個容器的margin會重疊
●計算BFC的高度時,需要計算浮動元素的高度
●BFC區域不會與浮動的容器發生重疊
●BFC是獨立的容器,容器內部元素不會影響外部元素●每個元素的左margin值和容器的左border相接觸

3. 定位+margin

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}.left {position: absolute;left: 0;width: 100px;height: 300px;background: red;}.right {margin-left: 100px;height: 300px;background: green;}</style></head><body><div class="left"></div><div class="right"></div></body>
</html>

4. flex 布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: flex;height: 300px;}.left {width: 100px;background: red;}.right {flex: 1;background: green;}</style></head><body><div class="container"><div class="left"></div><div class="right"></div></div></body>
</html>

5. grid布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: grid;grid-template-columns: 100px 1fr;box-sizing: border-box;height: 300px;}.left {background: red;}.right {background: green;}</style></head><body><div class="container"><div class="left"></div><div class="right"></div></div></body>
</html>

二、三欄布局的實現

左右定寬,中間自適應

1. float + margin

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>CSS實現三欄布局1</title><style type="text/css">.left {width: 200px;height: 300px;background-color: #dc698a;float: left;}.middle {height: 300px;background-color: #8cb08b;margin: 0 200px;}.right {width: 200px;height: 300px;background-color: #3eacdd;float: right;}</style></head><body><div class="left">左欄</div><div class="right">右欄</div><div class="middle">中間欄</div></body>
</html>

2. float + BFC

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>CSS實現三欄布局1</title><style type="text/css">.left {width: 200px;height: 300px;background-color: #dc698a;float: left;}.middle {height: 300px;background-color: #8cb08b;overflow: hidden;}.right {width: 200px;height: 300px;background-color: #3eacdd;float: right;}</style></head><body><div class="left">左欄</div><div class="right">右欄</div><div class="middle">中間欄</div></body>
</html>

注意:上面兩種方法都必須先渲染right,否則right會被middle擠下來

3. 定位 + margin(或者定位+BFC)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>CSS實現三欄布局3</title><style type="text/css">.container {position: relative;}.left {width: 200px;height: 300px;background-color: #dc698a;position: absolute;}.middle {height: 300px;background-color: #8cb08b;margin: 0 200px;}.right {position: absolute;right: 0;top: 0;width: 200px;height: 300px;background-color: #3eacdd;}</style></head><body><div class="container"><div class="left">左欄</div><div class="middle">中間欄</div><div class="right">右欄</div></div></body>
</html>

4. flex布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {height: 300px;display: flex;}.left,.right {width: 100px;background: red;}.center {flex: 1;background: green;}</style></head><body><div class="container"><div class="left"></div><div class="center"></div><div class="right"></div></div></body>
</html>

5. 圣杯布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Title</title><style>.container {height: 200px;overflow: hidden;padding: 0 200px;}.center {width: 100%;height: 200px;background-color: green;float: left;}.left {width: 200px;height: 200px;background-color: blue;float: left;margin-left: -100%;position: relative;left: -200px;}.right {width: 200px;height: 200px;background-color: darkorchid;float: left;margin-left: -200px;position: relative;right: -200px;}</style></head><body><div class="container"><div class="center"></div><div class="left"></div><div class="right"></div></div></body>
</html>

6. 雙飛翼布局

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/38826.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/38826.shtml
英文地址,請注明出處:http://en.pswp.cn/news/38826.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

高層建筑全景vr火災隱患排查模擬培訓軟件助力群眾防范火災傷害

隨著城市化進程的加快&#xff0c;樓宇建筑的數量也在不斷增加。然而&#xff0c;樓宇消防安全問題也日益突出。為了提高樓宇員工和居民的消防安全意識&#xff0c;樓宇VR消防安全教育培訓應運而生。VR安全培訓公司深圳華銳視點制作的樓宇vr消防安全教育培訓&#xff0c;包括消…

谷粒商城第十一天-完善商品分組(主要添上關聯屬性)

目錄 一、總述 二、前端部分 2.1 改良前端獲取分組列表接口及其調用 2.2 添加關聯的一整套邏輯 三、后端部分 四、總結 一、總述 前端部分和之前的商品品牌添加分類差不多。 也是修改一下前端的分頁獲取列表的接口&#xff0c;還有就是加上關聯的那一套邏輯&#xff0c;…

nginx負載均衡與反向代理與正向代理

負載均衡&#xff1a;通過反向代理來實現 正向代理的配置方法。 正向代理&#xff1a; 工作原理&#xff1a;用戶端直接訪問不了&#xff0c;需要通過代理服務器來訪問web服務器&#xff0c;用戶端先訪問代理服務器&#xff0c;再訪問web服務器。web服務器響應給代理服務器&a…

【C語言】調試技巧

目錄 一、什么是bug? 二、調試 1.一般調試的步驟 2.Debug 和 Release 三、調試環境準備 四、調試時要查看的信息 1.查看臨時變量的值 2.查看內存信息 3.查看調用堆棧 4.查看反匯編信息 5.查看寄存器 五、練習 六、常見的coding技巧 七、const的作用 八、編程常見…

Linux - MongoDB 數據庫自動退出服務問題/閃退

問題&#xff1a;MongoDB 自動退出服務問題 原因&#xff1a; 由于 Mongodb 服務&#xff0c;使用過多系統內存&#xff0c;導致系統強制停止 Mongodb 服務。 解決方法&#xff1a; 在 mongodb.conf 配置文件內&#xff0c;添加新配置內容&#xff1a; wiredTigerCacheSi…

POI與EasyExcel--寫Excel

簡單寫入 03和07版的簡單寫入注意事項&#xff1a; 1. 對象不同&#xff1a;03對應HSSFWorkbook&#xff0c;07對應XSSFWorkbook 2. 文件后綴不同&#xff1a;03對應xls&#xff0c;07對應xlsx package com.zrf;import org.apache.poi.hssf.usermodel.HSSFWorkbook; import …

如何應用項目管理軟件進行敏捷開發管理

敏捷開發&#xff08;Agile Development&#xff09;是一種軟件開發方法論&#xff0c;強調在不斷變化的需求和環境下&#xff0c;通過迭代、協作和自適應的方式來開發軟件。敏捷方法的目標是提供更快、更靈活、更高質量的軟件交付&#xff0c;以滿足客戶需求并實現項目成功。 …

服務器數據恢復-EqualLogic存儲RAID5數據恢復案例

服務器數據恢復環境&#xff1a; 一臺DELL EqualLogic存儲中有一組由16塊SAS硬盤組建的RAID5陣列。存儲存放虛擬機文件&#xff0c;采用VMFS文件系統&#xff0c;劃分了4個lun。 服務器故障&檢測&分析&#xff1a; 存儲設備上有兩個硬盤指示燈顯示黃色&#xff0c;存儲…

【Windows 常用工具系列 6 -- CSDN字體格式(字體、顏色、大小)、背景色設置】

文章目錄 背景字體大小設置字體顏色設置字體類型背景色 上篇文章&#xff1a;Windows 常用工具系列 5 – Selenium IDE的使用方法 下篇文章&#xff1a;Windows 常用工具系列 7 – 禁用win10自帶的微軟輸入法 背景 Markdown是一種輕量級標記語言&#xff0c;它的目標是實現“…

1022.從根到葉的二進制之和

目錄 一、題目 二、代碼 一、題目 二、代碼 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nu…

基于java計算機類考研交流平臺設計與實現

摘要 高校的大學生考研是繼高校的高等教育更上一層的表現形式&#xff0c;教育的發展是我們社會的根本&#xff0c;那么信息技術的發展又是改變我們生活的重要因素&#xff0c;生活當中各種各樣的場景都存在著信息技術的發展。信息技術發展WEB信息化的到來讓人們的生活感受到了…

vue項目的實用性總結

1、mockjs 基本使用 ★ 安裝&#xff1a;npm i mockjs。 在src/mock/index.js內容如下&#xff1a; import Mock from mockjs //制訂攔截規則 Mock.mock(http://www.0313.com,get,你好啊)記得在main.js中引入一下&#xff0c;讓其參與整個項目的運行。 只要發出去的是get類型…

家紡行業小程序商城搭建指南

家紡行業作為一個不可或缺的消費領域&#xff0c;近年來備受關注。隨著互聯網的發展&#xff0c;小程序商城成為家紡行業拓展市場的新利器。搭建一個家紡行業小程序商城并不是一件困難的事情&#xff0c;只需要按照以下幾個步驟進行操作&#xff0c;就能輕松上手。 首先&#x…

Java后端框架模塊整合

提示&#xff1a;使用Java后端開發框架能夠提高開發效率、代碼質量&#xff0c;提升可擴展性&#xff0c;降低開發成本和易于維護。 文章目錄 前言MyBatis 框架知識Spring 框架知識SpringMVC 框架知識SpringBoot 框架知識 前言 提示&#xff1a;這里可以添加本文要記錄的大概內…

2023-08-15 LeetCode每日一題(字符串中的查找與替換)

2023-08-15每日一題 一、題目編號 833. 字符串中的查找與替換二、題目鏈接 點擊跳轉到題目位置 三、題目描述 你會得到一個字符串 s (索引從 0 開始)&#xff0c;你必須對它執行 k 個替換操作。替換操作以三個長度均為 k 的并行數組給出&#xff1a;indices, sources, tar…

UI設計師個人工作總結范文

UI設計師個人工作總結范文篇一 感受到了領導們“海納百川”的胸襟&#xff0c;感受到了作為廣告人“不經歷風雨&#xff0c;怎能見彩虹”的豪氣&#xff0c;也體會到了重慶廣告從業人員作為拓荒者的艱難和堅定(就目前國內廣告業而言&#xff0c;我認為重慶廣告業尚在發展階段并…

FreeRTOS(獨立看門狗監測任務執行與低功耗Tickless模式)

資料來源于硬件家園&#xff1a;資料匯總 - FreeRTOS實時操作系統課程(多任務管理) 目錄 一、獨立看門狗介紹 二、看門狗監測多任務執行思路 1、監測目標 2、監測方案 3、應用注意事項 三、看門狗監測多任務編程 1、STM32cubeMX配置 2、代碼編寫 四、低功耗Tickless模…

LeetCode 熱題 100 JavaScript--739. 每日溫度

給定一個整數數組 temperatures &#xff0c;表示每天的溫度&#xff0c;返回一個數組 answer &#xff0c;其中 answer[i] 是指對于第 i 天&#xff0c;下一個更高溫度出現在幾天后。如果氣溫在這之后都不會升高&#xff0c;請在該位置用 0 來代替。 示例 1: 輸入: temperat…

基于HTML+CSS+Echarts大屏數據可視化集合共99套

基于HTMLCSSEcharts大屏數據可視化集合共99套 一、介紹二、展示1.大數據展示系統2.物流訂單系統3.物流信息系統4.辦稅渠道監控平臺5.車輛綜合管控平臺 三、其他系統實現四、獲取源碼 一、介紹 基于HTML/CSS/Echarts的會議展覽、業務監控、風險預警、數據分析展示等多種展示需求…

c++--異常

1.什么是異常 對于C語言來說&#xff0c;處理錯誤的機制有&#xff1a; 1.終止程序&#xff1a;如assert&#xff0c;缺陷&#xff0c;如發生內存錯誤&#xff0c;除0之外發生程序終止&#xff0c;用戶無法接受。 2.返回錯誤碼&#xff1a;對于大型程序來說&#xff0c;需要…