width、heigth、padding、margin使用百分比进行布局
width、padding、margin相对父元素的宽度进行百分比设置
height相对父元素的高度进行百分比设置
面试题：
border不能用%写
绝对定位的元素，如果用%写width、height、padding，分别参考的是自己的定位参考父元素的width、height、width。就是离自己最近的已经定位的父代元素
|
<!-- <div></div> --> </div> 1 |
|
body{ margin: 0; } #container{ /* height: 200px; width: 200px; */ width: 50%; padding-top:50%; /* padding: 100px; */ /* margin: 200px auto; */ border: solid 1px; }
#container div{ height: 50%; width: 50%;/*这里指的是内容盒子的宽度的50%*/ border: solid 1px; } 1 |
左边边栏固定，中间百分比布局
|
<div class="content"> <aside class="left"></aside> <aside class="right"></aside> <div class="main"></div> </div> 1 |
|
body{ margin: 0; }
aside,.main{ /* 设置盒子的最小高度 */ min-height: 200px; }
aside.left{ float: left; width: 270px; background: yellow; }
aside.right{ float:right; width: 300px; background: red; }
.main{ /* 设置最小宽度 */ min-width: 800px; width: 100%; background: orange;; } 1 |
思考？
两边固定，中间自适应，且中间栏优先渲染。
出自外国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 |
由淘宝的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 |
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 |
Line-height 设置单行文本垂直居中
Padding 挤
表格 v-align
Padding 挤
Marin 配合 translateY
定位 translateY
Align-items
原文：https://www.cnblogs.com/Vhaomei0452/p/11390333.html