# 水平
# 文本|行内元素|行内块元素
- 优点
- 简单快捷、兼容性好
- 缺点
- 只对行内内容有效
- 属性会继承影响到后代行内容
- 子元素宽度大于父元素则无效
inline-level
代码语言：javascript复制<html>
<body>
<div class="parent-1">
<span>inline-level</span>
</div>
</body>
</html>
<style>
.parent-1 {
text-align: center;
}
</style># 块级元素
# 块级元素一般居中
块级元素一般居中
代码语言：javascript复制<html>
<body>
<div class="parent-2">
<div class="child-2">块级元素一般居中</span>
</div>
</body>
</html>
<style>
.child-2 {
margin: 0 auto;
width: 30%;
background: red;
}
</style>
# 子元素含float
子元素含float
代码语言：javascript复制<html>
<body>
<div class="parent-3">
<div class="child-3">子元素含float</div>
</div>
</body>
</html>
<style>
.parent-3 {
width: fit-content;
margin: 0 auto;
background: #fdcb6e;
}
.child-3 {
width: 100px;
float: right;
background: #ffeaa7;
}
</style># Flex 弹性盒子
flex弹性盒子
代码语言：javascript复制<html>
<body>
<div class="parent-4">
<div class="child-4">flex弹性盒子</div>
</div>
</body>
</html>
<style>
.parent-4 {
background: #fdcb6e;
display: flex;
justify-content: center;
}
.child-4 {
width: 100px;
background: #ff7675;
}
</style>
# 绝对定位
- transform
绝对定位-transform
代码语言：javascript复制<html>
<body>
<div class="parent-5-1">
<div class="child-5-1">绝对定位-transform</div>
</div>
</body>
</html>
<style>
.parent-5-1 {
position: relative;
width: 100%;
height: 50px;
background: #fdcb6e;
}
.child-5-1 {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 150px;
background: #ffeaa7;
}
</style>
- left: 50%;
绝对定位-left:50%
代码语言：javascript复制<html>
<body>
<div class="parent-5-2">
<div class="child-5-2">绝对定位-left:50%</div>
</div>
</body>
</html>
<style>
.parent-5-2 {
position: relative;
width: 100%;
height: 50px;
background: #fdcb6e;
}
.child-5-2 {
position: absolute;
left: 50%;
margin-left: calc(-0.5 * 150px);
width: 150px;
background: #ffeaa7;
}
</style>
- left/right: 0
绝对定位-left/right:0
代码语言：javascript复制<html>
<body>
<div class="parent-5-3">
<div class="child-5-3">绝对定位-left/right:0</div>
</div>
</body>
</html>
<style>
.parent-5-3 {
position: relative;
width: 100%;
height: 50px;
background: #fdcb6e;
}
.child-5-3 {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 150px;
background: #ffeaa7;
}
</style>
# 竖直
# 行内元素
行内元素
代码语言：javascript复制<html>
<body>
<div class="parent-6">
<span class="child-6">行内元素</span>
</div>
</body>
</html>
<style>
.parent-6 {
height: 50px;
background: #fdcb6e;
}
.child-6 {
line-height: 50px;
background: #ffeaa7;
}
</style>
# 块级元素
# 行内块级元素
- 适应IE7
行内块级元素
代码语言：javascript复制<html>
<body>
<div class="parent-7">
<div class="child-7">行内块级元素</div>
</div>
</body>
</html>
<style>
.parent-7 {
width: 100%;
height: 50px;
background: #fdcb6e;
}
.child-7 {
width: 150px;
background: #ffeaa7;
}
.parent-7::after, .child-7 {
display: inline-block;
vertical-align: middle;
}
.parent-7::after {
content: '';
height: 100%;
}
</style>
# table
- 优点
- 元素高度可以动态改变，不需要在CSS中定义
- 如果父元素没有足够空间时，该元素也不会被折断
table
代码语言：javascript复制<html>
<body>
<div class="parent-8">
<div class="child-8">table</div>
</div>
</body>
</html>
<style>
.parent-8 {
width: 100%;
height: 50px;
background: #fdcb6e;
display: table;
}
.child-8 {
display: table-cell;
vertical-align: middle;
height: 30px;
width: 150px;
background: #ffeaa7;
}
</style>
# flex弹性盒子
- 优点
- 内容块宽高任意，优雅溢出
- 可用于更复杂高级的布局技术中
- 缺点
- IE8/9不支持
- 需要加浏览器厂商前缀
- 渲染上可能会有一些问题
flex
代码语言：javascript复制<html>
<body>
<div class="parent-9">
<div class="child-9">flex</div>
</div>
</body>
</html>
<style>
.parent-9 {
width: 100%;
height: 50px;
background: #fdcb6e;
display: flex;
align-items: center;
}
.child-9 {
width: 150px;
background: #ffeaa7;
}
</style>
# 绝对定位
- transform
transform
代码语言：javascript复制<html>
<body>
<div class="parent-10">
<div class="child-10">transform</div>
</div>
</body>
</html>
<style>
.parent-10 {
width: 100%;
height: 50px;
background: #fdcb6e;
position: relative;
}
.child-10 {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 150px;
background: #ffeaa7;
}
</style>
- top:50%
top:50%
代码语言：javascript复制<html>
<body>
<div class="parent-11">
<div class="child-11">top:50%</div>
</div>
</body>
</html>
<style>
.parent-11 {
width: 100%;
height: 50px;
background: #fdcb6e;
position: relative;
}
.child-11 {
position: absolute;
top: 50%;
margin-top: calc(-0.5 * 30px);
height: 30px;
width: 150px;
background: #ffeaa7;
}
</style>
- top/bottom
top/bottom
代码语言：javascript复制<html>
<body>
<div class="parent-12">
<div class="child-12">top/bottom</div>
</div>
</body>
</html>
<style>
.parent-12 {
width: 100%;
height: 50px;
background: #fdcb6e;
position: relative;
}
.child-12 {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
height: 30px;
width: 150px;
background: #ffeaa7;
}
</style>
