CSS层叠样式表—CSS元素显示模式_css 显示层-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36893834/article/details/132003916

元素显示模式

学习目标

在这里插入图片描述

元素显示模式

了解元素显示模式的作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。

块元素

HTML 元素一般分为块元素和行内元素两种类型。常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

自己独占一行。
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
是一个容器及盒子，里面可以放行内或者块级元素。

注意：

文字类的元素内不能使用块级元素。
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>。
同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素。

行内元素

常见的行内元素有 <a>、<b>、<i>、<del>、<u>、<span>等，其中<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。

注意：

链接里面不能再放链接。
特殊情况链接<a>里面可以放块级元素，但是给 <a> 转换一下块级模式最安全。

行内块元素

在行内元素中有几个特殊的标签 —<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。

行内块元素的特点：

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

元素显示模式转换

display 属性规定元素应该生成的块的类型。这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。
inherit	规定应该从父元素继承 display 属性的值。
table-cell	此元素会作为一个表格单元格显示（类似`<td>` 和 `<th>`）
table	此元素会作为块级表格来显示（类似 `<table>`），表格前后带有换行符。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		div{
			display: inline;
		}
	</style>
</head>
<body>
	<div>
		我不能换行了
	</div>
	<div>
		我不能换行了
	</div>
</body>
</html>

课程总结

在这里插入图片描述