一般的なレイアウト
1.1 固定レイアウト（基本レイアウト）
1.2 パーセント分布（フローレイアウト）
幅、heigth 、パディング、マージンの使用率のレイアウト
幅、パディング、マージン親要素に相対的な幅をパーセンテージで設定されています
高さ、親要素の割合の高さに対する相対が提供されています
インタビューの質問：
境界線は使用できません％の書き込みを
絶対配置要素、もし％の書き込み幅、高さ、パディング、それぞれ、参照は、親要素を参照して、その位置で、幅、高さ、幅。これは、すでに最も近い親要素に配置されています
|
<！ - の<div> </ div> - > </ div> 1 |
| 体{ マージン：0; } ＃容器{ / *高さ：200pxの。 幅：200pxの。* / 幅：50％; パディングトップ：50％; / *パディング：100ピクセル; * / / *マージン：200pxの自動; * / 国境：固体1pxの。 }
#containerのDIV { 高さ：50％; 幅：50％; / * ここでは、ボックスの内容の幅を意味し、50％* / 国境：固体1pxの。 } 1 |
1.3 固体比レイアウト固体
左サイドバーの一定割合の物流センター
| <DIV CLASS = "コンテンツ"> </さておき> <さておきクラス= "左"> <余談クラス= "右"> </さておき> <DIV CLASS = "メイン"> </ div> </ div> 1 |
| 体{ マージン：0; }
さておき、{.main / * ボックスの最小の高さを設定します* / 分の高さ：200pxの。 }
aside.left { フロート：左; 幅：270px; background: yellow; }
aside.right{ float:right; width: 300px; background: red; }
.main{ /* 设置最小宽度 */ min-width: 800px; width: 100%; background: orange;; } 1 |
思考？
两边固定，中间自适应，且中间栏优先渲染。
1.4 圣杯布局
出自外国a list of part 上的一篇文章，圣杯外文的意思是渴求之物的意思
思想：利用float 然后结合margin 用父元素padding挤出中间被遮盖的内容 最后用相对定位调节左右边栏进行填充
| <div class="content clear"> <div class="main">中间主要内容</div> <aside class="left">左边栏</aside> <aside class="right">右边栏</aside> </div> 1 |
| body{ margin: 0; }
.clear::after{ display: block; height: 0; content: ''; clear: both; visibility: hidden; }
.content{ padding: 0 300px 0 270px; border: solid 1px; }
aside,.main{ /* 设置盒子的最小高度 */ min-height: 200px; }
.main{ /* box-sizing: border-box; */ float: left; /* 设置最小宽度 */ min-width: 800px; width: 100%; /* padding: 0 300px 0 270px; */ background: orange;; }
aside.left{ float: left; width: 270px; margin-left: -100%; background: yellow;
position: relative; left: -270px; }
aside.right{ float: left; width: 300px; margin-left: -300px; background: red;
position: relative; right: -300px; } 1 |
1.5 双飞翼布局
由淘宝的UED团队在页面开发时产生的灵感，来源于页面布局
大体思路和圣杯布局相同，不同之处 在中间主要内容上套了一层盒子，然后使用的是margin来解决中间栏文字显示的问题，不再需要定位
| <div class="content clear"> <div class="main"> <div> 中间主要内容 </div> </div> <aside class="left">左边栏</aside> <aside class="right">右边栏</aside> </div> 1 |
| body{ margin: 0; min-width: 900px;}
.clear::after{ display: block; height: 0; content: ''; clear: both; visibility: hidden; }
.content{ border: solid 1px; }
aside,.main{ /* 设置盒子的最小高度 */ min-height: 200px; }
.main{ float: left; min-width: 300px; width: 100%; background: orange;; }
.main div{ margin: 0 320px 0 290px; background: pink; }
aside.left{ float: left; width: 270px; margin-left: -100%; background: yellow; }
aside.right{ float: left; width: 300px; margin-left: -300px; background: red; } 1 |
1.6 弹性布局
Display:flex || inline-flex; 可以设置盒子为弹性盒容器
弹性盒子可以用来进行空白空间的分配和子元素的排列方式
弹性盒子组成：弹性盒容器 与 弹性子元素
弹性盒子不会影响子元素和盒容器其他属性的渲染
| <div class="flex-box"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <!-- <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> --> </div> 1 |
| .flex-box{ /* 设置容器为弹性盒容器 */ display: flex; /* 设置排列顺序 row row-reverse column column-reverse*/ /* flex-direction:column-reverse; */ /* 设置是否强制换行 no-wrap wrap wrap-reverse*/ /* flex-wrap: wrap; */ /* 设置主轴方向空白空间的分配 flex-start flex-end center space-between space-around*/ justify-content: space-around;
border: solid 1px; /* overflow: hidden; */ }
.flex-box div{ height: 100px; width: 200px; /* margin-left: 60px; */ /* float: left; */ }
.flex-box div.box1{ background: red; }
.flex-box div.box2{ background: yellow; }
.flex-box div.box3{ background: green; }
.flex-box div.box4{ background: blue; } 1 |
1.7 设置文本垂直居中的方式
Line-height 设置单行文本垂直居中
Padding 挤
表格 v-align
1.8 设置容器垂直居中方式
Padding 挤
Marin 配合 translateY
定位 translateY
Align-items