前端开发--css--盒子类型：块元素行内元素行内块元素

最新推荐文章于 2024-07-19 10:49:05 发布

小哦--

最新推荐文章于 2024-07-19 10:49:05 发布

阅读量710

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html +css +javascript

本文链接：https://blog.youkuaiyun.com/sundanping_123/article/details/94630913

html +css +javascript 专栏收录该内容

43 篇文章

订阅专栏

本文探讨前端CSS中的三种盒子类型：块元素、行内元素和行内块元素。块元素支持设置宽高，而内联元素则不支持。内联块元素结合了两者特性，支持宽高且不单独成行。示例中展示了如何使用行内块元素和浮动属性制作菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
块元素：

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>块元素</title>
	<style type="text/css">

		.box1{
			background-color: gold;
		}

		.box2{
			background-color: green;
		}

	</style>
</head>
<body>
	<div class='box1 clearfix'>这是div标签</div>
	<p class='box2'>这是p标签</p>
</body>
</html>

在这里插入图片描述
内联元素：

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>块元素</title>
	<style type="text/css">

		.box1{
			width: 200px;
			height: 200px;
			border:1px solid black;
			margin: 50px auto 0;
		}

		.box1 a{
			background-color: gold;
		}

	</style>
</head>
<body>
	<div class='box1'>
		<a href="#">链接文字一</a>
		<a href="#">链接文字二</a>
		<a href="#">链接文字三</a>
		<a href="#">链接文字四</a>
		<a href="#">链接文字五</a>
	</div>
	
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>块元素</title>
	<style type="text/css">
		
		.box{
			width:694px;
			height: 50px;
			margin: 50px auto 0;
			font-size: 0;
		}

		.box a{
			font-size: 16px;
			color: pink;
			width: 98px;
			height: 48px;
			background-color: white;
			display: inline-block;
			border: 1px solid gold;
			margin-left: -1px;
			text-align: center;
			text-decoration: none;
			line-height: 48px;
		}

		.box a:hover{
			background-color: gold;
			color: white;
		}

	</style>
</head>
<body>
	<div class='box'>
		<a href="#">首页</a>
		<a href="#">公司简介</a>
		<a href="#">解决方案</a>
		<a href="#">公司新闻</a>
		<a href="#">行业动态</a>
		<a href="#">招贤纳士</a>
		<a href="#">联系我们</a>
	</div>
	
</body>
</html>

在这里插入图片描述
总的来说：
inline 内联元素不支持宽高，即使设置了，也不起作用。
block 块元素支持宽高。
下图是inline。

inline-block 内联块元素支持宽高。不单独成行，之间有间隙。
block 块元素，单独成行。
在这里插入图片描述

上面我们利用行内块元素制作了菜单，下面我们尝试一下利用列表制作菜单。

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>块元素</title>
	<style type="text/css">
		
		.menu{
			width: 694px;
			height: 50px;
			/*background-color: green;*/
			margin: 50px auto 0;
			list-style: none;
			padding: 0;

		}

		.menu li{
			width: 98px;
			height: 48px;
			border: 1px solid gold;
			background-color: white;
			/*display: inline-block;*/
			float: left;
			margin-left: -1px;
		}

		.menu li a{
			/*background-color: pink;*/
			display: block;
			width: 98px;
			height: 48px;
			text-align: center;
			line-height: 48px;
			text-decoration: none;
			font-size: 16px;
			font-family: '微软雅黑';
			color: pink;
		}

		.menu li a:hover{
			background-color: gold;
			color: white;
		}

	</style>
</head>
<body>

	<ul class="menu">
		<li><a href="">公司简介</a></li>
		<li><a href="">公司简介</a></li>
		<li><a href="">公司简介</a></li>
		<li><a href="">公司简介</a></li>
		<li><a href="">公司简介</a></li>
		<li><a href="">公司简介</a></li>
		<li><a href="">公司简介</a></li>
	</ul>
	
</body>
</html>

在这里插入图片描述
这里用到了浮动float。下篇介绍。