css方块制作
CSS方块制作方法
使用CSS创建方块可以通过多种方式实现，以下是几种常见的方法：
使用width和height属性
通过设置元素的宽度和高度属性可以创建一个方块。例如：
.square {
width: 100px;
height: 100px;
background-color: blue;
}使用aspect-ratio属性
aspect-ratio属性可以确保元素的宽高比例一致，即使只设置宽度或高度：
.square {
width: 100px;
aspect-ratio: 1/1;
background-color: red;
}使用padding百分比
利用padding百分比（基于父元素宽度）的特性，可以创建一个自适应的方块：
.square {
width: 20%;
padding-bottom: 20%;
background-color: green;
}使用CSS Grid或Flexbox 通过CSS Grid或Flexbox可以轻松创建等宽高的方块：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.square {
aspect-ratio: 1/1;
background-color: yellow;
}使用border-radius创建圆角方块
通过添加border-radius属性可以创建圆角或圆形方块：
.rounded-square {
width: 100px;
height: 100px;
background-color: purple;
border-radius: 10px;
}
.circle {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 50%;
}使用伪元素 通过伪元素也可以创建方块，适用于某些特殊场景：
.element::before {
content: '';
display: block;
width: 50px;
height: 50px;
background-color: pink;
}这些方法可以根据具体需求选择使用，灵活组合可以创建各种样式的方块效果。
