目录
面试题
面试题一：
1、简述弹性盒子 flex 布局及 rem 布局？
问题解答：
rem 是 CSS3 新增的一个相对单位，相对于根节点(html)字体大小的值，r 就是 root html{font-size:10px} 则 2rem=20px 通过它就可以做到只修改根元素的大小，就能成比例地调整所有的字体大小，只依赖 html 字体的大小
适配方案步骤：
1、首先动态计算 html 的 font-size
2、将所有的 px 换算成 rem(计算过程请看下面代码和注释（注意：rem 的换算是根 据设计图稿的像素计算的，下面的计算只是动态计算 html 的 font-size 大小），
请看下面的注意事项：
<meta name="viewport" content="width=device-width,user-scalable=no"/> <style> body{ margin: 0; } div{ /*width: 80px;*/ height: 100px; width: 4rem; height: 4rem; /*1rem=20; nrem=80; n=80/rem; n=80/20; n=4*/ background: green; float: left; } <style> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </body> <script> (function(){ var html=document.documentElement; var width=html.getBoundingClientRect().width; //获取屏幕宽度（设备独立像素）， 如 iPhone6 为 414 html.style.fontSize=width/16+'px'; //html font-size = 20px //iphone5 下 1rem=20 这里之所以除以 16，是因为要把宽度分成 16 份，这个数并没 有固定，一般选 15，16，以 ipone5 为准是 16，因为一除可以得到整数 20，好计算。 })(); </script>注意：
1、必需动态的去设置 html 的大小，才能适配
2、根据页面的宽度除以一个系数，把算出的这个值赋给 html 的 font-size 属性，rem 换 算值是根据 psd 设计图的宽度/系数的 rem 系数 以 640px 设计稿和 750px 的视觉稿，网易这样处理的：
var width = document.documentElement.clientWidth; // 屏幕的布局视口宽度
var rem = width / 7.5; // 750px 设计稿将布局视口分为 7.5 份
var rem = width / 6.4; // 640px 设计稿将布局视口分为 6.4 份
这样不管是 750px 设计稿还是 640px 设计稿，1rem 等于设计稿上的 100px。故 px 转换 rem 时：1rem = 1px * 0.01;
在 750px 设计稿上： 设计稿上 75px 对应 0.75rem, 距离占设计稿的 10%；
在 ipone6 上： width = document.documentElement.clientWidth = 375px； 1rem = 375px / 7.5 = 50px; 0.75rem = 37.5px; (37.5/375=10%；占屏幕 10%)
在 ipone5 上： width = document.documentElement.clientWidth = 320px； rem = 320px / 7.5 = 42.667px; 0.75rem = 32px; (32/320=10%；占屏幕 10%)
故对于设计稿上任何一个尺寸换成 rem 后，在任何屏下对应的尺寸占屏幕宽度的百分比相 同。故这种布局可以百分比还原设计图
2.1）为什么要除一个数字，原因是：一个页面里，不可能全都是整屏的元素，肯定有 一行中放多个元素。所以就把一行分成 n 份
2.2）不除一个数字的话，那 1 个 rem 就是屏幕的宽度，这个值太大，如果一个元素 的宽度比它小的话，就不方便计算
2.3）这个系数，自己定。多少都可以，但是建议给一个能整除的值（这个能整除的 数， 是还要根据设计稿能整除的数。）
3、对于切的图片，尺寸是根据设计图的尺寸宽度的，显示起来会很大，如果是 Img 标 签， 可以设置宽度为切出的图片尺寸，换算成 rem，如果是 background-img，用 background-size 属性，设置设计图尺寸宽高，换算成 rem 进行图片的缩放适配。 对于上述的第二点，根据设计稿动态转换 rem，这里说一下，前面的计算是动态的设置 html的 font-size 的大小，这是根据设备的独立像素计算的。而设计稿往往是根据物理像素，即 设备像素设计的，往往很大，是 750px 及以上，所以在转换 rem 的时候，转换是根据 psd 设计稿的像素进行转换，即 1rem = 设计稿像素宽度/系数，例如，如果是 1080px 的设计 稿，那么，就用 1rem = 1080/18 = 60px（这里用 18 做系数，是因为能整除），然后布 局的时候就根据设计稿的元素尺寸转换，例如设计稿一个元素的高为 60px，那么就可以转 化为 1rem 了
特点：
1、所有有单位的属性会根据屏幕的尺寸自动计算大小
2、同样一个元素，在不同的设备下的大小是不一样的。在尺寸小的设备下显示的小，在 尺 寸大的设备下显示的大
3、一般以 iphone6 为基准，以它的宽度 750 除上一个系数，再去算 rem Tips：上述步骤 2 中换算可以通过 Hbuilder 将 px 自动转 rem 以及通过 less 自动计算 成 rem，sublime 也可以通过插件进行自动转换
3.1）打开 Hbuilder，顶部栏的工具》选项》Hbuilder》代码助手》px 自动转 rem 设 置 3.2）less 自动转换：Hbuilder 也可以将 less 文件自动转成 css 文件。less 文件的书 写如下所示:
比如想设置宽度为 187px，高度为 100px 的元素，可以通过下面方式计算适配 @rem：25rem； /*这是 1rem = X px 的 X 的值，但是用了 rem 做单位而已*/ div{ width: 187/@rem; height: 100/@rem; }弹性布局适配(会配合 rem 适配使用 )
兼容情况
IE10 及以上、ios9 及以上、android4.4 及以上版本支持
特点 :
1、默认所有子元素都会在一行中显示，即使给子元素一个很大的宽度
2、父级加了这条属性，子级的 float、vertical-align 就会失效
3、如果兼容低版本的机型要加前缀-webkit-，包括后面讲的所有属性 容器属性（父元素样式） 具体看菜鸟教程或阮一峰的教程，这里说一下一些重点知识
3.1）flex-direction：子元素排列方向（主轴的方向，如果设置了 column，则意味着 主轴旋转了 90 度）
3.2）flex-wrap：换行方式
3.3）flex-flow：以上两种方式的简写 3.4）justify-content：水平对齐方式（子元素在主轴上的对齐方式）
3.5）align-items：垂直对齐方式（子元素在交叉轴上的对齐方式）
3.6）align-content：多行垂直对齐方式（多根轴线的对齐方式）
项目属性（子元素样式）
1、order：排列位置 //如果有两个的值是相等，按书写顺序排列
2、flex-grow：扩展比例
flex-grow 当父级的宽度大于所有子元素宽度之和时，根据父级的剩余空间，设置子元素 的扩展比例（设置后，元素给的固定宽度会被覆盖）它是一个系数默认为 0，即如果存在 剩 余空间也不扩展
剩余空间：剩余空间=父级的宽度-所有子元素的宽度和
注意：如果没有设置初始宽度，也没有内容，则默认为 0，否则为内容的宽度。例如设置 了 文字，会撑开有初始宽度
子元素宽度计算公式:
子元素的宽度=（父级的宽度-所有子元素的宽度和）/所有子元素的 flex-grow 属性值之和*子元 素的 flex-grow 属性值+子元素初始宽度
3、flex-shrink：收缩比例
flex-shrink 当所有子元素宽度之和大于父级宽度的时候，根据超出的空间，设置子元素的 收缩比例（设置后，元素给的固定宽度会被覆盖）它是一个系数默认为 1，如果给个 0 的 话，就不会收缩
超出空间：超出空间=所有子元素的宽度和-父级的宽度
子元素宽度计算公式
1、算出超出空间，所有子元素的宽度和-父级的宽度
2、子元素的初始宽度*子元素的 flex-shrink 值
3、算出第二步所有结果的和
4、每个子元素的第二步/第三步*第一步
5、子元素的初始宽度-第四步
flex-basis：元素的大小
flex：以上三个属性的简写
align-self：单独的垂直对齐方式（交叉轴方向上）
面试题二：
2、important 的作用？
问题解答：
定义及语法
!important，作用是提高指定样式规则的应用优先权（优先级）。语法格式 { cssRule !important }，即写在定义的最后面，例如：box{color:red !important;}。 在 CSS 中，通过对某一样式声明! important ，可以更改默认的 CSS 样式优先级规则， 使 该条样式属性声明具有最高优先级
浏览器识别
ie7 及 ie7+,firefox,chrome 等浏览器下，已经可以识别 !important 属性， 但是 IE 6.0IE6 及更早浏览器下仍然不能完全识别。important 的样式属性和覆盖它的样式属性单 独使用时(不在一个{}里)，IE 6.0 认为! important 优先级较高，否则当含! important 的样 式属性被同一个{}里的样式覆盖时，IE 6.0 认为! important 较低
面试题三：
3、如何解决 margin“塌陷”？
问题解答：
外边距塌陷共有两种情况：
第一种情况：
两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给 margin-top，那么他们两个的间距会重叠，以大的那个计算。解决这种情况 的方法为：两个外边距不同时出现
第二种情况：
两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生 上边距，父子元素会进行粘连，决绝这种情况的方法为：父级添加一个 css 属性， overflow： hidden，禁止超出 外边距重叠就是 margin-collapse
解决方案：
1、为父盒子设置 border，为外层添加 border 后父子盒子就不是真正意义上的贴合 （可 以设置成透明：border：1px solid transparent）。
2、为父盒子添加 overflow：hidden；
3、为父盒子设定 padding 值；
4、为父盒子添加 position：fixed；
5、为父盒子添加 display：table；
6、利用伪元素给子元素的前面添加一个空元素 .son:before{ content:""; overflow:hidden; }
面试题四：
4、什么是外边距重叠？重叠的结果是什么？
问题解答：
外边距重叠
外边距重叠指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距 的高度等于两个发生合并的外边距的高度中的高度如果都是正边界，边界宽度是相邻边界 宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果 没有正边界，则从零中减去绝对值最大的负边界。只有外边距才可以是负值，内边距不允 许为负值
在 CSS 中，相邻的两个盒子的外边距可以结合成一个单独的外边距，这种合并外边距的方 式被称为折叠，并且因而所结合成的外边距称为折叠外边距
重叠情况
1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
2、两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
3、两个外边距一正一负时，折叠结果是两者的相加的和
4、外边距不重叠的情况 水平 margin 永远不会重合
设置了 overflow 属性(visible 除外)的元素和它的子元素之间的 margin 不会重叠 设置了绝对定位（position:absolute）的盒模型，垂直 margin 不会被重叠，和子元素之 间也不重叠
设置了 display:inline-block 的元素，垂直 margin 不会重叠，和子元素之间也不重叠 根元素(如 html)与 body 的 margin 不会重叠
5、防止外边距重叠的方法
元素绝对定位 postion:absolute;一般用在内层元素
内层元素 加 float:left;或 display:inline-block;
外层元素用 padding 增加边距
外层元素设置 overflow:hidden;
内层元素透明边框 border:1px solid transparent;
面试题五：
5、HTML5 的 input 增加哪些 type？
问题解答：
在 HTML5 中，为 input 元素新增了以下一些 type 属性值，用来丰富文本框的类型。
color：用于指定颜色的控件 dao
date：用于输入日期的控件（年，月，日，不包括时间）
datetime：基于 UTC 时区的日期时间输入控件（时，分，秒及几分之一秒）
datetime-local：用于输入日期时间控件，不包含时区
email：用于编辑 e-mail 的字段
month：用于输入年月的控件，不带时区
number: 用于输入浮点数的控件
range：用于输入不精确值控件
search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除
tel：用于输入电话号码的控件
time：用于输入不含时区的时间控件
url：用于编辑 URL 的字段
week：用于输入一个由星期-年组成的日期，日期不包括时区
896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
