布局
左右布局
HTML代码
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
CSS代码
.left {
width: 100px;
height: 150px;
background-color: #FFB5BF;
}
.right {
height: 150px;
background-color: #94E8FF;
}
1. 设置 display 为 inline-block
.container {
font-size: 0; /* 消除间距 */
}
.left, .right {
display: inline-block;
}
.right {
width: calc(100% - 100px); /* 计算宽度，运算符号左右一定要有空格 */
}
2. 使用 float
.left {
float: left;
}
.right {
margin-left: 100px; /* 为 .left 留出空间 */
}
.container {
overflow: hidden; /* 别忘了清除浮动 */
}
我们可以还设置 .left、.right 均左浮动，这时，它们便会紧贴着排列在一行。因为 .right 是浮动的，所以需要计算宽度。
.left {
float: left;
}
.right {
float: left;
width: calc(100% - 100px);
}
.container {
overflow: hidden;
}
左中右布局
HTML代码
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
CSS代码
body {
min-width: 630px;
}
.center {
width: 100%;
height: 150px;
background-color: #94E8FF;
}
.left {
width: 100px;
height: 150px;
background-color: #FFB5BF;
}
.right {
width: 200px;
height: 150px;
background-color: #8990D5;
}
结构说明：左右两部分宽度固定，中间的部分填充剩余所有宽度。
常用场景：最左边摆放一张图片，中间摆放说明性文字，右边摆放相关操作的小图标。
之前的做法虽然有实现但是不完美。思路如下（简单描述为左中结构）：
首先考虑中间的要拉伸铺满剩下的宽度，必须宽度设置成百分比100%，用box-sizing设置为border-box，然后配合padding，给左右留固定的宽度，左右的内容放到padding区域与其重叠，使用float浮动是不能重叠的，所以一定要有一个是绝对定位，全部都使用绝对定位是没有问题的，但是绝对定位有个特性，定位的元素从文档流中删除，不占用空间，导致父元素不能自动适应高度，如果全部都绝对定位，父元素不显示指定高度，那么高度会为0，导致后面的元素和要排列的左中右结构重叠了。浮动元素本来也是脱离了文档流，不占用空间，但是父元素设置成内联块之后，它能占用空间（不理解内联块的性质）。于是就用绝对定位和浮动来混合实现，多数情况下，左边的图片宽度和高度都固定，于是就把左边的内容设置成绝对定位，中间的内容设置成浮动了，父元素再设置个最小高度为左边内容的高度，规避高度适应问题。
上述实现如果遇到左边和中间的内容高度都不确定，那就不好使了。今天终于想出另一种方案，思路如下：
全部都用浮动，关键要解决中间元素宽度为100%之后，左中右总宽度超过父元素宽度，导致换行的问题。借助外边距margin设置为负值解决了。中间内容把padding-left设置成左右部分宽度的和，把margin-left设置成padding-left对应的负数，就缩减了真实宽度了，恰好合适。
.container{
display:inline-block;
width:100%;
}
.left{
float: left;
width:100px;
}
.right{
float: left;
width:50px;
}
.center{
float: left;
box-sizing:border-box;
width: 100%;
padding-left: 150px;
margin-left: -150px;
}
水平居中
行内元素居中
.div1{
text-align:center;
}
<div class="div1">Hello world</div>
块状元素居中
.div1{
width:200px;
border:1px solid red;
margin:0 auto;
}
<div class="div1">Hello world</div>
垂直居中
.wrap h2{
margin:0;
height:100px;
line-height:100px;
background:#ccc;
}
<div class="wrap">
<h2>Hello world</h2>
</div>