1.HTML+CSS(2)
图片间隙问题如何解决
（1）vertical-align：top/bottom/middle
（2）给图片转块
（3）给图片的父元素设置float-size:0;line-height:0;（缺点是让所有的行高和字号都变成0了，必须重新定义字号和行高）
说说常见浏览器兼容问题
（1）小高度：在IE6及以下版本，有小高度问题
解决办法：font-size:0;line-height:0;overflow:hidden;
（2）双边距：在IE6及以下版本，浮动元素设置margin-left，最左侧的盒子会出现双倍的margin-left
解决办法：_display:inline;
（3）块转内联块不在一行：IE7及以下版本，块元素转内联块元素，不在同一行显示
解决办法：*dislay:inline;*zoom:1;
（4）溢出隐藏失效：IE6和IE7里，给子元素设置相对定位，给父元素设置溢出隐藏，溢出隐藏失效。
解决办法：给父元素也设置相对定位。
（5）Li与li之间有间隙：在IE7及以下版本li的子元素有两个或两个以上浮动的时候，li与li之间会出现空隙。
解决办法:Vertical-align:bottom/top/middle
（6）图片外蓝圈：在IE8及以下版本，图片外面如果有a标签的话，图片会有蓝圈
解决办法：img{
Border：none；
}
（7）Input外蓝圈：不是IE特殊问题，表单元素获取焦点，就会有外面的蓝圈
解决办法：设置outline：none；
等高布局实现原理及代码
第一种等高布局
要求：
三栏等高布局
第一栏宽度是30%；
第二栏宽度是40%
第三栏宽度是30%
改变其中一栏的高度，另外两栏跟着改变
三栏就写3个容器，这几个容器分别是爷爷，爸爸，儿子
三个容器都写宽度是100%；
给爸爸写相对定位，让爸爸向左侧移动30%，露出爷爷的30%
给儿子写相对定位，让儿子向左侧移动40%，露出爸爸的40%
给儿子里面写三栏，第一栏宽度30%，第二栏宽度40%，第三栏宽度30%
给儿子里的三栏写浮动，让他们在同一行显示
给第三栏设置相对定位，让他和爷爷露出的部分重合
给第二栏设置相对定位，让他和爸爸露出的部分重合
给第一栏设置相对定位，让他和儿子露出的部分重合
由于给儿子里的三栏写过浮动，儿子的高度变为0，所以要给儿子清除浮动，给儿子设置float：left
儿子浮动了，爸爸的高度撑不起来了，给爸爸清除浮动，给爸爸设置：float：left
爸爸浮动了，爷爷的高度撑不起来了，给爷爷清除浮动，给爷爷设置overflow：hidden
这种等高布局不是看左中右三栏的高度，看的是是三个容器（爷爷爸爸和儿子）的高度
第二种等高布局
Padding和margin互怼的办法
Padding-bottom是多少，就要给margin-bottom：负的多少，盒模型的高度依然还是内容的高度
三栏等高布局
一共的宽度是1000px
第一栏宽度300px
第二栏宽度400px
第三栏宽度是300px
原理：
盒模型的高度=内容的高度（height）+上下的padding+上下的border+上下的margin
给三栏都设置浮动，让他们在同一行显示
给三栏都设置padding-bottom：9999px,和margin-bottom：-9999px
给他们的父元素设置overflow:hidden（一个作用是清除浮动，另一个作用是让超出盒子的部分隐藏掉）
问题：
给三栏加边框的话，下边框是看不见的
解决办法一、
单独写一个盒子，给盒子设置和下边框一样宽度和高度，相对于三栏的父元素定位
解决办法二、
做一个和下边框一样的图片
在大盒子外面包一个更大的盒子，给这个更大的盒子设置padding-bottom：露出下边框那么多
给这个更大的盒子插入背景图片
第三种等高布局
使用边框来模拟
只能设置两栏等高或者三栏等高
要求：
三栏等高布局
一共的宽度是1000px
第一栏宽度300px
第二栏宽度400px
第三栏宽度是300px
设置一个盒子的宽度是400px（第二栏的宽度）
给这个盒子设置左边框（宽度是第一栏的宽度300px）
给这个盒子设置有边框（宽度是第三栏的宽度）
给这个盒子设置三个子元素，分别是左中右三栏（注意顺序：中-左-右），给这三栏设置浮动
给第一栏设置margin-left：负的第一栏和第二栏的宽度（让第一栏和左边框重叠）
给第三栏设置margin-left：负的自己的宽度（让第三栏跑到第一行的位置）
给第三栏设置相对定位，定位到和有边框重叠的位置
给父元素清除浮动
代码部分：
等高布局1
Document
左左左左左左左左左左左左左左左左左左左左左左左左左左左左
左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左
左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左v左左
左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左
左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左
左左左左左左左左左左左左左左左左左左左左左左左左
中中中中中中中中中中中中中中中中中中中中中中中中中中中
中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中
中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中
中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中
中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中
中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中
中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中
中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中
中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中
中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中
中中中中中中中中中
右
等高布局2
Document
左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左
中左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左中左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左
右
等高布局3
Document
中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中中
左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左v
右
双飞翼布局实现原理及代码
三栏布局
第一栏宽度300px
第二栏宽度自适应
第三栏宽度200px
前4点跟圣杯布局一样
5.给中间的盒子再放一个子元素，给这个子元素设置padding：0 右侧盒子的宽度 0 左侧盒子的宽度或设置margin：0 右侧盒子的宽度 0 左侧盒子的宽度
6.别忘记给父元素清除浮动
7.给大盒子设置最小宽度 o
Document
中
左
右
圣杯布局实现原理及代码
三栏布局
第一栏宽度300px
第二栏宽度自适应
第三栏宽度200px
1.写结构，一个大盒子里放三个子元素，注意三个子元素的顺序：中-左-右
2.给三个子元素写float：left；
3.给左侧的盒子设置margin-left：-100%；
4.给右侧的盒子设置margin-left:-右侧盒子盒子宽度
5.给大盒子设置padding：0 右侧盒子宽度 0 左侧盒子宽度
6.给左侧盒子写定位，定位到距原来位置的左侧xxpx
7.给右侧盒子写定位，定位到距原来位置的右侧xxpx
8.别忘记给父元素清除浮动
9.给大盒子设置最小宽度
Document
中
左
右
纯css实现小箭头的思路及代码
.box{
width: 50px;
height: 50px;
background: #ccc;
position: relative;
overflow: hidden;
}
.one{
width: 0;
height: 0;
border-width: 25px 0 25px 25px;
border-style: solid;
border-color: transparent transparent transparent #000;
}
.two{
width: 0;
height: 0;
border-width: 25px 0 25px 25px;
border-style: solid;
border-color: transparent transparent transparent #ccc;
position: absolute;
top:0;
left:-5px;
}
精灵图的原理及优缺点
把小图标整理到一张大的图片上（只用于小图标，大图片不要使用雪碧图），通过使用background-image,background-repeat，background-position配合插入背景图片，background-position可以把背景图片移动到相应的位置，使盒子只露出背景图片相应的位置。
优点：（1）减少http的请求（2）减少图片命名上的困扰（3）更换风格方便
缺点：（1）需要设置和小图标一样宽高的盒子，插入背景图片的时候需要定位，制作起来麻烦（2）如果想要改变其中一个小图标，需要重新整合图片
网页中常见图片格式及特点
为什么要初始化css样式？哪些样式需要初始化
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
如Padding，margin，list-style，常用字号和行高，a标签去除下划线和设置字体颜色等，清除浮动，table表格的初始化
Display：none和visibility：hidden的区别
display:none：元素隐藏，不占位置。蜘蛛不爬取。
visibility:hidden：元素隐藏，占位置。蜘蛛爬取。
标签应该如何合理嵌套
合理嵌套HTML标签，ul和li是固定嵌套，ul的直接子元素必须是li标签，ol和li是固定嵌套，ol的直接子元素必须是li。Dl,dt，dd是固定嵌套，dl的直接子元素必须是dt和dd,dt和dd是兄弟元素，块标签可以套其他的标签，但是p标签除外，p标签不能嵌套其他的块标签，内联标签不能嵌套块标签(a标签特殊)，a标签不允许嵌套a标签和其他有交互作用的标签。
项目中你是如何做图片优化的
（1）起装饰性作用的作为背景图片，重要的图片用img标签
（2）选择合适尺寸的图片，降低图片的大小，大图切图处理，图片品质保存60-80。
（3）合成雪碧图，把小图标整理到一张大的图片上
块标签的特点：1.单独占一行，2.宽度，高度，内边距外边距等都可以设置，3.宽度默认是容器宽度的100%，4.可以容纳其他的块标签，内联标签，内联块标签。 内联标签的特点：1.在同一行显示，2.宽度高度，垂直方向的padding和margin不可以设置，3.宽度有内容撑开，4.不能容纳块标签（a标签特殊）。 内联块标签特点：1.在同一行显示，但是之间会有空白缝隙，2.宽度是本身内容的宽度，3.宽高，行高，内外边距都可以控制
html5的新特性
内容结构更加简洁
新增了结构元素
新增了表单相关内容
新增了音频和视频
Canvas
地图
拖放
对本地离线存储更好的支持
HTML5的兼容如何处理
创建元素，给元素转块
Header,footer{
Display:block;
}
引入html5shiv.js文件
Css3新增的选择器
属性选择器
a[src^=”https”]
a[src$=”https”]
a[src*=”https”]
结构伪类选择器
：first-child
：last-chid
：first-of-type
：last-of-type
：only-child
：only-of-Type
：nth-child(n)
：nth-last-child(n)
：nth-of-type(n)
：nth-last-of-type(n)
状态伪类选择器
：disabled
：enabled
：checked
Css3的新特性
什么是less
css预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
Less有什么好处
(1)结构清晰，便于扩展，适应性强，可读性强
(2)可以方便地屏蔽浏览器私有语法差异
(3)可以轻松实现多重继承
(4)完全兼容 CSS 代码
(5)减少重复的机械劳动，便于维护
常见的移动端布局有哪些方式？原理是什么？
（1）固定布局: 在里把viewport加好，根pc端一样，设想整个网页的宽度为320px居中即可，超出部分留白。
优点：思路沿用PC端，上手简单。
缺点：大屏幕手机及手机横屏时，两边是留白较大，且大屏幕手机下看起来页面会特别小，操作的按钮也很小，用户体验较差
（2）流式布局:重点就是使用百分比来代替传统px，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，。
优点：流动布局可以很好解决自适应需求
缺点：通过大量的百分比布局，会出现兼容性的问题，且更适用于对横向拉伸的设计元素，设计的时候存在很多局限性。
（3）响应式做法:根据目标用户的访问设备的主要类型做三种或四种布局。 每种布局有一个区间即可利用媒体查询@media，可以为不同分辨率的设备加载不同的样式。
优点：可以相对精确的控制显示效果
缺点：可能需要对同一个类书写不同的样式会导致代码比较繁复，后期维护困难。
rem布局 rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。 比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。
简述rem布局原理
rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。
比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。
rem布局实现步骤 ：
（1）设置页面的viewport 动态计算并设置html的fontsize值
（2）按照pc端布局方式正常布局，把px单位换算成rem（较小的长度比如1px的边框就不需要转换成rem,直接设置px）
补充：
一行文字变点状：
white-space:nowrap;
Overflow:hidden;
Text-overflow:ellipsis;
多行文字变点状：
1. display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:4;
Overflow:hidden;
2. .box{
line-height:20px;
Height:60px;
Overflow:hidden;
Position:relative;
}
.box:after{
Content:’......’;
Position:absolute;
Right:0;
Bottom:0;
Padding-left:7px;
Backgroud:#fff;
}
响应式：
一个网站可以兼容多个终端。
一个页面的设计和开发应当根据用户以及设备环境进行相应的响应和调。响应式布局可以根据屏幕的大小自动的调整页面的展现方式以及布局。
响应式时根据设备屏幕宽度不同适应调整标签显示布局，在每种设备屏幕宽度的设备下呈现的界面是不同的。
响应式原理：媒体查询是响应式的核心，它根据条件告诉浏览器如何为指定视图宽度渲染页面。
响应式优缺点：
优点：
1.减少工作量，设计代码，内容只需要一份，多出来的工作量只是js脚本，css样式做一些改变。
2.节省时间.
3.每个设备都能得到正确的设计。
缺点：
会加载更多的脚本资源
设计比较难精准定位和控制。
老版本浏览器兼容性不好。