【前端自学之路】CSS之布局

CSS 布局

什么是布局

简而言之,布局是实现页面元素的编排方式

学习布局的基础是先了解HTML元素的意义和特性,以及CSS属性的意义和特性

常见的布局方式

  • 上下布局(上中下布局)
  • 左边固定、右边自适应
  • 左边自适应、右边固定
  • 左右两边固定、中间自适应
  • 上下居中
  • 左右居中

上下布局(上中下布局)

利用块元素的特性:独占一行特性,用块元素默认即可实现这种布局方式

1
2
<div></div>
<div></div>

左边固定、右边自适应

简单的左右布局,通过行元素和行内元素默认即可实现左右布局

如何实现左边固定、右边自适应呢? 我们考虑用flex布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
.parent-ele {
display: flex;
}
.left {
width: 100px;
}
.right {
flex: 1;
}
</style>

<div class="parent-ele">
<div class="left">左边固定</div>
<div class="right">右边自适应</div>
</div>

左边自适应、右边固定

和左边固定、右边自适应 同理

左右两边固定、中间自适应

同样我们用flex布局方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
.parent-ele {
display: flex;
}
.left {
width: 100px;
}
.middle {
flex: 1;
}
.right {
width: 100px;
}
</style>

<div class="parent-ele">
<div class="left">左边固定</div>
<div class="middle">中间自适应</div>
<div class="right">右边固定</div>
</div>

水平居中

  • 行内元素 text-align: center;
  • 块元素 width: 100px; margin: auto;
坚持原创技术分享,谢谢鼓励我继续创作!