前端常用佈局方式大全——細緻講解

来源:https://www.cnblogs.com/mochenxiya/archive/2022/08/11/16578356.html
-Advertisement-
Play Games

盒模型 點擊打開視頻教程 標準盒模型、怪異盒模型(IE盒模型) 什麼是盒模型? 盒模型的作用:規定了網頁元素如何顯示以及元素間的相互關係 盒模型的概念:盒模型是css佈局的基石,它規定了網頁元素如何顯示以及元素間的相互關係。 css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區、 ...


盒模型

點擊打開視頻教程

標準盒模型、怪異盒模型(IE盒模型)

什麼是盒模型?

盒模型的作用:規定了網頁元素如何顯示以及元素間的相互關係
盒模型的概念:盒模型是css佈局的基石,它規定了網頁元素如何顯示以及元素間的相互關係。
css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區、補白(填充)、
邊框、邊界(外邊距)這就是盒模型。

2、盒模型是怎樣組成的?

盒模型的組成部分
	content(內容區)+ padding(填充區)+ border(邊框區)+ margin(外邊界區)
<template>
  <div id="app">
    <div class="box"></div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {

    } 
  },
  mounted(){
    
  },
  methods:{
    
  }
}
</script>

<style scoped>
  .box{
    width: 100px;
    height: 100px;
    border: 4px solid red;
    padding: 5px;
    margin: 5px;
  }
</style>

效果:
屏幕截圖 2022-08-11 202027.png

標準盒模型的組成:寬高(content)+ padding + border + margin
怪異盒模型的組成:width(content+border+padding)+ margin

可以用css屬性更改是標準盒模型還是怪異盒模型

css屬性:box-sizing: border-box(怪異盒模型)/content-box(標準盒模型)

浮動佈局

float 屬性定義元素往哪個方向浮動。
float元素脫離了文檔流,但是不脫離文本流

浮動佈局主要是利用float屬性來實現,可以給元素設置float屬性讓元素脫離文檔流,然後設置left和right來邊改元素在文檔上的展示位置以此形成我們想要的佈局方式,下麵用浮動佈局完成一個左右寬度固定中間自適應的三欄佈局。

float實現三欄佈局

<template>
  <div id="app">
    <div class="content">
      <div class="left">
        左
      </div>
      <div class="right">
        右
      </div>
      <div class="middle">
        中
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {

    } 
  },
  mounted(){
    
  },
  methods:{
    
  }
}
</script>

<style scoped>
  .content{
    width:100%;
    height:200px;
  }
  .left {
    width: 200px;
    height: 100px;
    float: left;
    background-color: red;
  }
  .right {
    width: 200px;
    height: 100px;
    float: right;
    background-color: yellow;
  }
  .middle {
    width:400px;
    height: 100px;
    margin-left:100px;
    background-color: blue;
  }
</style>

效果:
屏幕截圖 2022-08-11 205206.png2222.png

註意:使用float浮動佈局middle中間的元素在html中要放在最後,否則黃色區域會換行,因為div是塊級元素使用margin後右邊區域也是屬於它的。

註意:如果給非float元素加上寬度,一定要記得給此元素加上margin-left/right屬性, 否側非float元素會被float元素覆蓋住一部份。

定位佈局

定位佈局是利用position來實現,可以使用absolute絕對定位移動元素的位置,使用絕對定位也會使元素脫離文檔流,下麵使用絕對定位實現一個三欄佈局。

絕對定位實現三欄佈局:

<template>
  <div id="app">
    <!-- 定位佈局 -->
    <div class="content">
      <div class="positionLeft">
        左
      </div>
      <div class="positionMiddle">
        中
      </div>
      <div class="positionRight">
        右
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {

    } 
  },
  mounted(){
    
  },
  methods:{
    
  }
}
</script>

<style scoped>
  /* 定位佈局 */
  .positionLeft {
    position: absolute;
    width: 200px;
    left: 0;
    top: 0;
    background-color: red;
  }
  .positionMiddle {
    background-color: blue;
    margin: 0 200px;
  }
  .positionRight {
    position: absolute;
    width: 200px;
    right: 0;
    top: 0;
    background-color: yellow;
  }
</style>

效果:

屏幕截圖 2022-08-11 211123.png33333333333333333333333333.png

表格佈局

表格是很嚴格的一行就是一行,一列就是一列,並且他們的位置不會發生變化,所以我們可以利用表格佈局來實現我們想要的佈局,在以前還沒有出現這些浮動、定位屬性的時候表格用的是最多的佈局方式。通過給父元素設置display: table;,給子元素設置display: table-cell;即可實現三欄佈局,使用表格佈局還是比較方便的,幾乎不需要寫什麼樣式就可以實現。

表格佈局實現三欄佈局:

<template>
  <div id="app">
    <!-- 表格佈局 -->
    <div class="parent">
      <div class="tableLeft">
        左
      </div>
      <div class="tableMiddle">
        中
      </div>
      <div class="tableRight">
        右
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {

    } 
  },
  mounted(){
    
  },
  methods:{
    
  }
}
</script>

<style scoped>
  /* 表格佈局 */
  .parent {
    display: table;
    width: 100%;
  }
  .parent > div {
    display: table-cell;
  }
  .tableLeft {
    width: 300px;
    background-color: red;
  }
  .tableRight {
    width: 300px;
    background-color: yellow;
  }
  .tableMiddle {
    background-color: blue;
  }
</style>

效果:

屏幕截圖 2022-08-11 212133.png44444444444444444444.png

flex佈局

flex佈局也叫彈性佈局,是利用css3新出的屬性display: flex實現的,
這種佈局方式很方便,也不會對文檔的結構改變,是當下最熱門的一種佈局方式,
建議每個前端開發者都要掌握。

flex佈局實現三欄佈局:

<template>
  <div id="app">
     <!-- flex佈局 -->
    <div class="flexParent">
      <div class="flexLeft">
        左
      </div>
      <div class="flexMiddle">
        中
      </div>
      <div class="flexRight">
        右
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {

    } 
  },
  mounted(){
    
  },
  methods:{
    
  }
}
</script>

<style scoped>
  /* flex佈局 */
  .flexParent{
    display: flex;
  }
  .flexLeft {
    width: 300px;
    background-color: red;
  }
  .flexRight {
    width: 300px;
    background-color: yellow;
  }
  .flexMiddle {
    flex: 1;
    background-color: blue;
  }
</style>

效果:
屏幕截圖 2022-08-11 213654.png555555555.png

grid 佈局(柵格佈局)
百分比佈局
響應式佈局
等等....


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 3. ETCD 常用命令 etcdctl是一個命令行的客戶端,它提供了一些命令,可以方便我們在對服務進行測試或者手動修改資料庫內容。etcdctl與kubectl和systemctl的命令原理及操作類似,其基本用法如下所示: etcdctl [global options] command [com ...
  • 前言 最近在centos8系統下部署django項目時,要用到mysql資料庫,在安裝中遇到了點坑,之後參考了一位博主的文章,也是順利的安裝配置成功,博主原文連接: []((20條消息) centos8安裝mysql8.0.22教程(超詳細)_上善若水滴世界的博客-CSDN博客_centos mys ...
  • ​ 點亮 ⭐️ Star · 照亮開源之路 GitHub:https://github.com/apache/dolphinscheduler ​ 版本發佈 2022/8/10 2022 年 8 月 10 日,Apache DolphinScheduler 在經過 3.0.0 alpha、3.0.0 ...
  • 昨晚我正在床上睡得著著的,突然來了一條簡訊。 什麼?線上的訂單無法取消! 我趕緊登錄線上系統,查看業務日誌。發現有MySQL鎖超時的錯誤日誌。 ...
  • 課件獲取:關註公眾號“數棧研習社”,後臺私信 “ChengYing” 獲得直播課件 視頻回放:點擊這裡 ChengYing開源項目地址:github 丨 gitee 喜歡我們的項目給我們點個__ STAR!STAR!!STAR!!!(重要的事情說三遍)__ 技術交流釘釘 qun:30537511 本 ...
  • 首先nosql可以被理解為not only sql 泛指非關係型資料庫,也就是說不僅僅是sql,所以它既包含了sql的一些東西,但是又和sql不同,併在其的基礎上改變或者說擴展了一些東西。 提到nosql,首先我們就要分析一下關係型資料庫的行式存儲和非關係型資料庫的列式存儲區別在哪? 行式存儲我們都 ...
  • 原文:Jetpack Compose學習(9)——Compose中的列表控制項(LazyRow和LazyColumn) - Stars-One的雜貨小窩 經過前面的學習,大致上已掌握了compose的基本使用了,本篇繼續進行擴展,講解下載Compose中的列表控制項LazyRow和LazyColumn ...
  • 數據訂閱是運動健康類應用中很常見的功能,用戶訂閱運動記錄、健康記錄等數據,當這些數據發生變化時,用戶能夠即時在App上接收到推送通知。 例如某位用戶最近正在鍛煉身體,為自己設定了每天走1萬步,每周達成3次的目標;常規的數據訂閱可以做到每天給用戶推送當天步數,但用戶需要自己進行二次計算才能得知自己是否 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...