这篇文章主要记录了如下内容：
1.html中3种常见的显示模式及其转换
2.css书写的三种方式
一、三种显示模式及其转换
１．三种显示模式
- 块级显示模式：设置宽高起作用，独占一行，在没有设置固定的宽度时，和其父元素一样宽，对应的元素为块元素,常见的块元素有：<div></div>标签、<h1-h6></h1-h6>标签、<p></p>标签、<hr></hr>标签、<ul></ul>标签、<ol></ol>标签、<dl></dl>标签、<dt></dt>标签、<dd></dd>标签、<form></form>标签、<body></body>标签、<html></html>标签
- 行内（内联）显示模式：设置宽高不起作用，一行可以有多个，沿着文本的基线对齐，宽高是被内容的大小撑开的，不能直接通过text-align居中；如果需要居中，需要在外边套上<div></div>标签,给<div></div>设置居中，对应的元素为行内（内联）元素，常见的行内元素有：<span></span>标签、<a></a>标签、<b></b>标签、<strong></strong>标签、<i></i>标签、<em></em>标签、<u></u>标签、<ins></ins>标签、<s></s>标签、<del></del>标签
- 行内块显示模式：设置宽高起作用，一行可以有多个，沿着文本的基线对齐，不能直接通过text-align居中；如果需要居中，需要在外边套上<div></div>标签,给<div></div>设置居中，对应的元素为行内块元素，常见的行内块元素有：<img></img>标签、表单中的标签
２．三种显示模式的转换
- 其他显示模式转换为行内块显示模式,在css样式中设置如下：display:inline-block;
- 其他显示模式转换为块级显示模式，在css样式中设置如下：display:block;
三、 css书写的三种方式
- 行内式：直接在对应的标签中进行书写，书写非常方便，html和css代码掺杂在一起，耦合度极高，维护代码非常麻烦，在工作中基本不用
<div style="width: 100px;height: 100px;background: red;">盒子</div>
- 内嵌式：写在html文件的<head></head>标签中，书写相对简单，html和css代码相对分离，耦合度较低，维护代码较方便，在工作中偶尔使用
<style type="text/css">
h1{
color:red;
}
</style>
- 外链式：直接书写在新的css文件中，在<head></head>标签中使用<link>标签进行调用，不用写<style></style>标签,书写相对麻烦，html和css代码绝对分离，耦合度极低，维护代码方便，在工作中经常使用。
<link rel="stylesheet" type="text/css" href="one.css"/>
如有错误，欢迎斧正；如有疑问，欢迎留言讨论。