目录
居中布局
水平居中布局
水平居中是指子元素在当前父级元素中的位置是相对水平居中的
- 方案一 inline-block + text-algin
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
<style>
.parent{
border: 3px solid red;
height: 200px;
width: 400px;
/* text-align:为文本内容设置对齐方式
left：左对齐
right：右对齐
center：居中对齐
*/
text-align: center;
}
.child{
border: 3px solid black;
height: 200px;
width: 200px;
/* 本来child是一个div，不是一个文本内容
display:inline-block是把元素表现为外在inline，内在block
而外在的inline就是属于文本性质
所以这个时候应该遵循上面的text-align属性
而不设置为inline是因为inline的width和height会丢失
*/
display: inline-block;
}
</style>
总结第一种方案
浏览器兼容性好
但是text-align会有继承效果，也就是child里面的内容元素也是相对child是居中的。解决办法就是child的style中重写text-align值
- 方案二 table/block + margin
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
<style>
.parent{
border: 3px solid red;
height: 200px;
width: 400px;
}
.child{
border: 3px solid black;
height: 200px;
width: 200px;
/* display: block; */
display: table;
margin: auto;
}
</style>
总结第二种方案
只需要对子元素进行设置
如果子元素脱离文档流，margin属性就会失效，这个时候无法使用此方法
脱离文档流的情况：开启float，position:fixed和position:absolute时候
- 方案三 absolute + transform
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
<style>
.parent{
border: 3px solid red;
height: 200px;
width: 400px;
/* 开启定位后，下面的absolute才会生效
position无论是absolute，fixed，relative都是表示开启定位
*/
position: relative;
}
.child{
border: 3px solid black;
height: 200px;
width: 200px;
/* absolute是相当于最近一级开启定位的父级元素 */
position: absolute;
/* 相对开启了relative定位的parent元素，左移一半 */
left: 50%;
/* 向右平移自身的一般，让自己中间对准parent的中间 */
transform: translateX(-50%);
}
</style>
总结第三种方案
父级元素无论是否脱离文档流都无所谓
transform兼容性不好
垂直居中布局
垂直居中是指子元素在当前父级元素中的位置是相对垂直居中的
- 方案一 table-cell + vertical-align
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
.parent{
border: 3px solid red;
height: 400px;
width: 400px;
/*
vertical-align是用来设置文本内容的
*/
vertical-align: middle;
/*
然后display:table-cell是类似的一种文本，所以也能够实现内容的居中
display:table是设置当前元素为<table>效果
display:table-cell是设置当前元素为<td>
*/
display: table-cell;
}
.child{
border: 3px solid black;
height: 200px;
width: 200px;
}
总结方案一
浏览器兼容性比较好
- 方案二 absolute + transform
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
.parent{
border: 3px solid red;
height: 400px;
width: 400px;
position: relative;
}
.child{
border: 3px solid black;
height: 200px;
width: 200px;
top: 50%;
transform: translateY(-50%);
position: absolute;
}
总结方案二
和之前一样的啦，就是兼容性不好，transform是CSS3中的内容了
不过是真的好用，父级元素是否脱离文档流都不影响子元素的垂直居中，可以正常的使用。我也喜欢用这种方式进行居中
附加一个垂直居中，不是布局哈
<div class="A">
hhh
</div>
.A{
border: 3px solid black;
height: 200px;
width: 200px;
line-height: 200px;
}
水平和垂直同时居中布局
其实也就是前面的两种，给他同时居中在一起
- 方案一 水平方向：table + margin，垂直方向：table-cell + vertical-align
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
<style>
.parent{
border: 3px solid red;
height: 400px;
width: 400px;
display: table-cell;
vertical-align: middle;
}
.child{
border: 3px solid black;
height: 200px;
width: 200px;
display: block;
margin: 0 auto;
}
</style>
- 方案二 水平方向：absolute + transform，垂直方向：absolute + transform
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
<style>
.parent{
border: 3px solid red;
height: 400px;
width: 400px;
position: relative;
}
.child{
border: 3px solid black;
height: 200px;
width: 200px;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50% , -50%);
}
</style>
总结
方案二更好，但是兼容性不好
多列布局
就是多个元素进行一行的列排列
两列布局（一列定宽，一列自适应，一般是左定，右自适应）
- 方案一 float + margin
<div class="box">
<div class="left">
左
</div>
<div class="right">
右
</div>
</div>
.box{
background: palegreen;
}
.left,.right{
height: 200px;
}
.left{
width: 200px;
background-color: red;
/* 脱离文档流 */
float: left;
}
.right{
background: black;
color: blue;
/* 消除左列定宽的影响 */
margin-left: 200px;
}
总结方案一
简短简单，但是margin要和定宽的值一样
不浮动和浮动的在一起会产生兼容性的问题
right中的元素使用清除浮动会往下平移
- 方案二 float + margin（升级版）
<div class="box">
<div class="left">
左
</div>
<div class="right-fix">
<div class="right">
右
</div>
</div>
</div>
.box{
background: palegreen;
}
.left,.right{
height: 200px;
}
.left{
width: 200px;
background-color: red;
/* 脱离文档流 */
float: left;
/* 提高层级 */
position: relative;
}
/* margin-left是为了提上去
padding-left和box-sizing是为了抵消margin-left的影响
*/
.right-fix {
float: right;
width: 100%;
margin-left: -200px;
padding-left: 200px;
box-sizing: border-box;
}
.right{
background: black;
color: blue;
}
总结第二种方案
确实让一行左右都是浮动，解决空隙问题，同时right标签中子元素使用clear属性也不会挤压到下面，但是比较繁琐
- 方案二 float + overflow
<div class="box">
<div class="left">
左
</div>
<div class="right">
右
</div>
</div>
.box{
background: palegreen;
}
.left,.right{
height: 200px;
}
.left{
width: 200px;
background-color: red;
float: left;
}
.right{
background: black;
color: blue;
/* overflow就是开启BFC
BFC就是一种块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界内的元素
但是这里只能通过overflow或者float:right开启
在这里补充，开启BCF的情况有
float不是none时候
position是absolute或者fixed的时候
display是flex，inline-flex，inline-block，table-cell，table-caption
overflow不是visible时候
根元素
*/
overflow: hidden;
}
总结方案二
方便，但是overflow会让内容溢出会隐藏，同时也会有空白
- 方案三 display的相关的table
<div class="box">
<div class="left">
左
</div>
<div class="right">
右
</div>
</div>
.box{
background: palegreen
/* table会自动等宽的分配宽度给子table-cell
而这个时候，left都定宽，所以剩下的都给right
*/
display: table;
/* tableLayout 属性用来显示表格单元格、行、列的算法规则。
列宽由表格宽度和列宽度设定 */
table-layout: fixed;
width: 100%;
}
.left,.right{
height: 200px;
display: table-cell;
}
.left{
width: 200px;
background-color: red;
}
.right{
background: black;
color: blue;
}
总结，受到表格的影响
三列布局（两个挨着的定宽，变上一个自适应）
- 方案一 float + margin
<div class="box">
<div class="left">
左
</div>
<div class="center">
中间
</div>
<div class="right">
右
</div>
</div>
.box{
background: palegreen;
width: 100%;
}
.left,.right,.center{
height: 200px;
}
.left{
width: 200px;
background-color: red;
float: left;
}
.center{
width: 200px;
background-color: yellow;
float: left;
}
.right{
background: black;
color: blue;
margin-left: 400px;
}
- 方案二 float + overflow
<div class="box">
<div class="left">
左
</div>
<div class="center">
中间
</div>
<div class="right">
右
</div>
</div>
.box{
background: palegreen;
width: 100%;
}
.left,.right,.center{
height: 200px;
}
.left{
width: 200px;
background-color: red;
float: left;
}
.center{
width: 200px;
background-color: yellow;
float: left;
}
.right{
background: black;
color: blue;
overflow: hidden;
}
- 方案三 display属性的table
<div class="box">
<div class="left">
左
</div>
<div class="center">
中间
</div>
<div class="right">
右
</div>
</div>
.box{
background: palegreen;
width: 100%;
display: table;
table-layout: fixed;
}
.left,.right,.center{
height: 200px;
display: table-cell;
}
.left{
width: 200px;
background-color: red;
}
.center{
width: 200px;
background-color: yellow;
}
.right{
background: black;
color: blue;
}
圣杯布局（特殊的三列布局，两边等宽，中间自适应）
- 方案一
<body>
<!-- 这个结构是因为，浮动在前，后面的元素可以挤压上来，而浮动在后，自身不能去挤压前面 -->
<div class="left">左</div>
<div class="right">右</div>
<div class="center">中</div>
</body>
<style>
.left,.center,.right{
height: 300px;
}
.left,.right{
width:300px;
}
.left{
background-color: blue;
float: left;
}
.center{
background-color: yellow;
margin-left: 300px;
margin-right: 300px;
}
.right{
background-color: palegreen;
float: right;
}
</style>
总结方案一
虽然能够实现要求，但是这里的html结构顺序不好，我们应该先让中间的内容展现出来，所以请看方案二
- 方案二
<body>
<div class="box">
<div class="center">中</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
.box{
height: 300px;
/* left的宽度 */
margin-left: 300px;
/* right的宽度 */
margin-right: 300px;
}
.left,.center,.right{
height: 300px;
float: left;
}
.left,.right{
width:300px;
}
.left{
background-color: blue;
margin-left: -100%;
position: relative;
left: -300px;
}
.right{
background-color: palegreen;
margin-left: -300px;
position: relative;
right: -300px;
}
.center{
width: 100%;
background-color: yellow;
}
双飞翼布局
就是改进过的圣杯布局
<body>
<div class="box">
<div class="center">
<div class="inner">
中
</div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
</body>
<style>
.box{
height: 300px;
}
.left,.center,.right{
height: 300px;
float: left;
}
.left,.right{
width:300px;
}
.left{
background-color: blue;
/* 相对于父级，直接100%的话，刚好能到前面与center的margin-left重合 */
margin-left: -100%;
}
.right{
background-color: palegreen;
/* 前面的left已经前进100%了，而left自己占了300px
对于right而言，自己也前进300px
而这个时候，只要在前进自己的宽度就可以实现最总效果
*/
margin-left: -300px;
}
.center{
width: 100%;
background-color: yellow;
}
.inner{
height:300px;
background-color: hotpink;
/* 预留的左右的位置 */
margin-right: 300px;
margin-left: 300px;
}
</style>
等分布局（每一列的宽度一样）
待更新
等高布局（每一列的高度一样）
待更新