【温故知新】CSS学习笔记（显示模式简介）

显示模式Display

我们的网页标签有很多，在不同的地方会用到不同类型的标签，以便于更好的展示我们的网页。标签的类型即显示模式，一般可以分为块标签和行内标签两种类型，也可以称之为块元素和行内元素。

一、块级元素（Block-Level）

每个块元素通常会独自占据一整行或者多个整行，可以对其设置其宽度、高度、对其等属性，常用于网页布局和网页结构的搭建，用一个词形容它，就是“霸道”。

常见的块元素有<h1>~<h6>、<div>、<P>、<ul>、<ol>、<li>等，其中<div>标签是最最典型的块元素。因为Div天生丽质，特别适合布局，所以我们常称之为“CSS+DIV”布局。

总结一下块级元素的特点：

总是从新的一行开始；
高度、行高、外边距以及内边距都可以控制；
宽度默认是容器的100%（和屏幕一样宽）；
可以容纳内联元素和其他块元素；

二、行内元素（Inline-Level）

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有<a>、<strong>、<br>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最最典型的应用。

总结一下行内元素的特点：

和相邻行业元素可以在一行上面；
高度和宽度无效，但水平方向的padding和margin可以设置，垂直方向的无效；
默认宽度就是它本身内容的宽度；
行内元素只能容纳文本或者其他行内元素（其中<a>比较特殊）；

【注意点】

只有文字才能组成段落，因此P标签里面不能放块级元素，同理的还有这些标签H1~H6和DT等，它们都是文字类型的块级元素，里面不能容纳其他块级元素；
链接里面不能再放链接；

三、行内块元素（Inline-Block）

在行内元素中有几个特殊的标签（<img />、<input />、<td>），可以对他们设置宽高和对齐属性，我们就可以称之为行内块元素。

行内块元素有如下特点：

和相邻行内元素（行内块元素）在一行上，但是之间会有一点空白的缝隙；
默认宽度就是它本身的内容宽度；
高度、行高、外边距以及内边距都可以控制；

【综合样例】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>显示模式</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: yellow;
		}
		span{
			width: 100px;
			height: 100px;
			background-color: pink;
		}
		input{
			width: 200px;
			height: 50px;	
		}
	</style>
</head>
<body>
	<div>Div</div>
	<div>DivDiv</div>
	<div>DivDivDiv</div>

	<span>Span</span>
	<span>SpanSpan</span>
	<span>SpanSpanSpan</span> 

	<input type="text">
	<input type="text">
	<input type="text">
</body>
</html>

【显示效果】

四、标签显示模式的相互转换

块级元素转行内元素： display:inline
行内元素转块级元素：display:block
块级、行内元素转行内块元素：display:inline-block

【综合样例】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模式转换</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: yellow;
			display: inline; /*块级元素转行内元素*/
		}
		span{
			width: 100px;
			height: 100px;
			background-color: pink;
			display: block; /*行内元素转块级元素*/
		}
		a{
			width: 100px;
			height: 100px;
			background-color: skyblue;
			display: inline-block; /*块级、行内元素转行内块元素*/
		}
	</style>	
</head>
<body>
	<div>Div</div>
	<div>DivDiv</div>
	<div>DivDivDiv</div>

	<span>Span</span>
	<span>SpanSpan</span>
	<span>SpanSpanSpan</span> 

    <a href="#">链接</a>
    <a href="#">链接</a>
    <a href="#">链接</a>
</body>
</html>

【显示效果】

【温故知新】CSS学习笔记（显示模式简介）

显示模式Display

猜你喜欢