一、常见的布局
1.1 固定布局(基本的布局方式)
1.2 百分比布局(流式布局)
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
1.3 固比固布局
左边边栏固定,中间百分比布局
<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
思考?
两边固定,中间自适应,且中间栏优先渲染。
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="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="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