一、emmet语法
1、简介
Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。
快速生成HTML结构语法
快速生成CSS样式语法
2、快速生成HTML结构语法
- 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 <div></div>
- 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
- 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
- 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
- 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
- 如果生成的div 类名是有顺序的， 可以用 自增符号 $
- 如果想要在生成的标签内部写内容可以用 { } 表示
3、快速生成CSS样式语法
CSS 基本采取简写形式即可
比如 w200 按tab 可以 生成 width: 200px;
比如 lh26px 按tab 可以生成 line-height: 26px;
4、快速格式化代码
Vscode 快速格式化代码: shift+alt+f
也可以设置 当我们 保存页面的时候自动格式化代码:
1）文件 ------.>【首选项】---------->【设置】；
2）搜索emmet.include;
3）在settings.json下的【工作区设置】中添加以下语句：
"editor.formatOnType": true,
"editor.formatOnSave": true
二、css的显示模式
1、什么是元素的显示模式
定义：
元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。
作用：
网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
2、元素显示模式的分类
2.1、块元素
常见的块元素：
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
<div> 标签是最典型的块元素。
块级元素的特点：
- 自己独占一行。
- 高度，宽度、外边距以及内边距都可以控制。
- 宽度默认是容器（父级宽度）的100%。
- 是一个容器及盒子，里面可以放行内或者块级元素。
注意：
文字类的元素内不能放块级元素
<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
2.2、行内元素
常见的行内元素：
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点：
相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。
注意：
链接里面不能再放链接
特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全
2.3、行内块元素
常见的行内块标签：
<img />、<input />、<td>
它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点：
- 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。
- 一行可以显示多个（行内元素特点）。
- 默认宽度就是它本身内容的宽度（行内元素特点）。
- 高度，行高、外边距以及内边距都可以控制（块级元素特点）。
3、元素显示模式的转换
简单理解:
一个模式的元素需要另外一种模式的特性
比如想要增加链接 <a> 的触发范围。
转换方式
- 转换为块元素：display:block;
- 转换为行内元素：display:inline;
- 转换为行内块：display: inline-block;
三、css三大特性
1、层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则:
- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突，不会层叠
2、继承性
CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。
子元素可以继承父元素的样式：
（text-，font-，line-这些元素开头的可以继承，以及color属性）
3、优先级
当同一个元素指定多个选择器，就会有优先级的产生。
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
选择器优先级计算表格：
二、盒子模型
1、网页布局的本质
网页布局的核心本质： 就是利用 CSS 摆盒子。
网页布局过程：
- 先准备好相关的网页元素，网页元素基本都是盒子 Box 。
- 利用 CSS 设置好盒子样式，然后摆放到相应位置。
- 往盒子里面装内容
2、盒子模型（Box Model）组成
盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：**边框**、**外边距**、**内边距**、和 **实际内容**
3、边框（border）
3.1、边框的使用
1、border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式 边框颜色；
2、语法：
border : border-width || border-style || border-color;
边框样式 border-style 可以设置如下值：
- none：没有边框即忽略所有边框的宽度（默认值）
- solid：边框为单实线(最为常用的)
- dashed：边框为虚线
- dotted：边框为点线
3、边框的合写分写
边框简写：
border: 1px solid red;
边框分开写法：
border-top: 1px solid red; /* 只设定上边框， 其余同理 */
3.2、边框会影响盒子实际大小
边框会额外增加盒子的实际大小。因此我们有两种方案解决：
- 测量盒子大小的时候,不量边框。
- 如果测量的时候包含了边框,则需要 width/height 减去边框宽度
4、内边距（padding）
4.1、内边距的使用方式
1、padding 属性用于设置内边距，即边框与内容之间的距离。
2、语法：
合写属性：
分写属性：
5、外边距（margin）
5.1、外边距的使用方式
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
5.2、外边距典型应用
外边距可以让块级盒子水平居中的两个条件：
- 盒子必须指定了宽度（width）。
- 盒子左右的外边距都设置为 auto 。
常见的写法，以下三种都可以：
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。
5.3、清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了
