随笔分类 - 样式与效果-基础

vertical-align

摘要：###问题：图片和文字同行时，为图片设置了verticle-align: middle，但图片和文字看上去并不居中对齐的原因以下均为自己实验后的猜测和理解 ####一、vertical-align 为图片设置vertical-align的概念是，让图片的哪里和谁对齐。其中图片可取上边缘、下边缘、中阅读全文

posted @ 2022-04-17 16:06 JO-BAE 阅读(118) 评论(0) 推荐(0) 编辑

ul-li的分割线

摘要：1. 利用position和border 优点：（1）比起直接为盒子设置 border，这种不用考虑 padding；（2）手动控制高度更灵活，有时候可能会需要分割线高度 < 内容高度点击查看代码 ul li { position: relative; height: 50px; } ul l 阅读全文

posted @ 2022-03-18 16:23 JO-BAE 阅读(638) 评论(0) 推荐(0) 编辑

图片倒影

摘要：HTML <div class="box"> <img src="img/pic.png" alt="140x150"> </div> CSS .box { position: relative; } /* 设置镜像，作倒影 */ .box::after { content: url(img/pic 阅读全文

posted @ 2022-03-11 14:08 JO-BAE 阅读(19) 评论(0) 推荐(0) 编辑