布局
左右布局
左侧 DIV 设置 float
属性为 left
,右侧 DIV
设置 margin-left
属性等于或大于左侧 DIV
宽度
.left {
float: left;
width: 200px;
height: 200px;
background-color: red;
}
.right {
background-color: orange;
margin-left: 210px;
height: 200px;
}
1.jpg
左侧 DIV 设置 float
属性为 left
,负边距 100%
,右侧 DIV
中嵌套一个 DIV
,页面内容放入嵌套的 DIV
中,右侧内嵌 DIV
设置 margin-left
属性等于或大于左侧 DIV
宽度
.left {
float: left;
width: 300px;
height: 300px;
background-color: gray;
margin-right: -100%;
}
.right {
float: left;
width: 100%;
}
.right-content {
height: 300px;
margin-left: 310px;
background-color: black;
}
2.jpg
如果将需求修改为右侧固定宽度而左侧自适应宽度
.left {
float: left;
width: 100%;
height: 300px;
background-color: blue;
margin-right: -300px;
}
.right {
float: right;
width: 300px;
height: 300px;
background-color: yellow;
}
居中的几种情况
块级元素居中 html代码部分
child
行内元素居中 html代码部分
child
水平居中
行内元素 text-align: center;
.parent {
text-align: center;
}
1.jpg
块级元素 margin: auto;
(低版本浏览器还需要设置 text-align: center;)
.parent {
text-align: center;
}
.child {
width: 100px;
margin: auto;
border: 1px solid blue;
}
2.jpg
垂直居中
行内元素(单行文字垂直居中):设置 line-height = height
.parent {
height: 200px;
line-height: 200px;
border: 1px solid red;
}
块级元素:绝对定位(已知宽高)
.parent {
position: relative;
height: 200px;
border: 1px solid #000;
}
.child {
width: 80px;
height: 40px;
background: #333;
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -40px;
}
3.jpg
块级元素:绝对定位 + transform
优点:不需要提前知道尺寸
缺点:兼容性不好
.parent {
position: relative;
height: 200px;
border: 1px solid #000;
}
.child {
width: 80px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid #000;
}
4.jpg
块级元素:绝对定位 + margin: auto;
.parent {
position: relative;
height: 200px;
border: 1px solid #000;
}
.child {
width: 80px;
height: 40px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
border: 1px solid #000;
}
5.jpg
块级元素:padding
如果高度固定,需要提前计算尺寸(只在某些特定情况适用)
.parent {
padding: 5% 0;
}
.child {
padding: 10% 0;
border: 1px solid #000;
}
6.jpg
块级元素:display: table-cell
.parent {
width: 600px;
height: 200px;
border: 1px solid #000;
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
7.jpg
或者
.parent {
height: 200px;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
}
8.jpg
块级元素:display: flex
.parent {
width: 400px;
height: 200px;
border: 1px solid #000;
display: flex;
align-items: center;
justify-content: center; /*水平居中*/
}
.child {
border: 1px solid #000;
}
9.jpg
块级元素:伪元素
.parent {
width: 300px;
height: 300px;
border: 1px solid #000;
text-align: center;
}
.child {
border: 1px solid #000;
width: 100px;
height: 40px;
display: inline-block;
vertical-align: middle;
}
.parent::before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
10.jpg
块级元素:calc()
.parent {
width: 200px;
height: 200px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
background: #000;
padding: -webkit-calc((100% - 100px) / 2);
padding: -moz-calc((100% - 100px) / 2);
padding: -ms-calc((100% - 100px) / 2);
padding: calc((100% - 100px) / 2);
background-clip: content-box;
}
}
11.jpg
这样基本上所有的水平居中和垂直居中就归纳好了。