CSS解決盒模型居中的問題

2021-10-16 01:16:08 字數 1406 閱讀 6761

css實現盒子模型水平居中、垂直居中、水平垂直居中的多種方法

css實現盒子模型水平居中的方法

全域性樣式

.parent  


.child
第一種：margin+width

這種方法適用於已經知道width的盒子，實現起來比較簡單



.child
第二種：text-align+inline-block

這種方法適用於多種場景（width不固定）



.parent 


.child
第三種：float+position

這種方法適用於多種場景（width不固定）



.between 


.child
第四種：

這種方法適用於多種場景（width不固定）



.parent 


.between 


.child
第五種：flex

這種方法適用於多種場景（width不固定）



.parent
第六種：fit-content

這種方法適用於多種場景（width不固定）



.between
css實現盒子模型垂直居中的方法

第一種：position

這種方法適用於已經知道width的盒子



.parent 


.child
第二種：position+transform

這種方法適用於已經知道width的盒子



.parent 


.child
第三種：flex布局

這種方法適用於多種場景（width不固定）



.parent
第四種：table-cell布局

這種方法適用於多種場景（width不固定）



.parent 


.between
css實現盒子模型水平垂直居中方法

第一種：



.parent 


.child
第二種：



.parent 


.child
第三種：



.parent 


.child

CSS盒模型相關問題

css盒模型相關問題 1.基本概念 標準模型 ie模型 2.標準模型和ie模型的區別 3.css如何設定這兩種模型 4.js如何設定獲取盒模型對應的寬和高 5.例項題 根據盒模型解釋邊距重疊 6.bfc 邊距重疊解決方案 具體說明 1.標準模型和ie模型 本質上是乙個盒子，封裝周圍的html元素，它...

css盒模型 標準盒模型 怪異盒模型

css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...

CSS的盒模型

乙個盒子中主要的屬性 就5個 width height padding border margin。width是 寬度 的意思，css中width指的是內容的寬度，而不是盒子的寬度。height是 高度 的意思，css中height指的是內容的高度，而不是盒子的高度 padding是 內邊距 的意思...