一、左右布局
1. inline-block
display:inline-block属性是介于行级元素(display:inline)和块级元素(display：block)之间的属性，它可以像行级元素一样水平布局，也可以像块级元素设置宽高属性，所以可以进行左右布局。
<html>
<div>
<div class='left'>
</div>
<div class='right'>
</div>
</div>
<css>
.left,
.right {
display:inline-block;
}
2. float实现左右布局
float浮动，将该块状区域脱离父级标签的文档流，left属性值使该区域向父级标签区域的左侧边界放置，right属性值使该区域块向父级标签的右侧边界放置，如是利用该属性可以实现左右布局。
<html>
<div>
<div class='left'>左边</div>
<div class='right'>右边</div>
</div>
<css>
.left {
float: left;
}
二、左中右布局
1. 绝对定位
左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。div顺序没有要求。
<html>
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
<css>
html,body{
margin:0;
height:100%;
}
.left,
.right{
position:absolute;
top:0;
width:20px;
height:100%;
}
.left{
left:0;
background:#a0b3d6;
}
.right{
right:0;
background:#a0b3d6;
}
.middle{
margin:0 20px;
background:#ffe6b8;
height:100%;
}
2. 使用自身浮动
对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。同时父盒子设置 overflow: auto; 来避免子盒子溢出
<html>
<body>
<div class="left">a</div>
<div class="right">a</div>
<div class="middle">a</div>
</body>
<css>
body {
width: 300px;
height: 30px;
overflow: auto;
}
.left {
width: 100px;
height: 30px;
float: left;
background: #a0b3d6;
}
.right {
width: 100px;
height: 30px;
float: right;
background: #a0b3d6;
}
.middle {
width: 100px;
height: 100%;
margin: 0px 100px;
background: #555;
}
3.圣杯布局
圣杯布局的原理是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度，并且这个宽度要和left块的margin负值进行配合。
<html>
<body>
<div class="middle">
<div class="zz"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
<css>
html,
body {
margin: 0;
height: 100%;
}
.middle {
width: 100%;
height: 100%;
float: left;
}
.zz {
margin: 0 210px;
background: #ffe6b8;
height: 100%;
}
.left,
.right {
width: 200px;
height: 100%;
float: left;
background: #a0b3d6;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
三、 水平居中
- 对于行内元素(inline)：
text-align: center; - 对于块级元素(block)：通过把固定宽度块级元素的
margin-left和margin-right设成auto，就可以使块级元素水平居中。 - 对父元素设置
text-align: center; - 对子元素设置
display: inline-block;（vertical-alinga:top） - 或者使用 flex 布局flex 布局：
display:flex； justify-content:center
四、 垂直居中
1. 单行内联(inline-)元素垂直居中
通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。
2. 多行元素垂直居中
利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。
3. 块级元素垂直居中
3.1 固定高度的块级元素
通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了。
3.2 未知高度的块级元素
当垂直居中的元素的高度和宽度未知时，我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。
五、 CSS小技巧
box-sizing
当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。
百分比宽度
百分比是一种相对于包含块的计量单位。它对图片和盒子模很有用：比如实现图片宽度始终是容器宽度的50%，即使窗口缩小。
inline-block 布局
inline-block 元素 影响垂直居中，加vertical-align：top。
网友评论