css-display的使用

最新推荐文章于 2024-04-17 16:17:26 发布

ll_j_21

最新推荐文章于 2024-04-17 16:17:26 发布

阅读量199

点赞数

分类专栏：前端开发、java web、数据库

本文链接：https://blog.csdn.net/ll_j_21/article/details/102774053

版权

前端开发、java web、数据库专栏收录该内容

71 篇文章 0 订阅

订阅专栏

css中的display是用来控制标签是否显示的决定标签属性（行内标签还是块标签，是显示还是隐藏）
visibiliy：hidden 隐藏占位置
display:none 隐藏div 并不是删除不占位置
display :block 显示div 所有的块标签默认
display：inline-block 具有快标签的特性，同时也有行内标签不会占一行定多大占多大
display：inline 所有的行内标签默认是inline 行内标签不设置大小内容是多少显示多少

案例：display :block 显示div 所有的块标签默认

<!DOCTYPE html>
<html>
<head>
	<title>display</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./css/display.css">
</head>
<body>
     <p class="btn">
     	<a href="#">百度</a>
     	<a href="#">百度</a>
     	<a href="#">百度</a>
     	<a href="#">百度</a>
     	<a href="#">百度</a>
     </p>
</body>
</html>

.btn{
	width: 620px;
	height: 50px;
	border: 1px solid red;
	margin: auto;
}

.btn>a{
	width: 120px;
	height: 50px;
	background-color: #FF00FF;
	color: white;
	text-decoration: none;
	font-size: 20px;
	text-align: center;
	line-height: 50px;
	display: block;
	margin: 2px;
	float: left;
}

在这里插入图片描述
案例：display：inline-block 具有快标签的特性，同时也有行内标签不会占一行定多大占多大

<!DOCTYPE html>
<html>
<head>
	<title>display</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./css/display.css">
</head>
<body>
     <p class="btn">
     	<a href="#">百度</a>
     	<a href="#">百度</a>
     	<a href="#">百度</a>
     	<a href="#">百度</a>
     	<a href="#">百度</a>
     </p>
</body>
</html>

.btn>a{
	width: 120px;
	height: 50px;
	background-color: #FF00FF;
	color: white;
	text-decoration: none;
	font-size: 20px;
	text-align: center;
	line-height: 50px;
	display: inline-block;
	margin: 2px;
	float: left;
}

在这里插入图片描述