CSS注释
CSS规则是使用 /* 需要注释的内容 / 进行注释的，即在需要注释的内容前使用 “/” 标记开始注释，在内容的结尾使用 “*/”结束。
例如：
p {
font-size: 14px; /* 所有的字体是14像素大小*/
}
标签显示模式（display）
标签的类型(显示模式)
HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：
块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
常见的块元素有：
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素(inline-level)
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊）
注意：
- 只有 文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
- 链接里面不能再放链接。
块级元素和行内元素区别
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。
行内块元素（inline-block）
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
标签显示模式转换 display
块转行内： display:inline;
行内转块： display:block;
块、行内元素转换为行内块： display: inline-block;
CSS书写规范
空格规范
【强制】 选择器 与 { 之间必须包含空格。
示例： .selector { }
【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。
示例：font-size: 12px;
选择器规范
【强制】 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。
示例：
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}
【建议】 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
示例：
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}
属性规范
【强制】 属性定义必须另起一行。
示例：
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
【强制】 属性定义后必须以分号结尾。
示例：
/* good */
.selector {
margin: 0;
}
/* bad */
.selector {
margin: 0
}
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示模式</title>
<style>
div,
span{
width:100px;
height:100px;
background-color:pink;
/* 设置透明度 */
background-color:rgba(0,0,0,0.2);
/* 外边距 */
margin:50px;
/* 内边距 */
padding:50px;
}
</style>
</head>
<body>
<!-- 占整行：hn标签，p，div，ul，li，ol，dl，dt，dd，table等等 -->
<!-- 同行显示多个：a，font，span，b，strong，del，em，i，ins，input，img等等 -->
<!-- 块级元素：占整行，宽高生效，内外边距都生效，宽默认100%；
行内元素：同行显示，宽高不生效，内外边距左右生效，上下不生效，里面只能包含行内元素，宽高以内容撑开，a标签除外；
行内块级元素：input，img
同行显示，宽高生效，会有默认的间隙，外边距以及内边距都可以控制。
！文字类块级元素里面不能放块级元素，例如：p，h1-h6；a链接不能再嵌套a链接！
-->
<!-- 元素的转换：
①块转行：display:inline;
②转化为行内块级元素：display:inline-block;
③行转块：display:block;
④元素隐藏：display:none;
⑤元素隐藏后显示元素：display:block. -->
<div>
胭脂碎
<h1>云如墨，夜凉清透竹曳影疏坠</h1>
<del>西风起，潇潇暮雨洗雾铅华退</del>
</div>
<div>
更阑烛，映寒窗，薄烟淡洒遮月寐
</div>
<div>
空思量,落塌半醒发缠袂
</div>
<span>轻尘纤,絮漫天,浮华幻灭旧景非</span> <br>
<span>
枉如梦,孤鸿声凄萧瑟回
</span>
</body>
</html>