第一阶段面试问题
1.样式引入的方式有哪几种？
内部样式 <style></style>
外部样式 <link rel="stylesheet" href="路径"> 推荐使用
<style>@import url(路径);</style>（了解即可）
内联样式 <div style="color:red;"></div>
2.单行文本超出显示省略号效果怎么实现？
width: 200px; 第一步，给宽度
white-space: nowrap； 第二步，让文本一行显示
overflow: hidden; 第三步，超出部分隐藏
text-overflow: ellipsis; 第四步，添加省略号
3.什么是css的继承？请写出可以被继承的10个属性。
就是给父元素添加的属性，子元素自动就有了。
文本类型、列表类型; width、height、color、font-size、line-height、list-style
text-align、text-decrationul、ol、dl、
4.什么是样式的层叠？(权重)
在css样式的显示中，权重的值越大，样式就越生效
1.类型(标签)选择器 1 div{}
2.class选择器和伪类选择器 10 .box{} :hover{}
3.id选择器 100 #a1{}
4.内联样式 1000 <div style="color:yellow;"></div>
5.包含选择器 所有的权重之和 .box a{} #a1 .box{}
小结：内联样式1000 > id选择器100 > class选择器10 > 标签选择器1
5.W3C标准盒模型包含哪些内容？
外边距margin 边框border 内边距padding 内容content
6.用css边框写一个箭头超右的三角形？
盒子加边框,边框给宽,上右下的边框都透明
7.元素类型分为哪几种？分别有什么特点？
一、块状元素 (block) 大标签
特点：
1.独占一行或者一块区域，是竖着排列的；
2.默认情况下，给元素可以添加宽高、margin和padding；
3.一般可以作为其他的元素的父元素使用。
二、行内元素 （inline） 小标签
特点：
1.默认情况下，是挨着排列，且有默认的间距；
2.默认情况下，添加宽高无效。添加margin和padding时，只有左右生效，上下不生效
三、行内块元素（inline-block） 特殊标签
特点：
1.是行内元素和块元素的综合特点，并且自己也有默认间距
2.有一个私有属性 vertical-align:top/middle/bottom; 垂直对齐方式
该属性的作用：
2.1可以用来解决图片向下撑大3像素的bug;
2.2可以用来配合其他属性(line-height)一起实现垂直居中效果。
四、可变元素，根据某一些Css属性，改变元素的类型
比如，浮动属性
8.图片向下撑大3px的bug怎么解决？
解决方案：
1.给图片本身添加vertical-align:top/middle/bottom;
2.给图片本身添加display:block;
3.给图片或者图片的父元素添加float:left;
4.给图片父元素或者body添加font-size:0;
9.未知大小的行内块元素怎么实现水平垂直居中效果？
首先在行内块元素外部的盒子里面使用text-align="center"实现水平居中。然后给外部盒子加上line-height，
行内元素加上vertical-align：middle;和行高一起实现垂直居中。
10.实现一个元素消失和出现的方法有？
1、display：none；（让元素彻底消失）
display：block；（让元素出现）
2、opacity:"0";
opacity:"1";
3、visibili : hidden ;
visibility：visible
11.定位的属性值有哪些？分别有什么特点？
定位的属性值一共有5个
一、绝对定位 position:absolute;
特点：
1.文档流 脱离文档流，也就是飘了，不要自己原来的位置
2.参照物
2.1默认情况，是围绕着浏览器的第一屏做位置移动
2.2围绕着父元素做位置移动，父元素必须添加定位(最好是相对定位)设置
3.层级关系 z-index:0/auto; 值越大，就在最上层
二、相对定位 position:relative;
特点：
1.文档流 没有脱离文档流，没有飘，占位置在
2.参照物 是围绕着自己原来的位置做移动
3.层级关系 z-index:0/auto; 值越大，就在最上层
三、固定定位 position:fixed;
特点：
1.文档流 脱离文档流，也就是飘了，不要自己原来的位置
2.参照物 是围绕着整个浏览器做位置移动
3.层级关系 z-index:0/auto; 值越大，就在最上层
四、粘性定位 position:sticky; 用来做吸顶效果的
特点：
1.文档流 没有脱离文档流，没有飘，占位置在
2.参照物 是围绕着整个浏览器做位置移动
3.层级关系 z-index:0/auto; 值越大，就在最上层
五、定位的默认值 position:static;
关于定位使用的心得：
1.定位最好不用作布局；
2.一定要给定位的元素，最好添加宽高；
3.定位一定要添加方位。
12.一个宽高为200*200的小盒子在一个宽高500*500大盒子里面做水平垂直居中，请写出你知道的实现方法？(6种)
方法一、纯margin + overflow:hidden;
方法二、纯padding
方法三、纯定位
方法四、display:inline-block + text-align:center + vertical-align: middle
方法五、定位 + margin取负值的方法
方法六 定位 + margin:auto;
方法七 定位加transform（更加高级）position:relative（给父级元素添加） position: absolute; left: 50%; top:50%;
transform: translate(-50%,-50%);/*自身宽高的一半*/
方法八 父级元素变成弹性盒display:flew,flew-wrap:wrap;justify-content: space-between;align-content: center;
13.透明属性是什么？它的兼容写法是？
opacity:0.3;filter: alpha(opacity=30);
14.高度塌陷的问题怎么解决？：就是所有的子元素都浮动了，父元素没有高度的情况下，会出现高度为0。
高度塌陷的问题：就是所有的子元素都浮动了，父元素没有高度的情况下，会出现高度为0。
解决方案：
1.给父元素添加height 只使用与高度固定的布局,不适合于高度自适应的布局
2.给父元素添加 overflow:hidden/auto/scroll;可以动态获取子元素撑开的高。遇到定位就不好用了。
3.给浮动元素的下方添加一个空的块元素，并且给这个空的块元素添加clear:both; 会造成代码的冗余。
4.万能清除法。给高度塌陷的父元素添加公共的类名即可。
.clear:after{
content:"";
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
.clear{
zoom:1;
}
5.给父元素添加float 不推荐使用
6.给父元素添加display:table; 不推荐使用，会产生未知bug
15.margin-top的兼容问题:给子元素添加margin-top会导致父元素整个向下移,怎么解决?
1.给父元素添加border-top:1px solid transparent;
2.给父元素添加overflow: hidden;
3.给父元素添加浮动float: left;
4.把子元素的margin-top改成父元素的padding-top,并减掉移动的height.
16.五大主流浏览器是那些,内核是什么?
1、IE浏览器（Internet explorer） Trident
2、火狐浏览器（Firefox） Gecko
3、谷歌浏览器（Chrome） Webkit/Blink
4、苹果浏览器（Safari） Webkit
5、欧朋浏览器（Opera） Blink
17.什么是BFC？
BFC (Block formatting context)块级格式化格式化上下文，它是一种独立的渲染区域，只有Block-level-box参与，它规定了内部的Block-level-box如何布局，并且与这个区域外部毫不相干。
18.BFC触发条件有哪些呢？
html根元素
float属性不为none（浮动）
position为absolute或fixed （绝对定位)和（固定定位）
display为inline-block（行内块）, table-cell（单元格）, table-caption（表格标题）, flex（, inline-flex
overflow不为visible
19.BFC的特性能解决什么问题？
1.解决margin上下重叠问题；
2.可以做两栏布局；
3.解决高度塌陷问题。
20.什么是两栏布局？怎么实现？
两栏布局:两个盒子,左边固定,右边自适应
方法一: 左边给宽固定,右边不给宽,在父元素上添加overflow:hidden
方法二: 左边给宽固定浮动,右边margin-left左边盒子的宽
方法三: 需要设置一个父元素 父元素不设宽高display：flex；左边盒子设宽，右边盒子flex：1；（把父元素剩下的均给右边盒子）
21.怎么解决margin上下重叠问题？
margin的重叠问题，当竖着的2个盒子之间都用margin调整上下间距的时候，会发生margin的重叠问题，margin值大的覆盖margin值小的。
问题解决：就是给任何1个盒子添加一个父元素盒子，让父元素去触发BFC。建议添加的属性：display:inline-block或者overflow:hidden/auto/scroll;
22.H5有什么特点？请写出H5新增加的标签？至少6个。
代码结构清晰,方便阅读,有利于效率的提升
(1)section 内容区块 (2)article 页面文章 (3)aside 页面文章之外的(4)header 头部 (5)footer 尾部 (6)nav导航 (7)figure图片(8)embed (9)mark高亮显示文字 (10)video视频 (11)audio音频 (12)datalist列表 (13)canvas画布 (14)hgroup对标题元素进行分组
23.怪异盒是怎么产生的？怪异盒模型的特点是什么？怎么变成怪异盒？
因为DOCTYPE(声明)的丢失,在IE6及以下会产生
给怪异盒模型添加padding跟border不会使其的宽高发生改变
box-sizing : border-box;
24.什么是图片整合技术？有什么优势？
前端图片常用格式：.jpg .png .gif
将前端网页中所出现的图片整合到一张精灵图上
从性能优化上讲,原本需要请求很多次,现在一次就可以完成,使网页显示的更快,使用户体验更好
25.请问你会哪些css选择器？
基本类型选择器、伪类选择器(动态伪类、结构伪类等)、层次选择器(后代、子代)、属性选择器。
26.浏览器的私有属性前缀是什么？
IE -ms-
火狐 -moz-
谷歌和苹果 -webkit-
欧朋 -o-
div{
/*优雅降级*/
transition: 1s;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition:1s;
-o-transition: 1s;
/*渐进增强*/
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
}
27.CSS3S属性有什么优势?请说出8个CSS3属性
text-shadow box-shadow word-break word-wrap background-size border-radius background-image:linear-gradient()/radial-gradient() transition
28.transition和animation有什么区别和共同点？
transition需要触发
animation不需要触发就可以动
相同点：都是随着时间改变元素的属性值
不同点：transition需要触发一个事件（hover或click）才会随时间改变属性,只能实现一种动画到另一种动画的效果。
animation不需要触发任何事件也可以随时间改变来改变元素的属性值，从而达到一种动画效果，可以通过关键帧实现多个动画的效果。
29.请问transform:translateX(100px) rotateZ(90deg);和transform: rotateZ(90deg) translateX(100px);实现的效果是一样的吗？
不一样,一个是先沿着x轴移动100px在旋转90deg,另一个是先转90deg在沿着旋转后重新定义的轴移动100px
30.请问三栏布局的实现方法有哪些？
31.移动端布局有哪些方式？
浮动布局、弹性盒布局、定位布局、等比缩放布局、百分比布局、混合布局(% + px等)等。
32.什么是响应式网页？
