- A+
Web一阶段面试题
1.简述 <!doctype> 的作用？
<!DOCTYPE> 声明叫做文档类型定义（DTD），声明的作用是为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。
- 五大主流的浏览器及其内核？
Chrome 内核 Blink
Safari 内核 Webkit
Opera 内核 Blink
Firefox 内核 Gecko
IE 内核 Trident
- b 和 strong（i 和 em）标签的区别？
b定义粗体文本,strong不仅加粗，还有加重语气在里面,有利于SEO优化。
i定义斜体字,em不仅倾斜，还有着重文本在里面,有利于SEO优化。
4.谈谈对语义化的理解？
语义化：根据元素的内容选择合适的标签
好处：
在没有 CSS 的情况下，页面也能呈现出很好地内容结构。
语义化使代码更具可读性，便于团队开发和维护。
语义化有利于用户体验
语义化有利于 SEO优化。
5.CSS 引入方式有哪些？
行内引入：css样式写在标签上。
内嵌引入： css样式写在style标签中，css样式是嵌入在当前页面中。
外链引入： 通过link引入外边的css文件。
6.CSS 基本选择器有哪些？
类型选择器 ： div{css样式}
类选择器 ： .类名{css样式}
ID选择器： #id名{css样式}
通配符选择器 ： *{css样式}
- 如何合并表格单元格？thead、tbody、tfoot 有什么用？
合并单元格 ：
跨行用rowspan
跨列用colspan
不管跨行还是跨列操作的都是单元格
thead、tbody、tfoot将表格分为三个部分：
thead 表格的头
tbody 表格的主体
tfoot 表格的页脚
结构更清晰，语义化更强。
- 常见表单元素有哪些？
1).input :标签用于搜集用户信息。
type类型：
text
password
radio
checkbox
submit
...
2) textarea标签定义多行的文本输入控件。
3) button:定义一个按钮。
4) select:定义一个选择列表，即下拉列表。 option:定义 下 拉 列表中的选项。
9.请简述一下盒模型的组成？
什么是盒模型：盒模型又称框模型（Box Model）,包含了元 素内容（content）、内边距（padding）、边框（border）、 外边距（margin）四个要素。
10.CSS 复合选择器有哪些？
后代选择器 选择器1 选择器2{css样式}
子代选择器 选择器1 > 选择器2{css样式}
交集选择器 选择器1选择器2{css样式}
群组选择器 选择器1,选择器2...,选择器n{css样式}
伪类选择器 选择器:伪类{css样式}
- 块级标签和行内标签的区别？
块元素 ： div,p,h1~h6,ul,li,ol,dt,dd,header,footer,nav...
特点 ：
独占一行，可以设置宽高
如果不设置宽，它的宽等同于父元素内容的宽
如果不设置宽，高是由内容撑开
完全支持盒模型属性
行内元素 ： a,b,span,del,em,i,label,sup,sup,time,mark...
特点 ：
不独占一行，并排排列
不能设置宽高，宽高是由内容撑开
不支持上下外边距
作为其他的行内元素或者文本的父盒子
- 浮动产生的问题？清除浮动的方案？
浮动产生的问题 ：父元素高度塌陷
子元素浮动，脱离了文档流，不占位置，不能把没有设置高度的父元素的高 度撑开，导致父元素的高度塌陷。
解决 ：
1）给父元素设置高
有点：代码简单，通俗易懂。
弊端 ： 不灵活
2） 额外标签法
是W3C推荐的做法是通过在浮动元素末尾添加一个空的 标签例如 <div style=”clear:both”></div>，或则其他标签br 等亦可。
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差。
3 ) 父级添加overflow属性方法
可以通过触发BFC的方式，可以实现清除浮动效果
可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示 需要溢出的元素
4) 使用after伪元素清除浮动
:after 方式为空元素的升级版，好处是不用单独加标签了
优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1
.clearfix::after{
content:””;
display:block;
clear：both;
}
- 请简述 等高布局、圣杯布局、双飞翼布局的实现原理。
圣杯实现的步骤：
● 外框左右固定 padding 值，预留左侧列和右侧列的列宽
● .center 宽度 100%，.left,.right 固定宽度
● 结构上.center,.left,.right 依次浮动在一行排列
● 移动.left 通过 margin-left:-100%配合相对定位 position:relative,left:-200px;移动至左侧列位置
● 移动.right 通过 margin-left:-200px;配合相对定位 position:relative;left:200px 移动至右侧列位置、
双飞翼实现的步骤：
● .centerbox 与.left,.right 浮动在一行排列
● .centerbox 固定宽度 100%，left,.right 固定宽度
● .centerbox 内部嵌套.center,不定宽度，通过定义左右 margin 留出左侧列的宽和右侧列宽
● 移动.left 通过 margin-left:-100%实现
● 移动.right 通过 margin-left:-200px;实现
等高布局：
实现步骤：
● 通过浮动创建一个正常的三列布局（不同列背景不同）
● 父容器清浮动
● 每一列固定 padding-bottom，同时指定一个 margin 负值，抵销 padding 的占位
● 父容器 overflow:hidden;
优缺点：
● 合理的控制 padding 和 margin 值
● 可以实现任意列等高布局
方法二：
原理：盒子层层嵌套，利用内层盒子高度变化，外层盒子的高度也会同步变化。
实现步骤：
● 准备三个负责背景的盒子.bg1,.bg2,.bg3，HTML 结构上层层嵌套
● 将.left,.center,.right 盒子放入最内层的背景盒子.bg3 里
● 最内层的盒子.bg3 清浮动
● 将.bg2,.bg3 相对于当前位置进行移动，形成三列背景效果
● 将.left,.center 通过 margin 负值移动到对应的背景处即可
14.简述 CSS 精灵图原理，及优缺点？
css sprites ： 精灵图 又叫雪碧图 ，适用于小图标
原理：将多个小图，拼合在一张大图上，利用background-position对背景图进行定位。
备注：精灵图中的background-position只有负值，没有正值 。
优点 ：
减少网页的http请求，从而大大的提高页面的性能
图片命名上的困扰
更换风格方便
缺点 ：
必须要限定容器大小符合背景图元素位置，需要计算
维护的时候比较麻烦，如果页面背景有少许改动，一般 就要改这张合并的 图片。
15.简述 BFC 规则及解决的问题？
BFC ： 块级格式化上下文,它是指一个独立的块级渲染区域，只有 Block-level BOX 参与， 该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
特性：
1)、内部的标签会在垂直方向上一个接一个的放置
2)、垂直方向上的距离由 margin 决定，属于同一个 BFC 的两个相邻标签的 margin 会发生重叠
3)、每个标签的左外边距与包含块的左边界相接触（从左 向右），即使浮动标签也是 如此。
4)、BFC 的区域不会与 float 的标签区域重叠
5)、计算 BFC 的高度时，浮动子标签也参与计算
6)、BFC 就是页面上的一个隔离的独立容器，容器里面的子 标签不会影响到外面标 签，反之亦然
解决的问题 ：
清除浮动
防止图文环绕
两栏三栏自适应
外边距折叠
- 文本溢出显示省略号如何实现？
1）单行文本溢出处理
P{
width:200px； /*限定盒子的宽度*/
overflow:hidden; /*给元素设置溢出隐藏属性*/
text-overflow:ellipsis; /*文本溢出显示省略号*/
white-space:nowrap; /*文本不换行*/
}
2 )多行文本溢出处理：利用WebKit的CSS扩展属性(只有-webkit内核才有作用)
P{
width:200px； /*限定盒子的宽度*/
overflow: hidden; /*给元素设置溢出隐藏属性*/
text-overflow: ellipsis; /*文本溢出显示省略号*/
display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
-webkit-line-clamp: 2;/*用来限制在一个块元素显示的文本的行数,这是一个不规范的属性，它没有出现在 CSS 规范草案中。*/
-webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式*/
}
17.为什么要初始化 CSS 样式？
因为浏览器的兼容问题，不同浏览器对某些标签默认值的解析是不同的，如果没对 CSS 初始化往往会出现不
同浏览器之间的页面显示差异。为了避免这种差异需要使用样式重置。
18.display:none 和 visibity：hidden 的区别？
display:none： 隐藏不占位置
visibity：hidden 隐藏占位置
19.你能想出几种方法让元素在页面中消失？
1）display : none
2）visibility ：hidden
3) opacity : 0;
4) 定位到浏览器窗口外边
5）定位，z-index为负值
6）transform:scale(0,0)
20.简述网页中常见图片格式及特点？
21.外边距合并
1）.父子关系的外边距合并
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，
即使父元素的上外边距为0，也会发生合并。
解决：
方法一：给父元素设置overflow：hidden
方法二 ： 给父元素设置上内边距或边框
2）.兄弟之间的外边距合并
相邻块元素垂直外边距的合并，
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。
这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
解决：
给任意一个盒子套一个父元素，给父元素设置overflow:hidden
22.哪些css属性可以继承？
1）、字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
line-height：行高
2）、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
color：文本颜色
text-decoration：文本装饰
23.html5 有哪些新特性？
新增结构标签 header nav footer hgroup figure section article aside mark time等
新增多媒体标签
新增智能表单
canvas绘图
SVG绘图等
- 如何处理 HTML5 新标签的浏览器兼容问题？
方法1 ： js引入html5shiv.min.js
方法2 ： js动态创建HTML5标签,创建出来的是行内标签，css转为块。
document.createElement(“标签名”)
25.CSS3 有哪些新特性？
CSS3 模块：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列 布局、用户界面。
26.CSS3 新增选择器有哪些？
结构伪类选择器
目标伪类选择器
状态伪类选择器
属性伪类选择器
...
- CSS3 中过渡和动画的区别和各自适用场景？
过渡动画 ： 需要触发条件（点击、鼠标悬停、聚焦等）
帧动画 ： 不需要触发条件，页面加载时执行，在遇到很复杂的动画那就用animation。因为animation可以定义关键帧。
28.说出你知道的 2D 或 3D 变形函数 ?
2D：
translate()移动元素
rotate()旋转元素
scale()缩放元素
skew()倾斜
3D：
translateZ() 3D位移函数
3D旋转的函数有：rotateX、rotateY、rotateZ、rotate3d
3D缩放：scaleZ()函数指定一个在z轴上的缩放
29.请解释一下 CSS3 的 flexbox（弹性盒布局模型）, 以及适用场景？
该布局模型的目的是提供一种更加高效的方式来对容器中的子元素进行布局、对齐和分配空间。
适用场景：弹性布局适合于移动前台开发，在Android和ios上也完美支持。
- css制作三角形
上三角
#triangle-up {
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
- 常见的移动端布局解决方案有哪些？
1）固定布局 采用固定像素
原理：设置好视口，跟PC端写法一样，版心设置320即可
优点：思路沿用pc端，上手简单
缺点：界面两侧留有空白，用户体验差，而且元素略小
2）流式布局
原理：用百分比代替固定像素，限制布局盒子的最大最小宽度
优点：实现自适应
缺点：只做宽度适配，高度会被拉伸
3）rem布局
原理：设置跟标签html字体的大小，利用媒体查询不同屏幕宽度下字体的大小，利用相对定位rem代替固定px
优点：宽高字体大小都能自适应，显示效果好
4）vw 布局:
确定基准值以常见的 750px 宽度的设计稿为例，那么根据 vw 单位的原理 100vw = 750px，即 1vw = 7.5px，
我们可以根据设计图中的 px 直接转换成对应的 vw 值进行布局，当然也可以直接写 px，借助插件插件自动计
算成需要的 vw。因为 vw 是相对于视口宽度的单位，当视口宽度发生变化，则元素大小随即发生变化。
- 简述 rem 布局原理？
rem是指相对于根元素的字体大小的单位,即根据html元素的fontsize来计算大小。
比如说html的fontsize大小为100px,一个div的width为1rem,则div的width大小为100px。
33.什么是响应式？
响应式布局可以根据屏幕的大小自动的调整页面的展现方 式，以及布局。在每种设备屏幕宽度的设备下呈现的界面是不同的。
34.响应式项目中常用到哪些核心技术？
视口标签设置
使用媒体查询适配对应样式
百分比布局
响应式字体设置
响应式图片
35.定位 （是否脱离文档流，参照物）
static： （静态）默认值。
relative :相对定位 ，不脱离文档流，是以自身原来位置来定位的
absolute:绝对定位，脱离文档流，以最近已定位的“父元素”来定位的，如果“父元素”没有定位，则以html为参照物定位。
fixed :固定定位：脱离文档流，以浏览器窗口为参照物定位的。
36.让块级元素水平垂直居中
方法一 ： position: fixed； left: 50%； top: 50%； margin-left: -盒子宽度一半； margin-top: -盒子高度的一半；
方式二： margin:auto 实现绝对定位元素的居中 弊端：兼容ie8以上浏览器 position: fixed? left: 0； right: 0； top: 0； bottom: 0； margin: auto 备注： 如果盒子在浏览器窗口中水平垂直居中 用固定定位 如果盒子在父元素中水平垂直居中用子绝父相。
