1.网页的三层结构有哪些
结构（html 或 xhtm 标记语言）表现（css 样式表）行为（js）
2、请简述媒体查询
媒体查询扩展了 media 属性, 就是根据不同的媒体类型设置不同的 css
样式，达到自适应的目的。(在指定的设备上使用对应的样式替代原有的样式。)
3、Rem 缺点
比如：小说网站，屏幕越小的移动设备如果用了 rem 肯定文字就越小，
就会导致看文章的时候特别费眼
4、常见的兼容性
不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎
所以浏览器兼容性问题一般指：css兼容、js兼容
参考文章
css兼容
- 不同浏览器的标签默认的margin和padding不同
解决方案：*{ padding: 0; margin: 0;}
对于样式的差异，在项目中去创建一个reset.css文件，进行重置样式 - css3新属性要加浏览器前缀兼容早期浏览器
-moz- 火狐浏览器的私有属性
-ms- ie浏览器的私有属性
-webkit- 苹果、谷歌浏览器的私有属性
-o- 欧鹏浏览器的私有属性`
哪些css3属性需要加：
定义关键帧动画 @keyframes
css3中的变形（transform）、过渡(transtion)、动画(animation)
border-radius 圆角
box-shadow 盒子阴影
flex 弹性布局
....
- 块属性标签float后，又有横行的margin情况下，IE 浏览器margin加倍的问题
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性 - 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
给超出高度的标签设置overflow:hidden;
或者设置行高line-height 小于设置的高度 - 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug：
在display:block;后面加入display:inline;display:table; - IE浏览器div最小宽度和高度不生效
IE把正常的width和height当作有min的情况来使
解决方案：设置背景图片的最小宽度
#box{
width: 80px;
height: 35px;
}
html>body #box{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
- 超链接访问过后hover样式就不出现的问题 ——解决方法：改变CSS属性的排列顺序: L-V-H-A
- 图片默认有间距 ——解决方案： 使用float属性为img布局(所有图片左浮)
- css hack解决浏览器兼容性参考文章
js兼容
- 事件绑定
IE: dom.attachEvent();
标准浏览器： dom.addEventListener(‘click’,function(event){},false); - event事件对象问题
document.onclick=function(ev){//兼容写法；
var e=ev||window.event;
var mouseX=e.clientX;//鼠标X轴的坐标
var mouseY=e.clientY;//鼠标Y轴的坐标
}
- event.srcElement(事件源对象)问题
IE： event对象有srcElement属性，但是没有target属性；
Firefox: event对象有target属性，但是没有srcElement属性 - 获取元素的非行间样式值：IE: dom.currentStyle[‘width’] 获取元素高度
标准浏览器： window.getComputedStyle(obj, null)[‘width’]; - 阻止事件冒泡传播
- 阻止事件默认行为
- ajax兼容问题
IE： ActiveXObject
其他： xmlHttpReuest
5、三栏布局方式两边固定中间自适应
- margin 负值法：左右两栏均左浮动，左右两栏采用负的 margin 值。
中间栏被宽度为 10%的浮动元素包起来 - 自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后
- 绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，
中间的主体栏用左右 margin 值撑开距离。 - flex 左右固定宽 中间 flex：1
- 网格布局
- table 布局
6、Doctype 作用
声明文档类型
7、HTML5 dragapi
dragstar：事件主体是被拖放元素，在开始拖放被拖放元素时触发，。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发
参考1
8、对 HTML 语义化标签的理解
HTML5 语义化标签是指正确的标签包含了正确的内容，结构良好，
便于阅读，比如nav 表示导航条，类似的还有article、header、footer
等标签。
9、.web 性能优化
降低请求量：合并资源，减少 HTTP 请求数，minfy / gzip 压缩，
webP，lazyLoad(懒加载图片）。
加快请求速度：预解析 DNS，减少域名数，并行加载，CDN 分发。
缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存
localStorage。
渲染：JS/CSS 优化，加载顺序，服务端渲染，pieline。
10、浏览器缓存机制
缓存分为两种：强缓存和协商缓存，根据响应的 header 内容来决定
强缓存相关字段有 expires，cahe-control。如果 cahe-control 与
expires 同时存在的话， cahe-control 的优先级高于 expires。
协 商 缓 存 相 关 字 段 有 Last-Modifed/If-Modifed-Since ，
Etag/If-None-Match
三级缓存原理 (访问缓存优先级)
内存->硬盘->网络
先在内存中查找,如果有,直接加载。
如果内存中不存在,则在硬盘中查找,如果有直接加载。
如果硬盘中也没有,那么就进行网络请求。
请求获取的资源缓存到硬盘和内存。
11、浏览器输入网址到页面渲染全过程
1.查找强缓存
2.DNS 解析
3.建立 TCP 连接
建立 TCP 连接经历了下面三个阶段
通过三次握手(即总共发送 3 个数据包确认已经建立连接)建立客户端和服务器之间的连接。
进行数据传输。这里有一个重要的机制，就是接收方接收到数据包后必须要向发送方确认, 如果发送方没有接到这个确认的消息，就判定为数据包丢失，并重新发送该数据包。当然，发送的过程中还有一个优化策略，就是把大的数据包拆成一个个小包，依次传输到接收方，接收方按照这个小包的顺序把它们组装成完整数据包。
断开连接的阶段。数据传输完成，现在要断开连接了，通过四次挥手来断开连接。
4.发送 HTTP 请求
发 HTTP 请求要携带三样东西:请求行、请求头和请求体
5.网络响应
6.页面渲染
7.解析过程
8.渲染
（1） 构建 DOM 树（2） 样式计算（3）布局（Layout）（4）绘制（Paint）（5）渲染层合成（Composite）（6）显示器显示内容
12、画一条 0.5px 的线
- 采用meta viewport的方式（适用于移动端）
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/> - transform
transform: scale(0.5,0.5);
13、关于 JS 动画和 css3 动画的差异性
渲染线程分为 main thread 和 compositor thread（复合线程），如果css 动画
只 改 变 transform 和 opacity ， 这 时 整 个css 动 画 得 以 在
compositor thead 完成（而 JS 动画则会在 main thread 执行，
然后出发 compositor thread 进行下一步操作），特别注意的是如果
改变 transform 和 opacity 是不会 layout 或者 paint 的。
区别：
功能涵盖面，JS 比css 大
实现/重构难度不一，css 比 JS 更加简单，性能跳优方向固定，对帧速表现不好的低版本浏览
器，css3 可以做到自然降级
css3动画有天然事件支持 ，css3有兼容性问题
14.双边距重叠问题（外边距折叠）
多个相邻（兄弟或者父子关系）普通流的块元素垂直方向 marign 会重
叠折叠的结果为：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两
个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。 两个外
边距一正一负时，折叠结果是两者的相加的和。
解决
外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;
内层元素 加float:left;或display:inline-block;
内层元素padding:1px
HTML:margin塌陷现象的解决
设置子元素的margin，父元素也具有与子元素相同的margin值，称之为塌陷现象。这种现象我们称之为margin的塌陷现象。具体说就是子类标签设置margin-top:50px;时，不是子类标签距离父类标签上边框50像素。而是子类标签和父类标签距离上级标签50个像素。
解决方案：
方法一：在父类标签设置overflow：hidden；属性
方法二：给父类标签设置border属性即可。
方法三：给父元素定位也可以(position属性)
15.css 动画如何实现
ccs 动画如何实现
创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置
动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，
动画的实际表现是由@keyframes 规则实现。
transition 也可实现动画。
transition 强调过渡，是元素的一个或多个属性发生变化时产生的过渡
效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种
改变发生
（例如 hover）时才能获取样式，这样就会产生过渡动画。
16、CS3 中对溢出的处理
text-overflow 属性，值为 clip 是修剪文本；elips 为显示省略符号来表被修剪的文本； string 为使用给定的字符串来代表被修剪
的文本。
17、.CS3 的新属性
- 布局：新增了 flex 布局
- 选择器：新增了first-oftype,nth-child 等选择器
- 盒模型： box-sizing
- 动画方面： animation，2d 变换，3d 变换
- 颜色方面：透明，rbga
- 字体方面：允许嵌入字体和设置字体阴影
- 媒体查讯
18、overflow 的原理
格式化上下文是 CSS 可视化渲染的一部分，它是一块区域，规
定了内部块盒的渲染方式，以及浮动相互之间的影响关系
当元素设置了 overflow 样式且值为 visble 时，该元素就构建了
一个 BFC，BFC 在计算高度时，内部浮动元素的高度也要计算在内，
也就是说技术 BFC 区域内只有一个浮动元素，BFC 的高度也不会发
生塌缩，所以达到了清除浮动的目的。
BFC（Block Formatting Context）叫做“块级格式化上下文"参考
布局规则如下：
1.内部的盒子会在垂直方向，一个个地放置；
2.盒子垂直方向的距离由margin决定， 属于同一个BFC的两个相邻Box的上下margin会发生重叠；
4.BFC的区域不会与float重叠；
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
6.计算BFC的高度时，浮动元素也参与计算。哪些元素会产生BFC。
1.根元素；
2.float的属性不为none；
3.position为absolute或fixed；
4.display为inline-block，table-cell，table-caption，flex；
5.overflow不为visible
19、css 定位
- 固定位 fixed：
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不
会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。
Fixed 定位的元素和其他元素重叠。 - 相对定位 relative：
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，
可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行
移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来
的空间。因此，移动元素会导致它覆盖其它框。 - 绝对定位 absolute：
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已
定位的父元素，那么它的位置相对于。absolute 定位使元素
的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其
他元素重叠。 - 粘性定位 sticky：
元素先按照普通文档流定位，然后相对于该元素在流中的 flow rot
（BFC）和 containg block（最近的块级祖先元素）定位。而后，
元素定位表现为在跨越特定阈值前为相对定位，之后为固定位。 - 默认定位 Static：
默认值。没有定位，元素出现在正常的流中（忽略 top, botm, left, right 或者 z-index 声明）。
默认值。没有定位，元素出现 - inherit:
规定应该从父元素继承 positon 属性的值。
扫一扫
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
