display属性

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

不豫

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

阅读量156

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_44912697/article/details/100836550

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

标题盒子类型：

块元素，内联元素，内联块元素

块元素:div\p\ul\li\h1~h6\dl\dt\dd
特点：
	支持全部的样式
	默认宽度为父级的宽度（100%）
	盒子始终占据一行(占据一行但是可以控制宽度)

内联元素(行内元素):a\span\em\b\strong
特点：
	支持部分样式（不支持宽高(内容决定)，margin上下，padding上下）
	盒子并在一行
	代码换行，盒子之间会产生距离
		解决方法：
				1.不换行
				2.父级font-size为0，子级重新设置
内联块(行内块)元素：可以用display属性转换
特点：
	支持全部样式
	默认内容决定宽高
	盒子并在一起
	代码换行，盒子之间会产生距离
		解决方法：
				1.不换行
				2.父级font-size为0，子级重新设置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			margin:0;
		}
		
		.box1{
			height: 300px;
			width: 500px;
			background-color: gold;
			border: 1px solid #000;
			margin: 100px auto;
			font-size: 0px;

			display: inline-block;
		}
		.box1 a{
			width: 80px;
			height: 40px;
			margin: 40px ;
			background-color: black;
			padding: 0px 1px;
			font-size: 16px;

			display: inline-block;
			/*bolck 块元素  inline 内联元素  none元素隐藏(当鼠标放在上面时显示，应用伪元素)*/

		}

		.con{
			width: 200px;
		}
		
		 .box2{
			width: 200px;
			height: 200px;
			background-color: green;
			display: none;
			font-size: 16px;
		}
		.con:hover .box2{
			display: block;
		}

	</style>
</head>
<body>
	
	块元素:
	<!-- <div class="box1">hsaiha</div> -->

	内联元素(行内元素):
<!-- 	<div class="box1">
		<a href="#">hhhhhh</a>
		<a href="#">wwwwww</a>
		<a href="#">hhhhhh</a>
		<a href="#">wwwwww</a>
		<a href="#">hhhhhh</a>
		<a href="#">wwwwww</a>
	</div>	
 -->
	内联块(行内块)元素：
	<div class="box1">
		<a href="#">hhhhhh</a>
		<a href="#">wwwwww</a>
		<a href="#">hhhhhh</a>
		<a href="#">wwwwww</a>
		<a href="#">hhhhhh</a>
		<a href="#">wwwwww</a>
	</div>	
	<div class="box1"></div>

	<div class="con">
		<h3>彩蛋</h3>
		<div class="box2">文字说明</div>
	</div>



</body>
</html>

display实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 700px;
			height: 50px;
			border: 1px solid gold;
			font-size: 0px;
			margin:100px auto;
		}
		.box p{
			width: 100px;
			height: 50px;
			font-size: 16px ;
			font-family: 'Microsoft Yahei';
			color: pink;
			display: inline-block;
			border: 1px solid gold;
			margin: -1px;
			text-align: center;
			line-height: 50px;

		}

	</style>
</head>
<body>

<div class="box">
	<p>首页</p>
	<p>公司简介</p>
	<p>解决方案</p>
	<p>公司新闻</p>
	<p>行业动态</p>
	<p>招贤纳才</p>
	<p>联系我们</p>
</div>
	
</body>
</html>

用列表实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.menu{
			width: 694px;
			height: 50px;
			/*background-color: cyan;*/
			/*去除小圆点*/
			list-style: none;
			margin: 20px auto 0px;
			padding: 0px;
		}

		.menu li{
			
			width: 98px;
			height: 48px;
			border:1px solid gold;
			background-color: #fff;

			float: left;
			margin-left: -1px;
		}
		/*响应区域变为整个框架内，而不是字上*/
		.menu li a{
			display: block;
			line-height: 48px;
			text-align: center;
			width: 98px;
			height: 48px;
			text-decoration: none;
			font-size: 16px;
			font-family: 'Microsoft Yahei';
			color: pink;

		}
		/*鼠标放在上面产生的变化*/
		.menu li a:hover{
			background-color: gold;
			color: #fff;
		
		}
	</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>

在这里插入图片描述

不豫

关注

1
点赞
踩
1

收藏

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

标题盒子类型：块元素，内联元素，内联块元素块元素:div\p\ul\li\h1~h6\dl\dt\dd特点：支持全部的样式默认宽度为父级的宽度（100%）盒子始终占据一行(占据一行但是可以控制宽度)内联元素(行内元素):a\span\em\b\strong特点：支持部分样式（不支持宽高(内容决定)，margin上下，padding上下）盒子并在一行代码换行，盒子...
复制链接

扫一扫