一、查阅文档
推荐的网站：
1、http://www.w3school.com.cn/
2、https://developer.mozilla.org/zh-CN/

二、Chrome调试工具
Chrome浏览器提供了一个非常好的调试工具，可以用来调试HTML结构和CSS样式。
1、Ctrl+滚轮 可以放大开发者工具代码大小。
2、左边是HTML元素结构，右边是CSS样式。
3、右边CSS样式可以改动数值（左右箭头或者直接输入）和查看颜色。
4、Ctrl+0 复原浏览器大小。
5、如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
6、如果有样式，但是样式前面有黄色感叹号，则是样式属性书写错误。

三、推荐安装的插件
1、Chinese language Pack for VS Code 中文语言包。
2、Open in Browser 右击选择浏览器打开HTML文件。
3、JS-CSS-HTML Formatter 每次保存，都会自动格式化js css html代码。
4、Auto Rename Tag 自动重命名配对的HTML/XML标签。
5、CSS PeeK 追踪至样式。

四、CSS基础选择器
1、标签选择器，作用：可以选出所有相同的标签，比如p。特点：不能差异化选择。使用情况：较多。用法：p {color : red;} 。
2、类选择器，作用：可以选出1个或者多个标签。特点：可以根据需求选择。使用情况：非常多。用法：.nav {color : red;} 。
3、id签选择器，作用：一次只能选择一个标签。特点：id属性只能在每个HTML文档中出现一次。使用情况：一般和js搭配。用法：#nav {color : red;} 。
4、通用符选择器，作用：选择所有的标签。特点：选择的太多，有部分不需要。使用情况：特殊情况使用。用法：* {color : red;} 。
注意：每个基础选择器都有使用场景，都需要掌握。如果是修改样式，类选择器是使用最多的。

五、Emmet语法
1、快速生成HTML结果语法
(1)、生成标签直接输入标签名，按tab键即可。比如div 然后tab键，就可以生成<div></div> 。
(2)、如果想生成多个相同标签，加上就可以了。比如div 就可以快速生成3个div 。
(3)、如果有父子关系的标签，可以用>。比如 ul>li就可以了。
(4)、如果有兄弟关系的标签，用+就可以了。比如div+p 。
(5)、如果生成带有类名或者id名字的，直接写 .demo 或者 #two，tab键就可以了 。
(6)、如果生成的div类名是有顺序的，可以用自增符号 $ 。
(7)、如果想要在生成的标签内部写内容，可以用 {} 表示 。
2、快速生成CSS样式语法，CSS基本采取简写形式即可
(1)、比如 w200 按tab键 可以生成 width: 200px;
(2)、比如 lh26 按tab键 可以生成 line-height: 26px;

六、CSS复合选择器
1、后代选择器，作用：用来选择后代元素。特点：可以是子孙后代。使用情况：较多。隔开符号及用法：符号是空格 .nav a
2、子代选择器，作用：选择最近一级元素。特点：只选亲儿子。使用情况：较少。隔开符号及用法：符号是大于 .nav>a
3、并集选择器，作用：选择某些相同样式的元素。特点：可以用于集体声明。使用情况：较多。隔开符号及用法：符号是空格 .nav, .header
4、链接伪选择器，作用：选择不同状态的链接。特点：跟链接相关。使用情况：较多。隔开符号及用法：重点记住 a{} 和 a:hover 实际开发的写法
5、:foucs选择器，作用：选择获得光标的表单。特点：跟表单相关。使用情况：较少。隔开符号及用法：input:focus

七、CSS元素显示模式
1、块元素
常见的块元素有<h1> ~ <h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
(1)、块元素的特点：
1>、比较霸道，自己独占一行
2>、高度、宽度、外边距及内边距都可以控制
3>、宽度默认是容器（父级）的100%
4>、是一个容器级盒子，里面可以放行内或者快级元素
(2)、注意：
1>、文字类的元素内不能使用快级元素
2>、<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
3>、同理，<h1> ~ <h6>等都是文字类块级标签，里面也不能放块级元素
2、行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<I>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也是将行内元素称为内联元素。
(1)、行内的特点：
1>、相邻行内元素在一行上，一行可以显示多个
2>、高、宽直接设置是无效的
3>、默认宽度就是他本身内容的宽度
4>、行内元素只能容纳文本或其他行内元素
(2)注意：
1>、链接里面不能再放链接
2>、特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下快模式最安全
3、行内快元素
在行内元素中有几个特殊的标签 <img/>、<input/>、<tb>，他们同时具有块元素和行内元素的特点。
(1)、行内块元素的特点：
1>、和相邻行内元素（行内快）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
2>、默认宽度就是他本身内容的宽度（行内元素特点）
3>、宽度、行高、外边距以及内边距都可以控制（块级元素特点）
4、块级、行内、行内块元素对比：
(1)、块级元素，元素排列：一行只能放一个块级元素。设置样式：可以设置宽度高度。默认宽度：容器的100%。包含：容器级可以包含任何标签
(2)、行内元素，元素排列：一行可以放多个行内元素。设置样式：不可以直接设置宽度高度。默认宽度：他本身内容的宽度。包含：容纳文本或者其他行内元素
(3)、行内块元素，元素排列：一行可以放多个行内块元素。设置样式：可以设置宽度高度。默认宽度：他本身内容的宽度
(4)、元素显示模式转换，比如增加链接<a>的触发范围。 转换为块元素：display:block；转换为行内元素：display:inline；转换为行内块元素：display:inline-block

八、CSS布局总结
1、布局为啥用不同盒子，我只想用div？
标签都是有含义的，合理的地方用合理的标签。比如产品标题就用h，大量文字就用p
2、为啥用那么多类名？
类名就是给每个盒子起一个名字，可以更好的找到每个盒子，选取盒子更容易，后期维护也方便
3、到底用margin还是padding？
大部分情况可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现

九、传统网页布局的三种方式（简单点说就是盒子如何进行排列顺序）
1、普通流（标准流），就是标签按照规定好默认方式排列
(1)、块级元素会独占一行，从上向下顺序排列
常用元素：div、hr、p、h1~h6、ul、ol、from、table
(2)、行内元素会按照顺序，从左向右顺序排列，碰到父元素边缘则自动换行
常用元素：span、a、I、em等
2、浮动
3、定位

十、浮动
1、为什么需要浮动
有很多布局效果，标准流没有办法实现，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。
浮动最典型的应用：可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
2、什么是浮动
float属性用于创建浮动型框，将其移动到一边，直到左边缘或右边有触及包含快活另一个浮动框的边缘。
3、浮动的特性
(1)、浮动元素会脱离标准流。
(2)、浮动的元素会一行内显示并且元素顶部对其。
(3)、浮动的元素会具有行内块元素的特性。
4、浮动布局注意点
(1)、浮动和标注流的父盒子搭配。先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
(2)、一个元素浮动了，理论上其余的兄弟元素也要浮动。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标注流。
5、清楚浮动的本质
(1)、清楚浮动的本质是清楚浮动元素造成的影响。
(2)、如果父盒子本身有高度，则不需要清除浮动。
(3)、清除浮动后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
6、清楚浮动方法
(1)、额外标签也称为隔离法，是W3C推荐的做法。
(2)、父级添加overflow属性。
(3)、父级添加after伪元素。
(4)、父级添加双伪元素。

十一、CSS属性书写顺序
1、布局定位属性：display/position/float/clear/visibility/overflow
2、自身属性：width/height/margin/padding/border/background
3、文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
4、其他属性(CSS3)：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…

十二、为了提高网页制作的效率，布局时通常有以下的整体思路：
1、必须确定页面的版心（可视区），我们测量可得知。
2、分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则。
3、一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。页面布局第二准则。
4、制作HTML结构。遵循先有结构，后有样式的原则。结构永远最重要。

十三、定位
1、定位：将一个盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位 = 定位模式 + 边移量。
2、相对定位relative
相对定位是元素在移动的时候，是相对于它原来的位置来说的。
(1)、它是相对于自己原来的位置来移动的。
(2)、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）
(3)、相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。
3、绝对定位 absolute
绝对定位是元素在移动的时候，是相对于它祖先元素来说的。
(1)、如果没有祖先元素或者祖先元素没有定位，，则以浏览器为准定位（Document文档）。
(2)、如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位元素为参考点移动。
(3)、绝对定位不在占有原先的位置。
4、定位区别总结
(1)、static静态定位，是否脱标：没有；移动位置：不能使用边移；是否常用：很少。
(2)、relative相对定位，是否脱标：否（占有位置）；移动位置：相对于自身位置移动；是否常用：常用。
(3)、absolute绝对定位，是否脱标：是（不占有位置）；移动位置：带有定位的父级；是否常用：常用。
(4)、fixed固定定位，是否脱标：是（不占有位置）；移动位置：浏览器可视区；是否常用：常用。
(5)、sticky粘性定位，是否脱标：否（占有位置）；移动位置：浏览器可视区；是否常用：当前阶段少。
5、定位的扩展
(1)、定位的特殊特性，绝对定位和固定定位也和浮动类似。
1>、行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2>、块级元素添加绝对或者固定定位，如果不给高度和宽度，默认大小就是内容的大小。
(2)、脱标的盒子不会触发外边距塌陷。
浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题。
(3)、绝对定位（固定定位）会完全压住盒子。
1>、浮动元素不同，只会压住他下面标准流的盒子，但不会压住下面标准流盒子里面的文字、图片。但是绝对定位（固定定位）会压住下面标准流所有的内容。
2>、浮动之所以不会压住盒子，因为浮动产生的目的最初是为了做文字环绕的效果，文字会围绕浮动元素。

十四、字体图标的下载
1、icomoon 字库，http://icomoon.io
2、阿里iconfont 字库，http://iconfont.cn/

十五、CSS3新增选择器
1、属性选择器
2、结构伪类选择器
3、伪元素选择器