跳至主要內容

CSS布局

知识库编程技巧CSSSCSS大约 1 分钟

1. 实现水平居中和垂直居中

源码地址：https://codepen.io/una/pen/YzyYbBxopen in new window

.parent {display: grid;place-items: center;}
[vanilla]
<html>
<div class="layout-parent-1" ><div>:)</div></div>
</html>
<style>
.layout-parent-1 {
  display: grid;
  place-items: center;
  background: lightblue;
  width: 100%;
  height: 200px;
  resize: both;
  overflow: auto;
}
.layout-parent-1>div {
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid red;
  background: lightpink;
  font-size: 2rem;
  text-align: center;
}
</style>

2. 可解构的自适应布局

源码地址：https://codepen.io/una/pen/WNQdBzaopen in new window

[vanilla]
<html>
<div class="layout-parent-2" >
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
</html>
<style>
.layout-parent-2 {
  display: flex;
  flex-wrap: wrap;
  resize: both;
  overflow: auto;
}
.layout-parent-2>div {
  flex: 0 1 300px;
  flex: 1 1 300px;
  border: 1px solid red;
  background: lightpink;
  font-size: 2rem;
  text-align: center;
}
</style>

3. 经典的侧边栏

源码地址：https://codepen.io/una/pen/gOaNeWLopen in new window

4. 固定的页眉和页脚

源码地址：https://codepen.io/una/pen/bGVXPWBopen in new window

5. 经典圣杯布局（古典圣杯布局）

源码地址：https://codepen.io/una/pen/mdVbdByopen in new window

6. 有趣的叠块

源码地址：https://codepen.io/una/pen/eYJOYjjopen in new window

7. RAM技巧

源码地址：https://codepen.io/una/pen/oNbvNQvopen in new window

8. 卡片弹性适应性

源码地址：https://codepen.io/una/pen/ExPYomqopen in new window

9. 使用clamp实现fluid typography

源码地址：https://codepen.io/una/pen/QWyLxaLopen in new window

9. 完美实现比例

源码地址：https://codepen.io/una/pen/xxZKzaXopen in new window