本文通过一个示例介绍了CSS中行内元素、块元素和行内块元素的区别。行内元素不能设置宽高且不独占一行，块元素可以设置宽高但独占一行，而行内块元素则结合了两者特性，能设置宽高且不独占一行。通过修改`display`属性，可以改变元素的显示方式。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 行内元素的盒模型
行内元素不可以设置宽度并高度但不独占一行
块元素可以设置宽度与高度但是需要独占一行
行内块元素可以设置宽度与高度并不需要独占一行
*/
a{
width: 200px;
height: 200px;
background-color: blue;
/* display 设置元素显示的类型 块标签行内元素 */
/* display: inline; */
/* 块元素 */
/* display: block; */
/* none方式直接隐藏并取消原来的位置 */
/* display: none; */
/* 行内块元素 */
display: inline-block;
/* 将元素设置成为一个表格 */
/* display:table; */
/* 设置元素显示的形式 页面正常模式显示 */
/* visibility: visible; */
/* 将元素隐藏但是仍然保留本来的位置 */
/* visibility: hidden; */
}
</style>
</head>
<body>
<a href="https://www.baidu.com">超链接</a>
<a href="https://www.baidu.com">超链接</a>
</body>
</html>
扫一扫
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
