一天掌握CSS核心特性：我用这些实战项目彻底理解了布局与动画学习背景我发现自己对CSS的属性了解的不够深入今日学习清

学习背景

我发现自己对CSS的属性了解的不够深入

今日学习清单

我重点攻克了以下CSS的核心知识点：

布局系统：

Flex弹性布局、定位(父相子绝、固定定位)

动画与交互：

过渡、2d转换

选择器进阶：

伪元素、伪类、结构伪类选择器

视觉效果：

渐变、阴影、透明度

显示控制：

display属性、溢出隐藏

项目实战演示

项目一：淘宝商品页面，鼠标悬浮在商品上面时会出现橙色边框

Document .box { width: 400px; padding: 10px; /* transparent:让图片的边框消失 */ border: 2px solid transparent; margin-right: 5px; display: inline-block; cursor: pointer; } .box:hover { border: 2px solid orangered; border-radius: 10px; } .box>img { width: 100%; height: 300px; border-radius: 10px; } .title { height: 50px; } .price { font-weight: bold; font-size: 25px; color: rgb(249, 116, 7); margin-top: 100px; } </style>

<!--一个商品-->
<div class="box">
    <img src="https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a3e8df58dbc0402daf6da2777e5ec228~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5p2O5pmo5Y2T:q75.awebp?rk3s=f64ab15b&x-expires=1773624085&x-signature=4dD6MlF0l5Od32QFsx0r%2BcoHqvs%3D" alt="">
    <div class="title">【设计师】冬款粉色</div>
    <div class="price">￥79.9</div></div>

</div>

<div class="box">
    <img src="https://img.alicdn.com/bao/uploaded/i2/3957261314/O1CN01dE29V71LZrWtvt6iV_!!3957261314.jpg_460x460q90.jpg_.webp"
        alt="">
    <div class="title">妈妈装</div>
    <div class="price">￥298</div>
</div>

<div class="box">
    <img src="https://img.alicdn.com/bao/uploaded/i2/3957261314/O1CN01dE29V71LZrWtvt6iV_!!3957261314.jpg_460x460q90.jpg_.webp"
        alt="">
    <div class="title">妈妈装</div>
    <div class="price">￥298</div>
    
</div>

<div class="box">
    <img src="https://img.alicdn.com/bao/uploaded/i2/3957261314/O1CN01dE29V71LZrWtvt6iV_!!3957261314.jpg_460x460q90.jpg_.webp"
        alt="">
    <div class="title">妈妈装</div>
    <div class="price">￥298</div>
</div>

从而实现下图的效果

项目二：汽车推荐，鼠标悬停时，会放大汽车的图片，并且不超过盒子的容量，并且会弹出“我的第一辆汽车”

Document .container{ width: 1050px; display: flex; flex-wrap: wrap; gap: 40px; /* 上下外边距左右外边距*/ margin: 0px auto; /* 什么意思，把图片在整个网页中居中 */ } .box{ width: 500px; height: 400px; position: relative; /* 父相子绝，防止文字与背景遮住下面的图片 */ border-radius: 20px; overflow: hidden; } .box>img{ width: 500px; height: 400px; /* 平铺，和原来图片形状一样(没有挤压)铺满框中 */ object-fit: cover; border-radius: 20px; transition: all 1s; } .box:hover>img{ transform: scale(1.5); } .box>div{ width: 500px; height: 200px; background-color: rgba(0,0,0,0.3); color: white; position: absolute; font-size: 30px; bottom: -300px; /* 这个transition放进.box:hover>div里也可以 */ transition: all 1s; padding-left: 30px; } .box:hover>div{ /* box里的div位置从-300px变为0px 且有了父相子绝以后，box里的div(的底边)-300px，0px都指相对于父元素box里的坐标*/ bottom: 0px; } </style> <div class="container"> <div class="box"> <img src="转存失败，建议直接上传图片文件 https://img2.baidu.com/it/u=592408508,460438905&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1427" alt="转存失败，建议直接上传图片文件"> <div>我的第一辆汽车</div> </div></div> <div class="box"> <img src="https://img2.baidu.com/it/u=592408508,460438905&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1427" alt=""> <div>我的第一辆汽车</div> </div> <div class="box"> <img src="https://img2.baidu.com/it/u=592408508,460438905&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1427" alt=""> <div>我的第一辆汽车</div> </div> <div class="box"> <img src="https://img2.baidu.com/it/u=592408508,460438905&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1427" alt=""> <div>我的第一辆汽车</div> </div> </div> 完成之后如下图所示：

我的收获

过渡时机的把握：在状态改变前声明transition
Flex布局的灵活性：快速实现复杂布局
伪元素的强大：用::before

一天掌握CSS核心特性：我用这些实战项目彻底理解了布局与动画