HTML和CSS进阶知识
一、HTML中常用的块元素（block）和行内元素（inline）
常见的块元素（block）：p、h1--h6、div、ul、ol、dl、hr
常见的行内元素（inline）：b、i、em、strong、small、sub、sup、a、span、br、
在css中，可以通过display属性实现block元素和inline元素的转换。
display：block；（将行内元素转换为块元素）
display：inline；（将块元素转换为行内元素）
display：none；（隐藏元素）
二、HTML的语义化是什么？
使用具有一定语义的标签来构建HTML结构，而不是使用一堆的div+css来构建，从而使得HTML代码易于书写和阅读。
具体参见火山君的这篇博文：https://www.cnblogs.com/huoshanjun/p/6603580.html
三、HTML、XHTML和HTML5的区别
HTML：HyperText Mark-up Language（超文本标记语言），XHTML：Extensible HyperText Mark-up Language（扩展的超文本标记语言）。是XML风格的HTML4.01，我们称之为更严格更纯净的HTML4.01.
HTML语法书写比较松散，利于开发者编写。但是对于机器、手机等来说，语法约松散，处理起来越困难。因此为了更好地处理HTML，所以咋HTML基础上引入了XHTML。
XHTML与HTML的主要区别主要有：
（1）XHTML标签必须是闭合的。
（2）XHTML标签以及属性必须小写
（3）XHTML标签属性必须用引号
（4）XHTML标签用id属性代替name属性
HTML5：HTML指的是HTML4.01，XHTML是HTML的过渡版，HTML5是下一代的HTML。HTML5已经不再是单纯意义上的标签了，除了HTML的基础上增加了部分标签之外。还增加了一组技术，包括Canvas，svg，websocket，本地存储等，这些新增的技术都是使用了javascript来操作。
即HTML5是HTML从一门标记语言转变为一门编程语言。特点：
（1）文档说明类型的变化：<!DOCTYPE html>
（2）标签不再区分大小写
（3）允许属性值不加引号
（4）允许部分属性的属性值省略
四、什么是外边距叠加？出现外边距叠加的根本原因是什么？
margin（外边距），两个盒子之间的距离，可以是子元素与父元素之间的距离，也可以是兄弟元素之间的距离。
css允许给外边距属性指定负数值，可以产生盒子的重叠效果，即所谓的负margin技术。
外边距叠加，又称“margin叠加”，指的是两个垂直外边距相遇时，这两个外边距将合并为一个外边距，其中叠加后的外边距高度等于发生叠加之前的两个外边距中的最大值。
外边距叠加分三种情况：同级元素、父子元素和空元素、
外边距叠加至有以上三种情况，此外还需要注意以下几点：
（1）水平外边距永远不会叠加，水平外边距指的是margin-left、margin-right
（2）外边距叠加之后的外边距高度等于叠加之前的两个外边距中的max
（3）外边距叠加针对的是block以及inline-block元素，不包括inline元素，因为inline元素的margin-top和margin-bottom设置无效。
css定义外边距叠加的初衷是为了更好的对文章进行排版。
五、display属性的属性值：block、inline、inline-block、table-cell的区别
1、block（块元素）
（1）独占一行，排斥与其他元素位于同一行
（2）块元素内部可以容纳其他的快元素或行内元素
（3）可以定义width和height
（4）可以定义四个方向的margin
eg：div、h1--h6、p、hr、ol、ul
2、inline（行内元素）
（1）可以与其他行内元素位于同一行
（2）行内元素内部可以容纳其他行内元素，但不可容纳块元素
（3）行内元素无法定义width和height
（4）可以定义margin-left和margin-right，但无法定义margin-top和margin-bottom
eg：strong、em、s、u、a、span
3、inline-block（行内块元素）
可以使用display：inline-block将元素转换为行内元素
（1）可以定义width和height
（2）可以与其他行内元素位于同一行
eg：img、input
4、none 使用display：none来隐藏元素
display：none；用的很多，如二级导航、tab选项卡等
一般情况下，display：none；都配合javascript来动态隐藏元素。
注意事项：（1）display：none，一般都是排和javascript动态隐藏元素，被隐藏的元素不占原来的位置空间。
（2）display：none；不推荐用来隐藏一些对SEO关键的部分，因为对搜索引擎而言，它会直接忽略display：none隐藏的内容。
display：none和visibility：hidden的区别：
（1）display：none元素被隐藏后，不占原来的位置，即彻底消失了，看不见摸不着
（2）visibility:hidden元素被隐藏后，仍占原来的位置，没有彻底消失，看不见，但摸得着
5、table-cell
在css中，display：table-cell可以让元素以表格单元格的形式呈现，也就是说table-cell类型的元素具备td的特点：
displa：table-cell的功能十分强大，可以实现以下三个功能：
（1）图片的垂直居中
在css中，可使用display：table-cell和vertical-align：center来实现大小不固定的图片的垂直居中效果。
父元素｛
display：table-cell；
vertical-align:center;
｝
子元素｛
vertical-align:center;
｝
（2）等高布局
同一行的td元素高度是相等的，因此，table-cell元素也具有这个特点，根据这个特点，可以实现等高布局。
是一种自适应等高布局方法。
（3）自动平均划分元素，并且在一行显示
语法：父元素｛display：table｝
子元素｛display：table-cell｝
6、去除inline-block元素之间的间距
一般情况下，inline-block元素之间是有间距的，在实际开发中，这种间距又是会对我们的布局产生影响，大多数情况下，为了不影响布局， 需要去除inline-block元素之间的间距。
在css中，我们可以使用“font-size：0”来去除inline-block元素之间的间距。
font-size:0是在inline-block元素的父元素中添加的。
六、text-indent、text-align、line-height及vertical-align属性的使用技巧。
1、text-indent
text-indent有两种用法：
（1）用来实现首行缩进
text-indent:2em
（2）text-indent:-9999px；一般用于LOGO部分，搜索引擎优化中，h1是非常重要的标签，一般情况下，我们都是把网站的LOGO图片放在h1中，但是搜索引擎无法识别图片，只能识别文字。
有一个很好的办法就是，指定h1元素的长度与LOGO图片相同，然后定义h1的背景图（background-image）为LOGO图片，然后用text-indent:-9999px；来隐藏文字内容。
2、深入text-align
属性取值有：left right center
text-align属性对文字和图片都起作用。
text-align起作用的元素：文字，inline元素以及inline-block元素，对块元素不起作用
text-align：center与margin：0 auto；的区别：
（1）text-align：center；实现的是文字，inline和inline-block元素的水平居中
（2）margin：0 auto；实现的块元素的水平居中
（3）text-align:center;在父元素中定义，margin：0 auto；在当前元素中定义
3、深入line-height（行高）
在css中，line-height更准确的定义：两行文字基线之间的距离。
（1）顶线、中线、基线、底线（由顶至底）
vertical-align属性中：top、middle、baseline、bottom这四个属性值分别对应这四条线
（2）行高、行距和行半距
行高：2行基线之间的垂直距离
行距：上一行底线到下一行顶线之间的垂直距离，也就是2行文字之间的间距。
行半距：行距的一半
（3）内容与行距
内容区：指的是行盒子顶线到底线之间的垂直距离
行框：两行文字“行半距分割线”之间的距离
（4）height和inline-height
在css中，我们可以定义height和inline-height这两个属性相等，从而实现单行文字的垂直居中。
4、深入vertical-align
W3C官网对vertical-align属性的定义有四个方面：
（1）vertical-align属性用于定义“周围文字，inline及inline-block元素”相对于该元素基线的垂直对齐方式，这里的该元素指的是被定义了vertical-align属性的元素。
（2）在表格单元格中，vertical-align属性可以定义单元格td元素中内容的对齐方式，td元素是table-cell元素。
（3）vertical-align对inline元素，inline-block以及table-cell元素有效，对块元素无效
（4）vertical-align允许指定负长度值和百分比值
七、浮动的副作用、清除浮动的几种方法：
1、浮动的副作用
（1）父元素高度塌陷，从而导致边框不能撑开，背景色无法显示
（2）页面布局混乱
2、清除浮动的三种方法
（1）clear：both；
clear属性不是应用于浮动元素本身，而是应用于浮动元素后面的元素
（2）overflow：hidden
应用于浮动元素的父元素，而不是当前浮动元素
（3）：：after伪元素
使用clear：both和overflow：hidden；来清除浮动都有弊端，在实际开发中，比较号的解决方案是使用：：after伪元素，结合clear：both来说实现。
1 .clearfix{*zoom:1;}//用于解决ie6、ie7浮动问题 2 .clearfix::after{ 3 clear:both; 4 content:""; 5 display:block; 6 height:0; 7 visibility:hidden; 8 }
八、css有哪些优化技巧？如何使用高性能的选择器？
高质量的css代码主要体在两个方面：可读性和可维护性以及高性能。当css文件比较小时，性能提高也是微乎其微的。
css的优化主要从以下几个方面入手：
1、属性缩写
属性缩写可以减少字符数，是css代码两变少，对属性缩写，主要从以下几个方面的进行优化；
（1）盒子模型 （2）背景缩写 （3）字体缩写 （4）颜色值缩写
2、高性能的选择器
eg：#colum .content div{color:red;}
浏览器对选择器是从右到左进行解析：现查找所有的div元素，然后再查找每个div元素是否存在具有content类的父元素，最后在已经匹配的父元素中该继续向上查找祖先元素是否含有id为colum的元素。
