css标签的显示模式

标签的显示模式（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

发布了5 篇原创文章 · 获赞 5 · 访问量 100

私信关注

css标签的显示模式

标签的显示模式（display）

猜你喜欢