CSS自学笔记
目录
一、什么是元素显示模式
二、CSS的元素显示模式
1.块元素
2.行内元素
3.行内块元素
前言
网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。 HTML 元素一般分为块元素和行内元素两种类型。块级元素和行内元素都是元素显示模式，而本文讲的是这几种模式的区别以及使用规则。
一、什么是元素显示模式
元素显示模式就是元素（标签）以什么方式进行显示，比如自己占一行，比如一行可以放多个。HTML 元素一般分为块元素和行内元素两种类型。
二、CSS的元素显示模式
1.块元素
常见的块元素有：<h1>~<h6>，<p>，<div>，<ul>，<ol>，<li>等，其中div是最典型的块元素。
块级元素的特点：
① 比较霸道，自己独占一行。
② 高度，宽度、外边距以及内边距都可以控制。
③ 宽度默认是容器（父级宽度）的100%。
④ 是一个容器及盒子，里面可以放行内或者块级元素。
注意：1.文字类的元素内不能使用块元素。
2.标签主要用于存放文字，因此里面不能放块级元素，特别是不能放。
3.同理h1~h6等都是文字类块级标签，里面也不能放其他块级元素。
代码如下（错误示例）:
<body><div>比较霸道,自己独占一行</div> 瑟瑟发抖<p>独占一行</p><p><div>这里有问题</div></p></body>
网页显示效果：
此代码的21到23行中将div放在了文字类元素中，乍一看好像是没有什么问题的，但是我们在网页中查看代码便可以发现浏览器渲染的过程中div自动从p标签里跳出来了。
这里p标签生效，上下都有间隙，但是
在p里嵌套div之后这个p便不再生效
同理如果在p标签中嵌套p标签，或者在a标签中嵌套a标签，容易造成错误。
错误示例：
<body><a href="#">我是谁<a href="#">我是谁</a></a></body>
网页显示效果
嵌套在里面的a或者p均会跳出来。
2.行内元素
常见行内元素：<a><strong><b><em><del><i><s><ins><u><span>等，其中<span>是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点：
① 相邻行内元素在一行上，一行可以显示多个。
② 高、宽直接设置是无效的。
③ 默认宽度就是它本身内容的宽度。
④ 行内元素只能容纳文本或其他行内元素。
示例：
<!DOCTYPE html><html lang="en"><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>span {width: 100px;height: 100px;background-color: hotpink;}</style></head><body><span>我是行内元素span</span> <strong>我是行内元素strong</strong><span>我是行内元素span</span> <strong>我是行内元素strong</strong></body></html>
网页显示效果：
可以看出CSS中长宽设置对于行内元素是无效的。
3.行内块元素
在行行内元素中有几个特殊的标签，<img/><input/><td>它们同时具有块元素和行内元素的特点。 有些资料称它们为行内块元素。
行内块元素的特点：
① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
② 默认宽度就是它本身内容的宽度（行内元素特点）。
③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）。
示例：
<!DOCTYPE html><html lang="en"><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>input {width: 249px;height: 35px;}</style></head><body><input type="text"><input type="text"></body></html>
网页显示效果：
可以看出既可以在同一行显示，又可以设置长宽。
