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

正常流（Normal flow）

也被稱為文檔流

指在不對(duì)頁(yè)面進(jìn)行任何布局控制時(shí)，瀏覽器默認(rèn)的HTML布局方式。

通過(guò)使用其他布局技術(shù)，可以覆蓋正常流，如：

• 彈性盒子布局（flexbox）
• 網(wǎng)格布局（grid）
• 浮動(dòng)布局（float）

彈性盒子布局（flexbox）

Flexbox 是CSS 彈性盒子布局模塊（Flexible Box Layout Module）的縮寫，它被專門設(shè)計(jì)出來(lái)用于創(chuàng)建橫向或是縱向的一維頁(yè)面布局。

要使用flexbox，你只需要在想要進(jìn)行flex布局的父元素上應(yīng)用display: flex ，所有直接子元素都將會(huì)按照f(shuō)lex進(jìn)行布局。

父元素稱為容器，子元素稱為項(xiàng)目

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

網(wǎng)格布局（Grid）

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

采用網(wǎng)格布局的區(qū)域，稱為"容器"（container）。容器內(nèi)部采用網(wǎng)格定位的子元素，稱為"項(xiàng)目"（item）。

示例?www.ruanyifeng.com

浮動(dòng)布局（float）

把一個(gè)元素“浮動(dòng)”(float)起來(lái)，會(huì)改變?cè)撛乇旧砗驮谡２季至?#xff08;normal flow）中跟隨它的其他元素的行為。

這一元素會(huì)浮動(dòng)到左側(cè)或右側(cè)，并且從正常布局流(normal flow)中移除，這時(shí)候其他的周圍內(nèi)容就會(huì)在這個(gè)被設(shè)置浮動(dòng)(float)的元素周圍環(huán)繞。

float屬性可能有的四個(gè)值

.box { float: left;} //將元素浮動(dòng)到左側(cè)。 .box { float: lright;} //將元素浮動(dòng)到右側(cè)。 .box { float: none;} //默認(rèn)值, 不浮動(dòng)。 .box { float: inherit;} //繼承父元素的浮動(dòng)屬性。

水平居中

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

水平 + 垂直居中

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。