前端布局筆記 01

2021-08-29 05:32:57 字數 1344 閱讀 9596

父元素設定text-align:center;

父元素position為relative；子元素position：absolute；left：50%；transform:translatex(-50%);

彈性布局：父元素display：flex；子元素margin:o auto;或justify-content:center;

子元素display:table;margin 0 auto;

父元素display:table-cell;vertical-align:center

display:absolute;top:50%;transform:translatey(-50%);

display:flex;align-items:center;

**

.parent


.child
absolute定位

.child
（定寬+自適應）

浮動

left


right


right


.left 


.right 


.clear-fix::after
**

.parent


.left


.right,.left
3.彈性布局

.parent


.left


.right


注：flex:1等價於
彈性布局

.parent


.column


.column+.column
.column+.column選擇器的意思是，乙個column後面的column，所以第乙個column是不滿足的，其他幾個是滿足的，這就把均分單元格的間隙給設定好了

3. table

.parent-fix


.parent


.column
rem(root em):相對長度單位。相對於根元素(即html元素)font-size計算值的倍數

前端flex布局學習筆記

flex布局，即為彈性布局，其為盒模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。eg box display flex 行內元素也可以使用flex布局。注意 設定flex布局後，子元素的float clear和vertical align屬性將會失效。採用flex布局 元素 稱為fle...

前端面試 01 頁面布局

3.延伸 5種方法對比 4.總結 問題 假設高度預設100px 請寫出三欄布局，其中左欄 右欄各為300px，中間自適應。方法 class layout float class left right center class left 我是 left div class right 我是 right...

彈性布局 01

1 任何乙個盒子都可以指定為flex布局 display flex 2 行內元素也可以使用flex布局 display inline flex 3 webkit核心的瀏覽器必須加上 webkit字首 display webkit flex 注意 設定為flex布局以後，子元素的float clear...