前端面试题2（html/css）

一、图片间隙问题，如何解决?
两个图片之间和图片下方多出的空白间隙可以使用以下方式解决。
方法 1：将图片显示为块：解决下方间隙
img{
display:block;
}
方法 2：改变图片的 vertical-align :解决下方间隙
img{
vertical-align:middle;
}
除了 middle值，还可以设置为 top| bottom 等
方法 3：设置图片父级标签的 font-size:0;line-height:0; 水平间隙，图片下方间隙都能解决
.imgwrap{
font-size:0;
line-height:0;
}

二、说说常见浏览器兼容问题(至少3个)?
ie8中图片边框问题

Ie8 中图片放在a标签中显示边框。

解决方案:

 img{
border:none;
}

ie8中背景复合属性写法问题

如下代码，在标准浏览器中均能正常显示背景图片，但是在ie8中图片显示异常。

.bg{ 
background:url(“./images/bg.jpg”)no-repeat center;
}

解决方案:在url和no-repeat之间加上空格

.bg{ 
background:url(“./images/bg.jpg”) no-repeat center;
}

其他ie低版本兼容性问题了解

1.在 IE6 及更早浏览器中定义小高度的容器？

解决方案：

#test{
overflow:hidden;
height:1px;
font-size:0;
line-height:0;
}

2.IE6 及更早浏览器浮动时产生双倍边距的 BUG ？

解决方案：针对 ie6 设置该标签的 display 属性为 inline 即可

#test{
float:left;
_display:inline;
}  

3.IE7 及更早浏览器下子标签相对定位时父标签 overflow 属性的 auto|hidden 失效的问题

解决方案：给父标签也设置相对定位 position:relative;

块转内联块 ie7- 不在一行显示问题

解决方案：

div {
 display:inline-block;
*display:inline;
*zoom:1;
}

IE7 及更早浏览器下当 li 中出现 2 个或以上的浮动时，li之间产生的空白间隙

解决方案：将垂直对齐方式设置为除了 top 值，还可以设置其它值如 middle | bottom 等

li{
vertical-align:top;
}

三、简述精灵图的原理及优缺点?
英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就
是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，
“background- repeat”，“background-position”的组合进行背景定位，background-position 用数字能精确的定位出背景图片的位置。适用于一般小图标，不适合大背景大布局背景

优点：

（1）减少网页的 http 请求，从而大大的提高页面的性能

（2）图片命名上的困扰

（3）更换风格方便

缺点：

（1）必须要限定容器大小符合背景图元素位置，需要计算

四、如何使用定位实现盒子水平垂直居中的关键代码?
一、定位+margin负值，盒子有宽高
.father{ position:relative;}
.son{position:absolute;left:50%;margin-left:-小盒子宽度的一半，top：50%；margin-top：-小盒子高度的一半}

二、定位+margin：auto，盒子有宽高
.father{ position:relative;}
.son{position:absolute;left：0；top：0；right：0；bottom：0；margin：auto}

五、你能想出几种方法让元素在页面中消失?
1.display:none;（将整个元素隐藏，并且不会占据任何的空间）

2.visibility:hidden;（元素的内容不可见，但是元素仍然保持原来的位置和大小）

3.设定它的位置,让其消失不见：

position:absolute或fixed，用z-index遮盖。

4.overflow:hidden将要隐藏的元素移除父元素的范围。

5.设置元素为透明：即opacity:0；

6.将元素的font-size，line-height,width,height设置为0；（虽然这些方法很赖皮。）

7.设置元素的transform的translateX（Y）的值为-100%；

六、如何使用border实现小三角?
/向下的三角/
.trangle_down{
width:0;
height:0;
overflow:hidden;
font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 /
line-height: 0; / 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
border-width:10px;
border-style:solid; /ie6下会出现不透明的兼容问题/
border-color:#f30 transparent transparent transparent;
}

七、可以使内联元素支持宽高方法有哪些
display:block\inline-block
float:left\right

八、单行和多行文本溢出显示省略号如何实现
单行文本显示省略号
div{
width:200px; /限定宽度/
white-space:nowrap; /* 文本不换行*/
overflow:hidden; /给元素设置溢出隐藏/
text-overflow:ellipsis; /文本溢出显示省略号/
}
多行文本溢出隐藏
div{
width:200px; /* 限定盒子的宽度 /
display:-webkit-box; / 将对象作为弹性伸缩盒子模型显示*/
-webkit-line-clamp:3; /* 用来限制在一个块元素显示的文本行数*/
-webkit-box-orient:vertical; /* 设置或检索伸缩盒对象的子元素的排列方式*/
overflow:hidden; /给元素设置溢出隐藏/
text-overflow:ellipsis; /文本溢出显示省略号/
}
利用伪元素模拟溢出显示省略号
div{
border: solid;
width:500px;
height: 90px; /限定高度/
line-height: 30px; /行距与高度要成比例/
position: relative;
overflow: hidden;
}

        div:after{
            content: '...';
            position: absolute;
            right:0px;
            bottom:0px;
            padding-left:7px;
            background-image:-webkit-linear-gradient(left,tansparent,#fff 60%);
           background-image:-ms-linear-gradient(left,tansparent,#fff 60%);
           background-image:-o-linear-gradient(left,tansparent,#fff 60%);
             background-image: -webkit-linear-gradient(left,#fff,#fff); 

        }

九、简述CSS盒模型?
盒模型又称框模型（Box Model）,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；
元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。