HTML+CSS面试题双边距BUG ：块属性标签float后，又有横行的margin情况下，在ie6显示margin 比

一、弹性盒子布局

www.jianshu.com/p/5856c4ae9…

二、浏览器内核

浏览器	内核
IE	Trident内核，也是俗称的IE内核；
Chrome	以前是Webkit内核，现在是Blink内核
Firefox	Gecko内核，俗称Firefox内核
Safari	Webkit内核
Opera	最初是自己的Presto内核，后来是Webkit，现在是Blink内核
360浏览器、猎豹	IE+Chrome双内核
搜狗、遨游、QQ	Trident（兼容模式）+Webkit（高速模式）
百度浏览器、世界之窗内核	IE内核
2345浏览器	以前是IE内核，现在也是IE+Chrome双内核

三、html常见的兼容问题

双边距BUG ：块属性标签float后，又有横行的margin情况下，在ie6显示margin 比设置的大。
3像素问题使用float引起的使用dislpay:inline -3px
超链接hover 点击后失效使用正确的书写顺序 link visited hover active
Ie z-index问题给父级添加position:relative
Png 透明使用js代码改
Min-height 最小高度！Important 解决’
select 在ie6下遮盖使用iframe嵌套
为什么没有办法定义 1px 左右的宽度容器（IE6 默认的行高造成的，使用 over:hidden,zoom:0.08 line-height:1px）
IE6不支持PNG透明背景，解决办法: IE6下使用gif图片

四、css3有哪些新特性？

过渡（transition）、动画（animation）、形状转换（transform）、选择器、背景（background-clip）、反射、文字阴影等效果、渐变、弹性布局（Flex）、栅格布局（grid）、媒体查询

juejin.cn/post/684490…

五、HTML5新特性？

语义标签：header、navsection、article、footer、dialog...
增强型表单：
表单type值（date|number|search|tel|url）...
属性值（min|max|height|width|placeholder|autocomplete）...
表单元素（datalist|keygen|output）
视频和音频
Canvas绘图
SVG绘图
地理定位
拖放API
WebWorker
WebStorage
WebSocket
www.jianshu.com/p/d661694a9…

六、水平/垂直居中几种实现方式以及区别？

1、使用flex布局（优点：无需知道父子模块宽度具体是多少即可实现）

display: flex;  
align-items: center;  (垂直居中)
justify-content: center;   (水平居中)

2、利用相对定位和绝对定位

父{
	position: relative;
}
（1）子{ （无需知道子的宽高）
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
}
（2）子{（需要知道子的宽高）
	position: absolute;
	left:50%;
	top:50%;
	margin-top:-100px;
	margin-left:-100px;
}

3、利用css3 transform

子{
    position: absolute;
    left:50%;
	top:50%;
	transform:translate(-50%,-50%) //移动自身身体的50%，无需知道子元素的固定宽高值
}

4、display:table-cell;（固定父元素宽高）

父{
	  width:1000px;
	  height:500px;
	  display: table-cell;
	  vertical-align: middle;
	  text-align: center;
}
子{
	display:inlink-block;
}

七、css两行布局和三栏布局

两栏布局，以下html为例
1、自身浮动法

<div class="con">
        <div id="aside">aside-定宽200px</div>
        <div id="content">content-自适应宽度</div>
</div>
#aside{
    float: right;
    width:200px;
    background:#f00;
    height:1000px;
}
#content{
    margin-right: 200px;
    background:#ff0;
    height:400px;
}

2、margin负值法

(大盒子左浮动，然后背景色放到里面小盒子里去写，margin-right值会使背景色右侧空缺相对应的值，然后固定宽度的盒子也浮动向左。但是需要margin-left:-200px，这个值来源于里面的margin-right的值。这样就能排列一行，否则会折行)
<div class="content">
  <div id="left"></div>
</div>
<div id="right">aside-定宽200px</div>
.content{  
    width: 100%;
    float: left;
    height: 400px;
}
#left{
    margin-right: 200px;
    background-color: aquamarine;
    height: 400px;
}
#right{
    float: left;
    width:200px;
    margin-left: -200px;
    background-color: blue;
    height: 400px;
}

三栏布局（左右固定，中间自适应） 1、绝对定位法（左右固定区域直接定位到相应的位置，然后中间区域不设置宽度，用margin:0 200px；来自使用）

<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
#left, #right{
    position: absolute;
    top: 0px;
    width: 200px;
    height: 100%;
}
#left{
    left: 0px;
    background-color: aquamarine;
}
#right{
    right: 0px;
    background-color: red;
}
#mid{
    margin: 0 200px;
}

2、margin负值法
道理基本相同，main大div左浮动，然后里面的body中间区域左右填充，这样就可以只展示中间了，然后另外两个就是全部浮动，做模块浮动需要margin-left一个整屏幕才能上去，而右面只需要left自己的宽度即可

<div id="main">
    <div id="body"></div>
</div>
<div id="left"></div>
<div id="right"></div>
#main{
    width: 100%;
    height: 100%;
    float: left;
}
#body{
    margin: 0 200px;
    height: 100%;
    background-color: blueviolet;
}
#left, #right{
    width: 200px;
    float: left;
    height: 100%;
}
#left{
    margin-left: -100%;
    background-color: aquamarine;
}
#right{
    margin-left: -200px;
    background-color: chocolate;
}

3、自身浮动法
基本和第一种定位差不多，只是把定位左右。写成浮动左右，中间不变margin去填充

<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
 #left, #right{
    position: absolute;
    top: 0px;
    width: 200px;
    height: 100%;
}
#left{
    left: 0px;
    background-color: aquamarine;
}
#right{
    right: 0px;
    background-color: red;
}
#mid{
    margin: 0 200px;
}

八、盒模型

box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
标准盒模型：content、padding、border、margin。width表示content 怪异盒模型(IE盒子模型)： width表示content+padding+border
flex弹性盒模型

HTML+CSS面试题

一、 弹性盒子布局