HTML&CSS-盒模型運用居中方式合集

来源:https://www.cnblogs.com/566adsasdw55/archive/2022/09/28/16737206.html
-Advertisement-
Play Games

方法:定位,外邊距,內邊距,層級,邊框; 一個元素; 兩個元素; 三個元素. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e ...


方法:定位,外邊距,內邊距,層級,邊框; 一個元素; 兩個元素; 三個元素. <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   <link rel="stylesheet" href="index.css"> </head> <body>   <div class="father1">     <div class="son1"></div>   </div> 方法1
  <div class="father2">     <div class="son2"></div>   </div> 方法2
  <div class="father3">     <div class="son3"></div>   </div> 方法3
  <div class="father4">     <div class="son4"></div>   </div> 方法4
  <div class="father5">     <div class="son5"></div>   </div>   <!-- 前五種為兩個元素的居中方式 --> 方法5
  <div class="six"></div> 方法6
  <div class="seven"></div>   <!-- 後兩種為1個元素的居中方式 --> 方法7
  <div class="father8">     <div class="box1"></div>     <div class="box2"></div>   </div> </div>   </div>   <!-- 最後一種為3個元素的居中方式 --> 方法8 </body> </html>   * {   margin: 0;   padding: 0;   list-style: none; } 清除瀏覽器預設樣式
.father1 {   width: 400px;   height: 400px;   background-color: #fc4;   position: relative; }
.son1 {   width: 200px;   height: 200px;   background-color: #f44;   position: absolute;   top: 100px;   left: 100px; } /* 第一種居中方式 */ 定位
.father2 {   width: 200px;   height: 200px;   background-color: #f77;   position: relative; }
.son2 {   width: 100px;   height: 100px;   background-color: #ff7;   position: absolute;   left: 50%;   top: 50%;   margin-left: -50px;   margin-top: -50px; } /* 第二種居中方式 */ 定位+外邊距+百分比
.father3 {   width: 200px;   height: 200px;   background-color: #0f0;   position: relative;   /* overflow: hidden; */   /* 解決margin塌陷問題 */ }
.son3 {   width: 100px;   height: 100px;   background-color: #77f;   position: absolute;   margin-left: 50px;   margin-top: 50px; } /* 第三種居中方式 */ 定位+外邊距
.father4 {   width: 100px;   height: 100px;   padding: 50px;   background-color: #f44; }
.son4 {   width: 100px;   height: 100px;   background-color: #0f7; } /* 第四種居中方式 */ 內邊距
.father5 {   width: 100px;   height: 100px;   border: 50px solid #f444;   background-color: #f444; }
.son5 {   width: 100px;   height: 100px;   background-color: #4fff; } /* 第五種居中方式 */ 邊框
.six {   width: 200px;   height: 200px;   background-color: #f9f67f;   border: 100px solid #08c; } /* 第六種居中方式 */ 一個元素 邊框
.seven {   width: 0px;   height: 0px;   padding: 100px;   background-color: #f78;   border: 50px solid #99f4; } /* 第七種居中方式 */ 一個元素 邊框+內邊距
.box1 {   width: 200px;   height: 200px;   background-color: #f075;   position: absolute;   z-index: 1; }
.box2 {   width: 100px;   height: 100px;   background-color: #ff99;   position: absolute;   z-index: 2;   top: 50px;   left: 50px; }
.father8 {   position: relative; } /* 第八種居中方式 */ 3個元素 定位+層級
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 我的Vue之旅。使用 Vue 3.1 + TypeScript + Router + Tailwind.css 構建手機底部導航欄、仿B站的登錄、註冊頁面。 ...
  • 一、使用原生js實現拖拽 點擊打開視頻講解更加詳細 <html lang="en"> <head> <meta charset="UTF-8" /> <title>Lazyload</title> <style> .drag { background-color: skyblue; position ...
  • 所有對象都有隱式原型; 原型也是對象,也有隱式原型. function User() {}console.log(User.prototype); function User() {}var u = new User();console.log(u.hasOwnProperty); Object.p ...
  • 在純靜態網站里,有時候會動態更新某個區域往會選擇 Pjax(swup、barba.js)去處理,他們都是使用 ajax 和 pushState 通過真正的永久鏈接,頁面標題和後退按鈕提供快速瀏覽體驗。 但是實際使用中可能會遇到不同頁面可能會需要載入不同插件處理,有些人可能會全量選擇載入,這樣會導致加 ...
  • 1 ES Module 規範 ES Module 是目前使用較多的模塊化規範,在 Vue、React 中大量使用,大家應該非常熟悉。TypeScript 中的模塊化與 ES 類似。 1.1 導出模塊 導出模塊有兩種方式:按需導出 和 預設導出。 按需導出是使用 export 關鍵字,將需要導出的成員 ...
  • HTML 中的 JavaScript 前言 在上一篇文章"什麼是JavaScript?"中我們說到js作為一門和頁面交互的語言。那如何把網頁的主導語言HTML和JavaScript關聯起來呢?在js早期,網景公司創造出了<script>元素,用來講JavaScript插入到HTML中。 <scrip ...
  • 一、開發優化一 1.使用Vant Weapp 1.1 什麼是Vant Weapp Vant Weapp官網鏈接 Vant Weapp是有贊前端團隊開源的一套小程式UI組件庫,助力開發者快速搭建小程式應用。它所使用的是MIT開源許可協議,對商業使用比較友好。 1.2 安裝Vant Weapp組件庫 安 ...
  • 什麼是JavaScript? 前言 本文內容為 博主閱讀“紅寶書”之後的總結和個人理解,有什麼錯誤歡迎指正! 一句話概括語言的誕生 1995年,網景公司一位名叫Brendan Eich的工程師,開發了一個叫Mocha的腳本語言。後來改名叫 JavaScript,以便蹭當時大火的Java的熱度。 到底 ...
一周排行
    -Advertisement-
    Play Games
  • 前言 當別人做大數據用Java、Python的時候,我使用.NET做大數據、數據挖掘,這確實是值得一說的事。 寫的並不全面,但都是實際工作中的內容。 .NET在大數據項目中,可以做什麼? 寫腳本(使用控制台程式+頂級語句) 寫工具(使用Winform) 寫介面、寫服務 使用C#寫代碼的優點是什麼? ...
  • 前言 本文寫給想學C#的朋友,目的是以儘快的速度入門 C#好學嗎? 對於這個問題,我以前的回答是:好學!但仔細想想,不是這麼回事,對於新手來說,C#沒有那麼好學。 反而學Java還要容易一些,學Java Web就行了,就是SpringBoot那一套。 但是C#方向比較多,你是學控制台程式、WebAP ...
  • 某一日晚上上線,測試同學在回歸項目黃金流程時,有一個工單項目介面報JSF序列化錯誤,馬上升級對應的client包版本,編譯部署後錯誤消失。 線上問題是解決了,但是作為程式員要瞭解問題發生的原因和本質。但這都是為什麼呢? ...
  • 本文介紹基於Python語言中TensorFlow的Keras介面,實現深度神經網路回歸的方法。 1 寫在前面 前期一篇文章Python TensorFlow深度學習回歸代碼:DNNRegressor詳細介紹了基於TensorFlow tf.estimator介面的深度學習網路;而在TensorFl ...
  • 前段時間因業務需要完成了一個工作流組件的編碼工作。藉著這個機會跟大家分享一下整個創作過程,希望大家喜歡,組件暫且命名為"easyFlowable"。 接下來的文章我將從什麼是工作流、為什麼要自研這個工作流組件、架構設計三個維度跟大家來做個整體介紹。 ...
  • 1 簡介 我們之前使用了dapr的本地托管模式,但在生產中我們一般使用Kubernetes托管,本文介紹如何在GKE(GCP Kubernetes)安裝dapr。 相關文章: dapr本地托管的服務調用體驗與Java SDK的Spring Boot整合 dapr入門與本地托管模式嘗試 2 安裝GKE ...
  • 摘要:在jvm中有很多的參數可以進行設置,這樣可以讓jvm在各種環境中都能夠高效的運行。絕大部分的參數保持預設即可。 本文分享自華為雲社區《為什麼需要對jvm進行優化,jvm運行參數之標準參數》,作者:共飲一杯無。 我們為什麼要對jvm做優化? 在本地開發環境中我們很少會遇到需要對jvm進行優化的需 ...
  • 背景 我們的業務共使用11台(阿裡雲)伺服器,使用SpringcloudAlibaba構建微服務集群,共計60個微服務,全部註冊在同一個Nacos集群 流量轉發路徑: nginx->spring-gateway->業務微服務 使用的版本如下: spring-boot.version:2.2.5.RE ...
  • 基於php+webuploader的大文件分片上傳,帶進度條,支持斷點續傳(刷新、關閉頁面、重新上傳、網路中斷等情況)。文件上傳前先檢測該文件是否已上傳,如果已上傳提示“文件已存在”,如果未上傳則直接上傳。視頻上傳時會根據設定的參數(分片大小、分片數量)進行上傳,上傳過程中會在目標文件夾中生成一個臨 ...
  • 基於php大文件分片上傳至七牛雲,使用的是七牛雲js-sdk V2版本,引入js文件,配置簡單,可以暫停,暫停後支持斷點續傳(刷新、關閉頁面、重新上傳、網路中斷等情況),可以配置分片大小和分片數量,官方文檔https://developer.qiniu.com/kodo/6889/javascrip ...