一、html
1.常用浏览器及内核
- trident内核：IE浏览器及国产浏览器
- webkit：谷歌浏览器、Safari及国产双核浏览器
- Gecko:Firefox
- Blink:opera、chrome
2.前端页面构成
- html:超文本标记语言
- css:层叠样式表
- javaScript:脚本语言
3.什么是HTML
- html是超文本标记语言
- html是使用标记来描述网页的一种语言
- html是一种语法简单、结构清晰的语言
4.<!doctype> 的作用
告诉浏览器该文档的一个版本信息，让我们浏览器的解析器知道应该用哪种规范来解析我们的文档。必须写在HTML文档的第一行
5.列举常用的块级标签、行级标签、行块级标签
- 行级元素 inline-level
常用元素：span、em、i、b、strong、sub、sup、del、a
特点：默认情况下，宽度随内容的变化而变化；
默认高度由内容撑开；
不会独立成行，相邻的行内元素排列在同一行中，直到一行拍不下，才会换行；
换行和空格会被解析；
具有部分盒模型特征：宽高无效，边框保留
使用：一般用来容纳文本和其他内联元素，通常被包含在块元素中使用。 - 块级元素 block-level
常用元素：div、p、h1-h6、ul、li、ol、dl、dt、dd
特点：默认宽度撑满父元素的宽度；
默认高度有内容撑开；
默认元素垂直布局；
具有全部的盒模型特征。
使用：块级元素中，可以添加块级元素，行级元素，行内块元素； - 行内块元素 inline-block
常用元素：img、input
特点：
具有块级标记的特征：可以设置宽高、内填充、外间距；
具有行级标记的特征：默认横向显示，直到一行排不下，才会换行；换行和空格会被解析
6.什么是HTML语义化
根据页面内容结构，选择合适的标签，便于开发者阅读和写出更优雅的代码，便于浏览器、搜索引擎解析，有益于SEO，便于团队开发和维护。例如：标题用h1~h6，段落使用P标签
7.语义化的好处
- 在没有CSS的情况下，页面也能够呈现出较好的内容结构；
- 语义化能使我们的代码更具有可读性，便于团队开发和维护；
- 语义化有利于用户体验；
- 语义化有利于SEO搜索引擎优化；
8.样式的引用方式
- 行内样式——内联式
- 内部样式——嵌入式（内嵌式）
- 外部样式——外链式，引入扩展名为.css的文件
9.get提交和post提交的区别
- get方式：将数据作为URL的一部分发送给服务器；安全性比较低；有长度限制；请求的数据可以被缓存，能够保留在浏览器的历史记录中；能作为书签被收藏；
- post方式：将数据隐藏在http数据流中进行传输；安全性比get方式高；对数据的长度没有限制请求数据不会被缓存，也不会在浏览器，历史记录中保存，更不会作为书签被收藏
10.margin值会造成的问题
- 父子关系外边距塌陷问题：元素嵌套关系时，子元素的margin值会叠加给父元素
现象：给子元素设置外间距，会和父元素的外间距合并，最终会表现出其中较大的外间距的值
原因：父级盒和子级盒公用一个上外间距导致的
解决方法：
给父元素设置边框或设置内填充；
给父元素添加overflow:hidden属性，触发BFC，改变父元素的渲染规则 - 兄弟关系的外边距叠加问题——元素并列关系，垂直方向上相邻的margin值相遇，会出现叠加
现象：上一个盒子设置下外间距，下一个盒子设置上外间距,
两个值相同，取当前值；两个值不同，取较大值
原因：上下两个兄弟关系的盒子，公用一个外间距区域
解决方法：给两个盒子都添加一个父盒子，父盒都添加overflow:hidden属性
11.浮动特性
(1)浮动是元素脱离正常文档流;
(2)浮动元素的层级可以提升
(3)浮动可以使行级元素支持宽高设置；
(4)浮动元素可以使块级元素由内容撑开；
(5)元素添加浮动之后，不占位，父级盒高度为0
12.浮动带来的影响
元素浮动以后，脱离正常文档流，导致父元素高度塌陷，父元素高度为0，会影响父元素统计的后续元素的正常布局
13.清除浮动方法
（父高、父浮、父over、并div、clearfix）
(1)为浮动元素的父级盒添加固定的高度——不够灵活
(2)为浮动元素的父级盒加上浮动——会产生新的浮动问题
(3)为浮动元素的父级盒设置overflow属性，属性值可以使hidden|scroll|auto可能导致内容显示不完全；代码简洁
(4)在浮动元素之后，跟浮动元素呈并列关系的位置，加一个空的div，在空div上添加一个clear:both;——代码冗余；通俗易懂、书写方便
(5)推荐方式：给浮动元素的父级盒加一个类名.clearfix
.clearfix{*zoom:1;}//IE6,7兼容
.clearfix::arfer{
content:"";
display：block;
clear:both;
overflow:hidden;
height:0;
}
不会在结构上产生冗余代码，可以重复使用，符合闭合浮动思想，结构语义化正确
14.定位属性
- 静态定位position:static;默认值
相当于没有定位，元素会出现在正常文档流中
相对定位position:relative;相对于本身的位置进行定位（本身的位置还在）
一般用于元素的微调，作为绝对定位的参考元素
特点：
（1）不会影响元素本身的特性
（2）相对定位依然占位
（3）如果没有定位偏移量，对元素本身没有任何影响，如果定义了定位偏移量，相对于原来位置发生偏移
（4）能够提升层级 - 绝对定位position:absolute——相对于最近的定位父元素定位（定位父级，添加了绝对相对）
特点：
（1）使元素完全脱离正常文档流，不占位
（2）有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移
（3）使行级元素支持宽高；没有设置宽度的块级元素，宽度自适应。
（4）提升层级 - 固定定位：position:fixed；——相对于浏览器窗口进行的定位
特点：
（1）元素定位后脱离正常文档流，不占位；
（2）始终相对于浏览器的四个角为原点，进行定位设置，不会随页面内容滚动而滚动；
（3）使行级元素支持宽高，没有设置宽度的块级元素宽度自适应
（4）提升层级
15.定位实现盒子的水平垂直居中——绝对居中
1）margin负间距：
必须知道居中盒的宽度和高度
为居中盒设置绝对定位；
距离定位父级左边框和上边框的距离设置50%；
将预算分别左移和上移，移元素宽度和高度的一半。
2）margin:auto；绝对定位元素的居中
必须知道知道居中盒的宽度和高度；
为居中盒设置绝对定位；
分别设置left：0；right:0; top:0; bottom:0;
为居中盒这是margin:auto；
3）transform:translate();实现绝对定位元素的居中
.box{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: yellow;
}
16.图片下方间隙问题
（1）将图片转成块级元素，解决下方问题；
（2）为图片元素设置垂直对齐方式，解决下方间隙问题；
vertical-align: top|middle|bottom；
（3）图片的父元素设置高度，并添加溢出隐藏（overflow：hidden）；
（4）为图片的父元素设置font-size或line-height属性，属性值为0，会对子元素中的字造成影响，解决下方间隙问题：
17.文本框和按钮不对齐现象
为input元素设置vertical-align属性；
为input元素设置float属性，overflow：hidden；
18.显示隐藏
1）display属性
display：none;元素的隐藏，将整个元素隐藏，不占用任何内存空间
display：block；元素显示，
2)visibility属性
visibility:hidden;元素内容不可见，只隐藏内容，占位空间仍然保留
visibility:visible;元素可见
3）设置元素位置，让其消失
4）overflow属性,将要隐藏的元素移出父元素的范围
5）opacity属性，实现元素的不可见,占位依然存在
19.两列自适应布局
html结构中——左右两个盒子；
左边固定宽度，右侧宽度100%；
为左侧盒子设置position：absolute;
右侧盒子添加子盒设置padding-left，属性值为左侧盒子的宽度。
20.圣杯布局——三列布局，左右宽度固定，中间宽度自适应
html结构中——先写主体内容后侧边栏；
两个固定宽度，中间内容宽度设置width：100%；
主体内容和左右侧边栏之间分别加float：left;
左侧设置margin-left：-100%;将左侧拉到最左边，右侧设置margin-left:-右侧边的宽度；
将中间露出了：在外面的大盒子上设置padding值，padding：0，右侧边的宽度 0 左侧边的宽度；
分别为左侧边和右侧边设置position:relative；左侧设置left:-左侧边的宽度；还原左侧边。右侧边设置right:-右侧边宽度；还原右侧边
21.双飞翼布局——三列布局
两端宽度html结构中——先写主体结构后侧边，有主体内容
两侧固定宽度，中间宽度设置width：100%；
主体内容和左右侧边分别加浮动float:left;
左侧边设置margin-left=100%,;左侧拉到最左边；右侧设置margin-right:-右侧边宽度；
在主体内容盒的子盒上设置margin：0 右侧边的宽度 0 左侧边的宽度；将中间内容露出了
22.等高布局
(1)利用内外间距相抵消，为父元素设置overflow:hidden;
注意：
每一列使用padding撑开背景颜色，每一列使用padding撑开的多余的占位，用margin负值取消；
父级盒设置溢出隐藏
优点：结构简单，兼容所以的浏览器
缺点：不是真正的等高，是伪等高，需要合理控制margin和padding值
(2)利用内容撑开父元素的特点给每一列添加相对应的容器，进行相互嵌套，并且在每个容器中添加背景颜色，
三个嵌套的div负责背景，三列放在最内侧的div盒子中；
通过相对定位分配三列背景位置;
通过margin负值，将内容移到对应的背景位置；
父元素设置溢出隐藏；
优缺点：扩展性好，可以实现自适应，结构嵌套复杂；
(3)利用边框模拟背景，实现等高的显示效果
左右边框颜色、内容背景分别复杂三列的背景颜色；
通过margin值，同步列的位置；
特点：扩展性差，三列+的布局不适用
23.css sprites、精灵技术、雪碧技术
将一堆小图整合到一张大图上，通过background-imgage、background-repaet属性显示图片，并且使用background-position属性实现图片的精确显示，减少服务器对图片的请求数量。
24.什么是BFC
块级格式化上下文，web页面可视化css视觉渲染的一个部分，是页面中一个独立的渲染区域。用于决定块盒子的布局和浮动相互影响范围的区域，可以改变父元素的渲染规则。
25.BFC特性
- 内部的元素会在垂直方向上一个接一个放置；
- 垂直方向上的距离由margin值决定，属于同一个BFC的两个相邻元素的margin值会重叠；
- 每个元素的左外间距与包含块的左边界相接触，浮动也是如此；
- BFC区域不会与浮动元素区域重叠；计算BFC高度时，浮动子元素也会参与计算；
- BFC是页面上的一个隔离的独立的容器，容器中子元素不会影响到外面元素，反之亦然。
26.BFC解决的问题
（1）外间距折叠问题——避免margin值叠加问题
（2）自适应两栏或三栏布局
自适应两栏布局——左侧固定宽度，右侧不设宽度（或者宽度100%），则右侧宽度为自适应，随浏览器窗口宽度的变化而发生相应的变化
自适应三栏布局——左右宽度固定，中间不设宽，中间宽度自适应，随着浏览器窗口的变化而发生相应的变化
（3）防止字体环绕
（4）清浮动
27.在页面中常用的图片格式
- jpg格式——jpeg:不支持透明，色彩丰富；适合复杂颜色及形状，网页中的高清大图
文件相对较小；有所压缩，反复保存，图片质量会下降。 - gif格式：支持透明和不透明的效果，色彩丰富，支持动画；适用于色彩单一的图标、动画图片
文件小，没有兼容性问题；只支持256种颜色 - png格式：支持透明、不透明、半透明效果；适用于网页中的小图，存在半透明效果的图片
png8:支持半透明，功能和gif相似
png24：色彩丰富，对半透明效果的细节显示较好，IE6中不支持
无损压缩；不支持动画，色彩丰富，图片尺寸较大 - webp格式：文件较小，支持有损压缩和无损压缩，支持动画、透明；浏览器的兼容性不好；主要适用于支持webp格式的app和webview。
28.兼容性问题
8图边、8背复,8及下透明度,7子相父over失效、7及下块转行不一行、7及下li超2浮动li空间隙,6及下小高19px、浮动双边距,低指针
IE8兼容问题：
1）IE8下图片的边框问题：
img{
border:none
}
2)IE8中背景复合属性写法问题
background：url() no-repeat 0 0;
3)IE8低版本浏览器中图片透明度设置问题
filter:Alpha(opacity=50)
4)IE低版本浏览器中鼠标指针形状为手型，并兼容所有浏览器
cursor:pointer鼠标指针为手型
cursor:crosshair 鼠标指针形状为十字
cursor:text 鼠标指针形状为文本I形
cursor:wait 程序正忙
cursor:move 四个方向箭头，对象可移动
cursor:help 箭头+问号，可用的帮助信息
cursor:default 默认光标
cursor:auto 默认
5)在IE6及更早版本的浏览器中定义小高问题：
font-size:0
line-height:0
6)在IE6及更早版本的浏览器中浮动产生的双边距问题：
子盒display:inline;
7)IE7中子元素相对定位，父元素overflow:hidden|auto 失效问题：
父级盒：position：relative
8)在IE7及更早版本的浏览器中，块级元素转行块元素，不在一行显示的问题:
*display:inline-block;
*zoom:1;
9)在IE7及更早版本的浏览器中，在li中出现2个或两个以上的子元素有浮动，li之间会产生空白间隙问题：
vertical-align:top|middle|bottom
29.css Hack(了解)
1)条件级Hack
if条件：是否为IE、大于(gt)、大于等于(gte)、小于(lt)、小于等于(lte)、非指定版本(!)
2)属性级Hack
_:选择IE6及以下版本
*:IE6、IE7
\9:IE6+
\0:IE8+、Opera15及以下
_background_color:#f0f;
3)选择级Hack
*html IE6及更早版本浏览器中
*+html IE7
*html .box{
background:pink;
}
30.HTML5的新特性
1）在网页上绘制图形的canvas元素
2）多媒体相关video和audio元素
3）对本地离线存储的更好支持
本地存储：提供了两种在客户端存储数据的新方法
localStorage 没有时间限制的数据存储
sessionStorage 针对Session的数据存储
离线应用：用可以应用离线的时候查看网站信息
4）新增的语义化的标签和表单控件
31.css3中新增特性
- 选择器
- border-radio属性
- css3背景属性:background-image、background-size、background-origin、background-clip
- css3渐变属性：线性渐变 linear-gradient；径向渐变：radial-gradient
- transition属性：过渡属性
- css变形——transform
- 帧动画：animation:animation-name animation-duration
- 弹性盒子–flexBox：设置为flex布局之后，子元素float、clear、vertical-align属性都会失效
- calc()函数：动态计算长度值的函数，css3新增的函数
- 媒体查询
- Grid网格布局
32.常见移动端布局方案
1.流式布局：宽度使用百分比代替px，高度使用px固定,
优点：可以很好的解决自适应需求
缺点：实际效果可能会不协调，设计存在局限性
2.rem布局：添加viewport,动态修改html的font-size属性 页面中元素尺寸单位使用rem
3.vw布局：vw和vh视口宽和高，将屏幕平均分成100份，1vw=屏幕宽度的百分之一，不需要js
4.flexible.js + rem :将屏幕分成10份，只需要确定好当前设备的html标签的font-size属性值即可
5.响应式布局：一个网站能够适配多个终端
33.什么是媒体查询
根据设备显示器的特性为它设置css样式，css2针对不同媒体类型，c3针对不同设备
媒体查询可以检测的内容：viewport的宽度和高度、设备的宽度和高度、设备的方向、分辨率
34.移动端特殊处理
1）超小字体处理——transform:scale();
2)动画定义3D启用硬件加速——开启GPU硬件加速模式
从CPU-GPU
-webkit-transform:translate3d(0,0,0)
transform:translate(0,0,0);
3）圆角bug:部分Android手机圆角失效
background-clip:padding-box;
4)Input的placeholder会出现文本位置偏上的情况：
在input输入文本垂直居中的情况下，给placeholder设置padding-top，不设置行高
35.设备像素、独立像素和css像素
1）设备像素——物理像素（屏幕的最小颗粒）
设备固有属性，是真实存在的，不会改变
2）设备独立像素——独立像素，逻辑像素
操作系统定义的像素单位
3）css像素：
css像素和独立像素的关系：
缩放比例=css像素的边长/独立像素的边长
在缩放比例为100的情况下，一个css像素为一个独立像素
36.什么是响应式布局
一个网站能够适配多个终端，能够实现不同屏幕分辨率的终端上都能够实现较好的显示效果，而且不需要为每个终端定制一个特定的版本。
37.响应式优缺点
优点：一站适配所有终端；减少了工作量；节省时间；每个设备都能得到较好的设计
缺点：会加载更多的样式和脚本资源，设计难于精确控制；老版本的浏览器中兼容性不好
如果您在浏览过程中发现了问题，请不吝赐教，您的赐教，我的修改，他的进步。
面试题，持续更新
扫一扫
2176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
