首先来认识以后常常要打交道的三个东西。

HTML（标签）超文本标记语言 从语义的角度描述页面结构。提到HTML的作用，只能从语义方面从想，绝对不能想样式。

tips:任何一个标准的HTML页面，第一行一定是一个以DOCTYPE ……开头的语句。这一行，就是文档声明头，DocType Declaration。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

CSS（样式）层叠式样式表 从审美的角度负责页面样式。

tips：标准的div+css页面，用的标签种类很少：div p h1 span a img ul ol dl input。

关于元素使用id还是class，一般来说，给一个元素添加样式建议使用class，但是如果是对元素进行一些操作，则使用id更好一些，id是唯一的，而class可以多个元素使用同一个，便于元素渲染。

基础知识介绍完毕，说一些初学者经常会遇到的问题吧。

一些简单的易于理解的CSS知识就不过多提了，比如继承性、层叠性、权重这些。

visibility:hidden;隐藏内容，同时占位置；visibility:hidden+height:0 等同于 display:none，可以启到在同一个样式中同时使用 display中的两种属性的效果。

BFC：我们常用的 div+css 经常会使用BFC。块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

BFC约束规则：

1.生成BFC元素的子元素会一个接着一个防止。垂直方向上他们的起点事一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠，同属一个BFC的两个相邻Box的margin会发生重叠。

这里说一下两个元素的边距合并问题。可能有以下几种情况：

1. 符合垂直边距合并的条件，就是因为BFC块级元素边距相邻， 出现了 边距合并现象。

2.不符合垂直边距合并有两种情况

（1）兄弟元素，这是兄弟元素的底部边距跟顶部边距重叠，只需要清除状态即可

（2）父级元素跟子元素， 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。简单讲：根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠

解决这种问题的办法很简单，就是都加上padding就好了（最简单的方法）

参考官方文章：  官方原文（英文版）

2.生成BFC元素的子元素中，每一个子元素左外边距与包含块的左边界接触，即使浮动元素也是如此（除非这个子元素自身也是一个浮动元素）。

3.BFC的区域不会与float的元素区域重叠。

4.计算BFC高度时，浮动元素也参与计算。

5.BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。

我们在写css常见的一些问题都可以由上面两条推出，例如：

　　(1).Block元素与父元素同宽，所以Block元素竖直方向上垂直排列。

　　(2).竖直方向上有的Block元素margin会重叠，水平方向不会。

　　(3).浮动元素会尽量接近左上方或右上方。

　　(4).为父元素设置overflow:hidden或浮动父元素，则父元素会包含其浮动的子元素。

position五种定位：

position定位是指定位置的定位，以下为常用的几种：

1、static（静态定位）：

当我们没有指定定位方式的时候，这时默认的定位方式就是static，也就是按照文档的书写布局自动分配在一个合适的地方，这种定位方式用margin来改变位置，对left、top、z-index等设置值无效，这种定位不脱离文档流

2、relative定位（相对定位）：

该定位是一种相对的定位，可以通过设置left、top等值，使得指定元素相对其正常的位置进行偏移，这种定位不脱离文档流；

特点：占位置   作用：1.父相子绝  2.微调元素   比如：input标签底部无法对齐的处理

3、absolute定位（绝对定位）：

这种定位通过设置top、right、bottom、left这些偏移值，相对于 static 定位以外的第一个父元素进行定位（这种定位通常设置父元素为relative定位来配合使用），在没有父元素的条件下，它的参照为body，该方式脱离文档流；

4、fixed（固定定位）：

这种定位方式是相对于整个文档的，只需设置它相对于各个方向的偏移值，就可以将该元素固定在页面固定的位置，通常用来显示一些提示信息，脱离文档流；

5、inherit定位：

这种方式规定该元素继承父元素的position属性值。

这里来聊一下有些面试题会要给出几种元素居中方案，就是从这几个定位来做。

1. 标准流的盒子居中：margin：0  auto;

2. 绝对定位的盒子居中：{position:absolute;left:50%;margin-left:-width/2;}

关于样式的其他问题，可以评论区留言，开另篇文章细细聊一下。在此不过多提及了，这里来聊聊重头戏控制页面行为的JavaScript。

JavaScript（行为）：面向Web的编程语言

JavaScript因为体量太大要说的太多，我之后会分为，从面试的角度出发，JavaScript有哪些需要注意的知识点，以及提炼JavaScript权威指南（第六版）的重要知识点出发，来全面的聊聊JavaScript。