CSS---块元素，内联元素,内联块元素理解

最新推荐文章于 2024-02-19 22:40:48 发布

Go· again

最新推荐文章于 2024-02-19 22:40:48 发布

阅读量154

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_43766304/article/details/104738436

版权

web 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

写给自己：在代码中学习

块元素

块元素也可以称之为行元素
常用标签：div p ul li h1-h6 dl dt dd
1.支持全部样式
2.如果没有设置元素，默认的宽度为父级宽度的100%
3.盒子占据一行，即使设置了宽度(块元素特点)
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>块元素</title>
	<style type="text/css">
		/* body常设置 */
		body{
			margin: 0;
		}
		
		.box{
			background-color: #00FFFF;
			width: 300px;
			height: 200px;
		}
		.box2{
			background-color: chartreuse;
			width: 300px;
			height: 200px;
		}
	</style>
</head>
<body>
	<!-- 块元素也可以称之为行元素
	常用标签：div p ul li h1-h6 dl dt dd 
	支持全部样式
	如果没有设置元素，默认的宽度为父级宽度的100%
	盒子占据一行，即使设置了宽度(块元素特点) -->
	<div class="box">div元素</div>
	<p class="box2">块元素上下排列，没有左右排列</p>
	
</body>
</html>

内联元素

内联元素也称为行内元素
常用标签：a span em b strong i
1.支持部分样式（不支持宽高，margin上下，padding上下）
2.宽高由内容决定
3.盒子并在一行
4.代码换行，盒子之间产生间距（代码中有解决办法）
5.子元素是内联元素，父元素可以用text-algin属性设置子元素的水平对齐方式
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>内联元素---行内元素</title>
	<style type="text/css">
		.box{
			width: 500px;
			height: 300px;
			border: 1px solid #00FFFF;
			margin: 50px auto 0;
		}
		.box a{
			background-color: crimson;
			/* 行内元素不支持宽高
			width: 300px;
			height:300px; */
			/* margin上下不支持， */
			/* margin: 0px 20px ; */
			/* padding上下不支持，仅仅是背景色被渲染*/
			padding: 0px 20px;
		}
		.box2{
			width: 500px;
			height: 300px;
			margin: 50px auto 0;
			border: 1px solid gold;
			/* 子元素是内联元素 ，父元素可以用text-algin属性设置子元素的水平对齐方式 */
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="box">
		<a href="#">连接文字1</a>
		<a href="#">连接文字2</a>
		<a href="#">连接文字3</a>
		<a href="#">连接文字4</a>
		
		<p>内联元素之间产生间隙：<br>
		解决办法：<br>
		1.去掉内联元素之间的换行，也就是说代码a标签写在一行.<br>
		2.将内联元素的父级设置font-size为0，内联元素自身再设置font-size。文字默认为font-size="16px"
		
		
		
		</p>
	</div>
	
	<div class="box2">
		<a href="#">连接文字1</a>
	</div>
	
</body>
</html>

内联块元素

1.支持全部样式
2.宽高由内容决定
3.盒子并在一行
4.代码换行，盒子之间产生间距
5.子元素是内联元素，父元素可以用text-algin属性设置子元素的水平对齐方式

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>内联元素---行内元素</title>
	<style type="text/css">
		.box{
			width: 500px;
			height: 300px;
			border: 1px solid #00FFFF;
			margin: 50px auto 0;
			font-size: 0;
		}
		.box a{
			background-color: crimson;
			
			width: 100px;
			height:50px;
			padding: 0px 20px;
			/* 行内元素转化为内联块元素 */
			display: inline-block;
			font-size: 16px;
			margin: 20px;
			padding: 10px;
		}
		
	</style>
</head>
<body>
	<div class="box">
		<a href="#">连接文字1</a>
		<a href="#">连接文字2</a>
		<a href="#">连接文字3</a>
		<a href="#">连接文字4</a>
		</p>
	</div>
	
	
	
</body>
</html>

这三种元素可以通过display元素进行转换，不过在实际开发当中，块元素用的比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了

display属性
display属性是用来设置元素的类型及隐藏的
常用值
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）

display属性：元素转换示例代码

写给自己：这里有使用一个伪类，实现鼠标悬停效果，可以应用到实际的项目中

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS--display元素属性---元素类型转换</title>
	<style type="text/css">
		body{
			margin: 0;
			font-size: 0;  /* 解决内联块间距问题*/
		}
		.box{
			width: 200px;
			height: 200px;
			background-color: crimson;
			font-size: 16px;       /* 解决内联块间隙问题*/
			margin: 20px;
		
		}
		.box1{
			width: 200px;
			height: 200px;
			background-color: crimson;
			display: inline;  /* 转换成内联元素，不支持宽高 */ 
			font-size: 16px;       /* 解决内联块间隙问题*/
			margin: 20px;
		
		}
		
		.box2{
			width: 200px;
			height: 200px;
			background-color: crimson;
			display: inline-block;   /* 转换成内联块 */
			font-size: 16px;       /* 解决内联块间隙问题*/
			margin: 20px;
		
		}
		
		.con{
			width: 200px;
			
		}
		.con h2{
			font-size: 30px;
		}
		.box3{
			width: 200px;
			height: 200px;
			background-color: gold;
			font-size: 16px;
			display: none;
		}
		.con:hover .box3{  /* 在con下面的.box*/
			display: block;        /* 样式覆盖：设置伪类，将上面的.box样式display:none覆盖掉*/
		}
	</style>
	</head>
<body>
	<div class="box">原始图形</div>
	<div class="box">原始图形</div>
	<br>
	<hr >
	<br>
	<div class="box1">测试  display：inline</div>
	<div class="box1">测试  display：inline</div>
	<br>
	<hr >
	<br>
	<div class="box2">测试  display：inline-block</div>
	<div class="box2">测试  display：inline-block</div>
	<br>
	<hr >
	<br>
	<div class="con">
		<h2>悬停文字标题</h2>
		<div class="box3">测试 display:none</div>
		
	</div>
	
</body>
</html>

Go· again

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS---块元素，内联元素,内联块元素理解

写给自己：在代码中学习块元素块元素也可以称之为行元素常用标签：div p ul li h1-h6 dl dt dd1.支持全部样式2.如果没有设置元素，默认的宽度为父级宽度的100%3.盒子占据一行，即使设置了宽度(块元素特点)<!DOCTYPE html><html lang="zh"><head> <meta charset="U...
复制链接

扫一扫

专栏目录