本文介绍了一种使用CSS进行布局和样式的高效方法，包括绝对定位、弹性盒子模型、响应式字体大小调整等特性。通过具体代码示例展示了如何实现元素的居中、背景颜色变化及过渡效果。
css
*,
*:after,
*:before {
box-sizing: border-box;
}
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
padding: 20px;
}
body {
font-family: "Inter", sans-serif;
color: #340417;
font-size: calc(1em + 1.25vw);
background-color: #f4e7ec;
}
form {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
label {
display: -webkit-box;
display: flex;
cursor: pointer;
font-weight: 500;
}
label input {
display: none;
}
label input:checked + span {
background-color: #edd8e0;
}
label input:checked + span:before {
box-shadow: inset 0 0 0 0.4375em #900c3f;
}
label span {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
margin-bottom: 0.375em;
padding: 0.375em 0.75em 0.375em 0.375em;
border-radius: 99em;
-webkit-transition: 0.25s ease;
transition: 0.25s ease;
}
label span:hover {
background-color: #edd8e0;
}
label span:before {
display: -webkit-box;
display: flex;
flex-shrink: 0;
content: "";
background-color: #fff;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
margin-right: 0.375em;
-webkit-transition: 0.25s ease;
transition: 0.25s ease;
box-shadow: inset 0 0 0 0.125em #900c3f;
}
扫一扫
404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
