秒杀模块案例、基线对齐问题

mystoryx

已于 2022-03-05 14:27:03 修改

阅读量125

点赞数

文章标签：前端

于 2022-03-04 16:24:21 首次发布

本文链接：https://blog.csdn.net/mystoryx/article/details/123279352

版权

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

.fl {

float: left;

}

.fr {

float: right;

}

.clearfix::after {

content: "";

display: block;

clear: both;

}

.goods {

margin: 100px auto;

width: 800px;

/* 不固定高度，方便后续再增加商品列表高度可以自动向下撑开，因此自身需要清除子元素浮动的影响*/

/* height: 245px; */

}

.box {

/* float: left; */

/* a盒子浮动给宽高里面分上下盒子 */

padding: 20px;

width: 160px;

height: 205px;

text-decoration: none;

color: #333333;

}

.box .pic {

padding: 0 10px;

}

.pic img {

/* 如果图片宽高比例不合适，父元素高度会跟随变化，所以父元素还需设置高度，子元素图片再添加height: 100%;属性以此充满整个父元素*/

width: 100%;

}

.info h4 {

margin-top: 10px;

font-weight: 400;

font-size: 12px;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

a:hover {

/* 悬停样式涵盖整个a标签，里面部分内容提高权重选择单独再次设置样式覆盖 */

color: #c81623;

}

.info .price {

margin-top: 12px;

/* 里面小盒子浮动，给父元素设定高度，清除浮动影响 */

/* 或者不设置高度给父元素自己设置清除浮动影响属性 */

/* height: 24px; */

/* 行高撑开浮动盒子高度方便左右对齐父元素设置浮动子元素可以继承但最好给里面子元素单独设置需要的行高，避免基线对齐问题产生*/

/* line-height: 24px; */

font-size: 12px;

border: 1px solid #c81623;

}

.price .sale {

/* float: left; */

width: 50%;

font-weight: 700;

/* line-height: 24px; */

text-align: center;

color: #fff;

background-color: #c81623;

}

.sale em {

font-style: normal;

font-size: 16px;

/* 最好给里面子元素单独设置需要的行高，避免基线对齐问题产生 */

line-height: 24px;

/* 清除前面￥字符和后面数字的基线对齐导致行高错位增加父元素高度的现象 */

/* 因为继承行高line-height: 24px;一样，所以vertical-align: top;也一样能有对齐效果但vertical-align: middle;不能 */

/* 这些值使元素相对其父元素垂直对齐： */

/* middle使元素的中部与父元素的基线（字母x的下边缘(线)就是我们的基线。）加上父元素x-height的一半对齐，但并不是父元素垂直正中间位置。 */

/* middle指的是基线往上1/2 "x-height"高度。我们可以近似脑补成字母x交叉点那个位置。 */

/* ※※※有此可见，vertical-align: middle并不是绝对的垂直居中对齐，我们平常看到的middle效果只是一种近似的效果。 */

/* 下列值使元素相对整行垂直对齐：

top 使元素及其后代元素的顶部与整行的顶部对齐。

bottom 使元素及其后代元素的底部与整行的底部对齐。没有基线的元素，使用外边距的下边缘替代。 */

/* vertical-align: bottom; */

baseline对齐溢出父盒子下边框

middle对齐溢出父盒子下边框

top对齐未溢出边框

bottom对齐未溢出边框

父元素不设置行高，给em设置行高line-height: 24px;后，前面x基线对齐的效果

}

.price .off {

/* float: left; */

width: 50%;

/* line-height: 24px; */

text-align: center;

/* 最好给里面子元素单独设置需要的行高，避免基线对齐问题产生 */

line-height: 24px;

color: #666666;

text-decoration: line-through;

}

</style>

</head>

<body>

</div>

<h4>智利原箱进口车厘子JJ级 2.5kg礼盒装果径约28-30mm 新鲜水果礼盒</h4>

</div>

</a>

</div>

<h4>【法国名品

直降2800】【单绒/可选】头层牛皮短靴英伦风马丁靴女2020秋冬季新款双拉链百搭切尔西

黑色-加绒 37</h4>

</div>

</a>

</div>

<h4>花花公子羽绒服男2020秋冬季新款工装外套男韩版潮流修身帅气冬季保暖加厚冬装时尚休闲连帽羽绒服男

YR22卡其 L</h4>

</div>

</a>

</div>

<h4>【法国名品直降2800】已质检【单/绒可选】官方发售原装直邮