CSS 布局模式，有時簡稱為布局，是一種基于HTML元素盒子與其兄弟和祖輩盒子的交互方式來確定盒子的位置和大小的算法。

正常流（Normal flow）

也被稱為文檔流

指在不對頁面進行任何布局控制時，瀏覽器默認的HTML布局方式。

通過使用其他布局技術，可以覆蓋正常流，如：

• 彈性盒子布局（flexbox）
• 網格布局（grid）
• 浮動布局（float）

彈性盒子布局（flexbox）

Flexbox 是CSS 彈性盒子布局模塊（Flexible Box Layout Module）的縮寫，它被專門設計出來用于創建橫向或是縱向的一維頁面布局。

要使用flexbox，你只需要在想要進行flex布局的父元素上應用display: flex ，所有直接子元素都將會按照flex進行布局。

父元素稱為容器，子元素稱為項目

注意：設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。

網格布局（Grid）

Flexbox用于設計橫向或縱向的布局，而Grid布局則被設計用于同時在兩個維度上把元素按行和列排列整齊。

采用網格布局的區域，稱為"容器"（container）。容器內部采用網格定位的子元素，稱為"項目"（item）。

示例?www.ruanyifeng.com

浮動布局（float）

把一個元素“浮動”(float)起來，會改變該元素本身和在正常布局流（normal flow）中跟隨它的其他元素的行為。

這一元素會浮動到左側或右側，并且從正常布局流(normal flow)中移除，這時候其他的周圍內容就會在這個被設置浮動(float)的元素周圍環繞。

float屬性可能有的四個值

.box { float: left;} //將元素浮動到左側。 .box { float: lright;} //將元素浮動到右側。 .box { float: none;} //默認值, 不浮動。 .box { float: inherit;} //繼承父元素的浮動屬性。

水平居中

• inline 元素：text-align: center
• block 元素：margin: auto
• absolute 元素：left: 50%; + margin-left: 負值 (需要知道子元素的寬)
• absolute 元素：left: 50%; + transform: translateX(-50%);
• absolute 元素：right: 0; left: 0; + margin: auto;

水平 + 垂直居中

• inline 元素：line-height 的值等于 height 的值
• absolute 元素：left: 50%; top: 50%; margin-left: 負值; margin-top: 負值;(需要知道子元素的尺寸)
• absolute 元素：transform: translate(-50%,-50%);
• absolute 元素：top: 0; right: 0; bottom: 0; left: 0; + margin: auto;

總結

以上是生活随笔為你收集整理的css怎么把横向菜单变纵向_CSS 布局模式 + 居中布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。