1.2 垂直居中
1.3 居中布局
2. 多列布局
2.2 聖杯布局
2.3 等分布局
// flex快速布局
display
: flex;
// 方向為橫向
flex-direction
: row;
// 方向為豎向
flex-direction
: column;
// 使內部元件均勻分布
justify-content
: space-between;
// 設定元件層級，以面向我方向為正方向
z-index
: 2;
// 設定模糊
filter
:blur
(2px)
; // 設定圓角，50%為圓形
border-radius
: 8px;
// 字型加粗
font-weight
: bold;
// 設定一行的高度(一般跟隨height)
line-height
: 40px;
// 向上平移，正值為向下平移
transform
:translatey
(-50%)
;
設定浮動和絕對定位後會使該元素脫離文件流
提供三種解決方案，推薦使用 margin + block
class
="parent"
>
class
="child"
>
hello pibigstardiv
>
div>
>
.parent
.child
style
>
>
.parent
/* 使用 table 和 block 都可以 */
.child
style
>
>
.child
style
>
提供兩種解決方案
class
="parent"
>
class
="child"
>
hello pibigstardiv
>
div>
>
.parent
.child
style
>
>
.parent
style
>
>
.parent
.child
style
>
>
.parent
.child
style
>
>
.parent
.child
style
>
左邊定寬，右邊自適應，推薦 flex + flex-direction 和 float + overflow
class
="parent"
>
class
="left"
>
左: 定寬div
>
class
="right"
>
右: 自適應div
>
div>
>
.left
.right
style
>
>
.parent
.left
.right
style
>
>
.left
.right
style
>
>
.left
.right
style
>
>
.parent
.left
.right
style
>
class
="parent"
>
class
="top"
>
div>
class
="center"
>
class
="left"
>
div>
class
="middle"
>
div>
class
="right"
>
div>
div>
class
="bottom"
>
div>
div>
>
.parent
.top
.center
.left
.middle
.right
.bottom
style
>
class
="parent"
>
class
="col1"
>
div>
class
="col2"
>
div>
class
="col3"
>
div>
class
="col4"
>
div>
div>
.col1,.col2,.col3,.col4
.parent
.col1,.col2,.col3,.col4
詳解CSS布局
css頁面布局允許我們拾取網頁中的元素，並且控制它們相對正常布局流 周邊元素 父容器或者主視口 視窗的位置。主要對文件流的改變進行布局。假設你已經掌握了css的選擇器 屬性和值，並且可能對布局有一定了解可以往下看，如果沒有可以先看這篇部落格css解析。css實現左右布局的方式大概有六種 1.tabl...
css 各種常見布局整理
display屬性 頁面中每個元素都有乙個預設的display屬性，它的值與該元素的型別有關，預設值通常是block 元素顯示為塊元素 或inline 元素顯示為行內元素 此外值為none時，表示隱藏該元素，但是它和visibility屬性不一樣。把display設定成none元素不會佔據它本來應該...
CSS彈性布局詳解
display flex inline flex 彈性子元素通常在彈性盒子內一行顯示。預設情況每個容器只有一行。row 橫向從左到右排列 左對齊 預設的排列方式。row reverse 反轉橫向排列 右對齊，從後往前排，最後一項排在最前面。column 縱向排列。column reverse 反轉縱...