CSS知识点总结之——display:inline-block

最新推荐文章于 2024-03-31 16:06:48 发布

tang_1227

最新推荐文章于 2024-03-31 16:06:48 发布

阅读量616

点赞数 1

分类专栏： css学习笔记

本文链接：https://blog.csdn.net/tang_1227/article/details/79160855

版权

css学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS知识点总结之——display:inline-block

如果我们想让两个div能够在一行显示，一般有下面两种方法：

1. 为两个div均添加display:line-block属性；

2. 将两个div都设成浮动的元素；

但是这两种方法在实现时是有一定差别的：

原始代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
	margin: 0;padding: 0;
}
.box{
	width: 300px;
	background-color: #ccc;	
}
.box1{
	width:100px;
	height: 50px;
	background-color: red;	
}
.box2{
	width:100px;
	height: 50px;
	background-color: orange;
}
</style>
</head>
<body>
	<div class="box">
		<div class="box1"></div>
		<div class="box2"></div>
	</div>
</body>
</html>

原始效果如下：

为两个div均添加display:line-block属性时，效果如下：

为父元素添加overflow：hidden，并且为两个div添加float：left后，效果如下：

很显然，为两个div均添加display:line-block属性时，div中间会出现间隙，而浮动则不会。

这是为什么呢？原因是 inline 和 inline-block 是内联布局，会受空白区域的影响。当你代码换行后，会在网页上

产生一个空格。解决方法一般有两种：

1. 取消掉换行符，如写成下面这样：aaa。

2. 给父元素设置font-size：0px；

因为第一种方法很不方便，所以一般情况下都使用font-size :0 px ;

给父元素加上font-size:0px; 后的效果就和浮动方法的效果一致了，此处就不在重复粘贴了。

那我们两个div的高度不一样时，对齐方式会有什么不同呢？

当我们把一个div的高度设置为150px时，对齐效果如下：

inline-block方法：

浮动方法：

我们发现两个div高度不同时，两种方法的对齐效果也不相同：

1. display:inlne-block属性修饰的元素没有脱离文档流，所以会采取底端对齐方式；

2. float属性修饰的元素脱离了普通文档流的限制，只用考虑向某个方向浮动，所以会顶端对齐；

在使用display:inlne-block属性时，我们可以通过一个叫做vertical-align的属性来控制两个元素的对齐方式：

为两个div分别添加：vertical-align:middle；

为两个div分别添加：vertical-align:top；

关于inline-block就总结到这里，希望能给大家带来帮助。

tang_1227

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS知识点总结之——display:inline-block

CSS知识点总结之——display:inline-block如果我们想让两个div能够在一行显示，一般有下面两种方法： 1. 为两个div均添加display:line-block属性； 2. 将两个div都设成浮动的元素；但是这两种方法在实现时是有一定差别的：原始代码如下：Document*
复制链接

扫一扫

专栏目录