css标签的显示模式

最新推荐文章于 2024-03-06 20:28:35 发布

AiRuiJ

最新推荐文章于 2024-03-06 20:28:35 发布

阅读量169

点赞数 1

本文链接：https://blog.csdn.net/weixin_39897653/article/details/104608368

版权

标签的显示模式（display）

块级元素（block）

	常见的块元素<h1-h6>,<p>,<div>,<ul>,<ol>等，最典型的就是div
	
    特点：
	1）总是从新行开始
	2）高度，行高，外边距以及内边距都可以控制
	3）默认宽度是容器100%

行内元素（inline）

 常见的行内元素<a>,<span>,<strong>,<em>等，最典型的就是<span>

特点：
1）高度，宽度设置不会显示效果
2）默认的宽度就是本身内容的宽度
3）和相邻行内元素在一行上
4）行内元素只能容纳文本或其他行内元素

行内块元素（inline-block）

 在行内元素中有几个特殊的标签<img />,<input />,<td>,可以设置宽度和高度等属性

特点：
1）高度，宽度，外边距以及内边距都可以控制
2）默认的宽度就是本身内容的宽度
3）和相邻行内元素在一行上，但是之间有空白间隔

标签显示模式转换 display

块转行内：display:inline;
行内转块：display:block;
块，行内元素转化为行内块：display:inline-block;

显示效果小练习

三个div 100 *100 红色
三个span 150 *150 绿色
三个a 80 *20 蓝色必须一行显示
鼠标经过a链接的时候，背景色为橙色

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>练习</title>
	<style>
	div{
		background-color: red;
		width: 100px;
		height: 100px;
	}

	span{
		background-color: green;
		width: 150px;
		height: 150px;
		display: block;
	}

	a{
		background-color: blue; 
		color:black;
		width: 80px;
		height: 20px;
		display: inline-block;
	}
	a:hover{
		background-color: orange;
	}
	</style>
</head>
<body>
	<div>红色</div>
	<div>红色</div>
	<div>红色</div>

	<span>绿色</span>
	<span>绿色</span>
	<span>绿色</span>

	<a href="#">蓝色</a>
	<a href="#">蓝色</a>
	<a href="#">蓝色</a>
</body>
</html>

AiRuiJ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css标签的显示模式

标签的显示模式（display）块级元素（block）常见的块元素<h1-h6>,<p>,<div>,<ul>,<ol>等，最典型的就是div 特点： 1）总是从新行开始 2）高度，行高，外边距以及内边距都可以控制 3）默认宽度是容器100%行内元素（inline）常见的行内元素<a>,...
复制链接

扫一扫