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

本文主要是介绍前端开发--css--盒子类型：块元素行内元素行内块元素，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

<!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。下篇介绍。