包裹特性

什么是包裹性?

包裹性就是父元素的宽度会收缩到和内部元素宽度一样。

  • 拥有包裹性的元素:
  • float浮动的元素
  • position为absolute或fixed的元素
  • display为inline-block, table-cell, table-caption, flex, inline-flex的元素

示例1:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
background-color: red;
}
</style>
</head>
<body>
<div>
<img src="https://www.7i5.com/wp-content/uploads/2020/02/1d5335a5e03bf4.jpg">
</div>
</body>
</html>


示例2:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
background-color: red;
float: left;
}
</style>
</head>
<body>
<div>
<img src="https://www.7i5.com/wp-content/uploads/2020/02/1d5335a5e03bf4.jpg">
</div>
</body>
</html>


img下方出现多余空白(底部红色区域)的原因就在于其为行内块元素(inline-block),行内块级元素的特点:和相邻的行内元素(行内块)在一行上,但是中间会有空白的间隙默认的宽度就是本身内容的宽度
高度,行高,内边距和外边距都可以设置

而行内块元素的vertical-align属性的默认值是baseline(默认基于基线对齐)。
所以,解决此种问题的办法有以下几种:
方法1:

img {
    display: block;
}

把img变成块状元素


方法2:

img {
    vertical-align: bottom;
}

既然分析到img的vertical-align默认属性导致出现留白问题,所以直接修改vertical-align属性值就行。

vertical-align:bottom ; 垂直对齐设置为底部对齐,可以理解为行级元素转化为块级元素 。


方法3:

img {
    margin-bottom: -4px;
}

把img元素的底部外边距改成负值,同样可以实现去留白的效果。
这里修改的值的大小,会影响整个页面的布局。


推荐使用去掉基准线:设置底部对齐:vertical-align:bottom

CSS笔记

浮动

2020-2-5 11:01:48

CSS笔记

清除(clear)浮动效果

2020-2-5 19:55:47

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索