前端常用的兩種布局方式 聖杯布局和雙飛翼布局

聖杯布局和雙飛翼布局：兩者實現的功能都一樣，都是用於實現兩側的寬度不變，中間的寬度自適應的三欄布局

注意點：浮動的元素不會撐起父元素。

一、聖杯布局

2.2 設定兩側盒子的寬度（固定）

2.3 設定中間盒子的寬度等於容器的寬度 100%

2.4 設定容器的padding等於兩側盒子的寬度

2.5 設定三個盒子都在同乙個方向浮動

2.6 設定左邊盒子的margin-left =-100%

2.7 通過定位調整左邊的盒子,讓左邊的盒子不要蓋住中間的區域

2.8 設定右邊的盒子的margin-left等於負自身的寬度

2.9 通過定位調整右邊的盒子,讓左邊的盒子不要蓋住中間的區域

3.0 給容器設定乙個人最小的寬度，防止縮小變形

**如下： 

二、雙飛翼布局

1.2 設定兩側盒子的寬度(固定)

1.3 設定中間盒子的寬度等於容器的寬度(100%)

1.4 讓三個盒子都在同乙個方向上浮動

1. 5 給中間的盒子新增乙個子盒子

1.6 給子盒子設定margin：0  兩側盒子的寬度

1.7設定左邊盒子的margin-left=-100%

1.8 設定右邊盒子的margin-left=-自身的寬度

**如下：

移動端兩種布局方式

rem media less是我們移動端布局的第一種方案。移動端頁面設計稿尺寸 安卓手機尺寸 320px 360px 375px 384px 400px 414px 500px 720px 蘋果手機尺寸 640px 750px 通過less rem media 技術完成頁面在各個手機尺寸上的顯示 手...

HTML網頁布局的兩種方式

網頁布局兩種方式 浮動布局 定位布局 1.浮動布局 float left right none 注意 設定浮動之後，元素會脫離文件流，飄起來。塊級元素設定浮動，失去獨佔一行的特性。浮動元素會受 父級 元素的擠壓，可能擠到下一行去。自動擴充套件大盒子高度 1.盒子塌陷 大盒子不設定高度，小盒子又全部浮...

常用的頁面布局（兩欄布局，聖杯 雙飛翼布局）

前言 他們都遵循以下要點 兩側寬度固定，中間寬度自適應 中間部分在dom結構上優先，以便先行渲染 允許三列中的任意一列成為最高列 只需要使用乙個額外的 外層 標籤 1.兩欄布局 左邊定寬，右邊自適應 left 左邊定寬 div right 右邊自適應,前端前端前端前端前端前端前端前端前端前端 div...