CSS 应用
1、 居中
1.1、 flex
flex 居中最简单直观
<style>
.box {
width: 100px;
height: 100px;
background: red;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div class="box">hello</div>
1.2、 文本&图片水平居中
<style>
.box {
background: red;
text-align: center;
}
.box img, .box span{
display: inline-block;
vertical-align: middle;
}
</style>
<div class="box">
<img src="https://www.hahahehe.cn/favicon.ico" />
<span>hello</span>
</div>
1.3、 绝对定位居中
<style>
.box {
width: 300px;
height: 300px;
background: #EFEFEF;
position: relative;
}
.box img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="box">
<img src="https://www.hahahehe.cn/favicon.ico" />
</div>
2、 水平平铺
需求如下：一个容器内有8个元素，每4个item占一行，间距10px；
<style>
.box {
width: 300px;
height: 200px;
background: #CCC;
display: flex;
flex-wrap: wrap;
gap: 10px;
flex-direction: row;
}
.item {
background: red;
width: calc((100% - 30px)/4);
height: calc((100% - 10px)/2);
}
</style>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
3、 实现一个三角形
使用border属性
<style>
.box {
width: 0;
height: 0;
border: 10px solid red;
animation-name: triangle;
animation-duration: 8s;
animation-fill-mode: forwards;
}
@keyframes triangle{
25% {
border-top-color: transparent;
}
50% {
border-top-color: transparent;
border-left-color: transparent;
}
75% {
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
100% {
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
}
</style>
<div class="box"></div>
使用clip-path
<style>
.triangle {
width: 100px;
height: 100px;
clip-path: polygon(0 0, 50% 100%, 100% 0);
background: red;
}
</style>
<div class="triangle"></div>
4、 自适应的正方形
在处理移动端页面时，我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果，如 Flipbord 的移动页面。
4.1、 VW
.placeholder {
width: 100vw;
height: 100vw;
}
4.2、 padding
在 CSS 盒模型中，margin、padding 的百分比数值是相对 父元素宽度 计算的.
<style>
.box {
width: 200px;
}
.placeholder {
width: 50%;
padding-top: 50%;
background: red;
}
</style>
<div class="box">
<div class="placeholder"></div>
</div>
5、 透明背景效果
<style>
.demo {
background-image:
linear-gradient(45deg, rgba(0, 0, 0, 0.06) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.06) 75%),
linear-gradient(45deg, rgba(0, 0, 0, 0.06) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.06) 75%);
background-size: 20px 20px;
background-position: 0 0, calc(20px/2) calc(20px/2);
background-repeat: repeat;
width: 200px;
height: 200px;
}
</style>
<div class="demo"></div>
6、 格子背景
<style>
.grid-background {
background-color: #fff;
background-image: linear-gradient(90deg, #000 3%, #0000 3%), linear-gradient(360deg, #000 3%, #0000 3%);
background-size: 20px 20px;
background-position: center center;
}
</style>
<div class="grid-background" style="width: 200px;height: 200px;"></div>