css-display属性辨析

最新推荐文章于 2024-04-28 14:26:53 发布

efine_dxq

最新推荐文章于 2024-04-28 14:26:53 发布

阅读量431

点赞数

分类专栏： java web 文章标签： css display属性

本文链接：https://blog.csdn.net/efine_dxq/article/details/54487549

版权

java web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

经常看到这样的属性，block、inline也用的比较多，但是什么让它们产生的差异，并没有深究过，inline-block不太明白怎么回事，今天做一个小结。

block、inline就不多说，一个块儿级，一个行级，inline-block则是对外表现是行级，包含的元素则表现块儿级属性。具体看下边解释以及样例。

1、display:block

块儿级对象，默认宽度是100%，如果没有采用‘float:left|right’样式，相邻的两块儿对象就会分排在不同的两行上。

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>display</title> 
<style>
li{display:block;
    height:50px;
	border:2px solid #4cAf50}
</style>
</head>
<body>
<ul>
<li><a href="/html/" target="_blank">HTML</a></li>
<li><a href="/css/" target="_blank">CSS</a></li>
<li><a href="/js/" target="_blank">JavaScript</a></li>
<li><a href="/xml/" target="_blank">XML</a></li>
</ul>
</body>
</html>

结果：

2、display:inline

内联对象的宽度取决于其内部元素的宽度与padding样式之和。不可直接指定其宽度与高度（示例代码中可以看出来即使设置了，也没有用）。相邻的两个内联对象会排在同一行上。
例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>display</title> 
<style>
li{display:inline;
    height:50px;
	border:2px solid #4cAf50}
</style>
</head>
<body>
<ul>
<li><a href="/html/" target="_blank">HTML</a></li>
<li><a href="/css/" target="_blank">CSS</a></li>
<li><a href="/js/" target="_blank">JavaScript</a></li>
<li><a href="/xml/" target="_blank">XML</a></li>
</ul>
</body>
</html>

结果：

3、inline-block

应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>display</title> 
<style>
li{display:inline-block;
    height:50px;
	border:2px solid #4cAf50}
</style>
</head>
<body>
<ul>
<li><a href="/html/" target="_blank">HTML</a></li>
<li><a href="/css/" target="_blank">CSS</a></li>
<li><a href="/js/" target="_blank">JavaScript</a></li>
<li><a href="/xml/" target="_blank">XML</a></li>
</ul>
</body>
</html>

结果：

(div 块儿对象；span 内联对象)

efine_dxq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-display属性辨析

经常看到这样的属性，block、inline也用的比较多，但是什么让它们产生的差异，并没有深究过，inline-block不太明白怎么回事，今天做一个小结。block、inline就不多说，一个块儿级，一个行级，inline-block则是对外表现是行级，包含的元素则表现块儿级属性。具体看下边解释以及样例。1、display:block 块儿级对象，默认宽度是100%，如
复制链接

扫一扫

专栏目录