前端面试总结——HTML与CSS前端面试总结——HTML与CSS，本篇文章主要总结的知识点有：HTML语义化，h5的理解

以前的页面，一打开就是一堆div+css，为了改变这种这种状况，开发者们和官方提出了让HTML结构语义化的概念，并且官方w3c，也在HTML5给出了几个新的语义化的标签。

HTML5节元素标签包括body article nav aside section header footer hgroup ，还有h1-h6和address。

•address代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。demo

•h1-h6因为hgroup，section和article的出现，h1-h6定义也发生了变化，允许一张页面出现多个h1。

HTML语义化就是使用正确的标签，段落就写 p 标签，标题就写 h1 标签，文章就写article标签，视频就写video标签。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">

width：控制 viewport 的大小，可以给它指定一个值(正整数)，或者是一个特殊的值(如：device-width 设备独立像素宽度，单位缩放为 1 时)；
initial-scale：初始缩放比例，即当页面第一次加载时的缩放比例，为一个数字(可以带小数)；
maximum-scale：允许用户缩放到的最大比例，为一个数字(可以带小数)；
minimum-scale：允许用户缩放到的最小比例，为一个数字(可以带小数)；
user-scalable：是否允许用户手动缩放，值为 "no"(不允许) 或 "yes"(允许)；
height：与 width 相对应(很少使用)。

H5表示移动端页面，反正不是HTML5。

IE 盒子模型（box-sizing: border-box）、W3C 盒子模型（box-sizing: content-box）；默认的是W3C 盒子模型；我们一般都使用的是border-box，其width包括的是 content+padding+border。

容器的属性：

flex-direction：row | row-reverse | column | column-reverse;
flex-wrap：nowrap | wrap | wrap-reverse;
flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap；
justify-content：flex-start | flex-end | center | space-between | space-around;
align-items：flex-start | flex-end | center | baseline | stretch;
align-content：flex-start | flex-end | center | space-between | space-around | stretch;；

项目的属性：

order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self：auto | flex-start | flex-end | center | baseline | stretch;

块格式化上下文（Block Formatting Context，BFC），形成独立的渲染区域，内部区域渲染不收外界影响，可以用作清除浮动。

触发条件：

背代码，这是我目前最常用的：

 .clearfix:after{
     content: '';
     display: block; /*或者 table*/
     clear: both;
 }
 .clearfix{
     zoom: 1; /* IE 兼容*/
 }