HTML+CSS部分
浏览器内核介绍
常见的浏览器内核:
1) Trident内核:IE,30,搜狗等都在使用
2) Gecko 内核 :Netscape6及以上版本,火狐浏览器
3)Presto:Opera及以上
4)Webkit:Safari,Chrome等
5)EdgeHTML内核:：Microsoft Edge IE11自己的内核,删除几乎所有IE私有特性
html语义化的理解
1) HTML语义化让页面结构更加请求,浏览器在解析的时候,更加清晰
2) 即使在没有css样式的情况下,也能正常显示网页的基本结构,有利于开发人员的阅读
3)所有引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,有利于SEO
4)是阅读源代码的人更容易的将网站分块,便于阅读、维护、理解
Doctype 作用?严格模式和混杂模式如何区分?有什么意义
作用:Doctype用来声明文档类型,她的目的就是告诉浏览器,他应该以什么样的样式解析文档,只有确定了文档类型,文档中的css和标签才能别正确的解析出来
区别:
标准模式是指,浏览器按照W3C的标准解析浏览器的
怪异模式是指浏览器按照自己的方式进行文档的解析,由于不同的浏览器厂商都有自己的解析方式,所以我们称之为怪异模式
浏览器解析时,到底使用标准模式还是怪异模式与文档中声明的类型有着直接的关系,如果文档声明了文档类型,浏览器就会按照标准的形式进行解析,但是如果开发者没有声明文档类型,会按照怪异模式进行解析
对web标准以及W3C的理解和认识
1. 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链 css 和 js 脚
本、结构行为表现的分离，
2. 文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所
访问、更少的代码和组件，
3. 容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提
高网站易用性
盒模型的介绍
盒模型主要分为标准盒模型(W3C)和怪异盒模型(IE)
主要区别:
总结:在w3c中定义了一个元素的宽度和高度,指的是元素 内容的宽度和高度,而在IE中,宽度和高度还包含了padding和border的值
常见的块级元素和行内元素
块级元素:
h1-h6标题标签
p段落标签
div块级标签
ul 无序列表
ol 有序列表
li 列表项
行内元素:
a 超链接
strong 强调语句
i 倾斜标签
em 倾斜标签
del 删除线标签
s 删除线标签
ins文字下划线
u 文字下划线
span 文本标签
行内块元素:
img 图片标签
input 输入框
td 单元格
样式转换:
display:block 行内元素转为块级元素
display:inline 块级元素转为行内元素
display:inline-block 转为内联元素
知名的空标签元素:
<br>换行
<hr>水平线
<img>图片
<input>输入框
<link>链接
<meta>元信息标签
H5新增的标签元素以及新特性,如何处理新标签的浏览器兼容性问题
1. 拖拽释放(Drag and drop)API ondrop
2.语义化更好的标签
(header nav footer aside article section)
3.音频视频(audio video),如果浏览器不支持自动播放可以设置一个muted静态播放的属性
4 Canvas(画布):image是以对象的形式对图像进行操作,Canvas是以画布编码的形式进行操作的
5. 地理(Geolocation)API
6.本地离线存储localStorage长期存储数据,浏览器关闭后数据不丢失
7.session的数据在浏览器关闭后自动删除
8.表单控件,calendar date time email url ,search tel file number
9.新的技术webworker ,websocket
10.文件读取
兼容性解决方法:
1)浏览器前缀
2)IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一个新特性让这些浏览器支持Html5新标签,浏览器支持新标签后,还需要添加默认的样式
3)最好的方式是直接使用成熟的框架,使用最多的是Html5shim框架
4)使用条件注释,判断当前的浏览器是哪个版本的,如果符合就执行
CSS3新增的新属性
1. 颜色：新增 RGBA，HSLA 模式
2. 文字阴影（text-shadow）
3.边框： 圆角（border-radius） 边框阴影： box-shadow
4. 盒子模型：box-sizing
5.背景：background-size 设置背景图片的尺寸 background-origin 设置背景图片的
原点 background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于
自适应布局
6.渐变：linear-gradient、radial-gradient
7. 过渡：transition，可实现动画
8. 自定义动画
9. 在CSS3 中唯一引入的伪元素是 ：selection.
10. 媒体查询，多栏布局
11. border-image
12.2D 转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)
13. 3D 转换
14.字体图标
15.弹性布局
link和@import的区别
区别:
1)@import是css提供的语法规则,只有导入样式表的作用;link是html的标签,不仅可以加载css文件,还可以定义rel等属性
2)加载页面时,link标签引入的css被同时加载,@import引入的css将在页面加载完毕后被加载
3)link是html标签,@import是css2.1出现的语法,存在兼容性问题
4)可以通过js操作DOM,插入link标签来改变样式,由于DOM方法是基于文档的,无法使用@import的方式插入样式
css hack是什么?
css hack就是针对不同的浏览器写css代码的过程
IE6:_color:red
IE7:+color:red
IE8:color:red
IE9: :root #test{color:red\9}
CSS选择器及优先级
基础选择器:
通配符 * 0 0 0 0
标签选择器0 0 0 1
类选择器 0 0 1 0
id选择器0 1 0 0
行内样式1 0 0 0
!important选择器+00
复合选择器
后代选择器 ul li
子代选择器 div >li
并集选择器 p.one标签+类名
相邻选择器 div+p必须是紧挨着的两个元素
伪类选择器::link
CSS的三大特性
三大特性:
层叠性:
1)、样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
2)、样式不冲突，不会层叠
继承性:
1) 子元素可以继承父元素的样式
2) text-,font-,line-,color可以被继承
优先级:
权重计算公式:
通配符*0,0,0,0
标签选择器0,0,0,1
每个类，伪类0,0,1,0
每个ID0,1,0,0
每个行内样式 style=""1,0,0,0
!important 无穷大
继承的权重是0:
如果子元素自身没有样式,会继承父元素的样式, 子元素的样式和父元素的样式发生冲突,永远执行子元素自身的样式, 父元素继承的过来的样式,权重为0,
权重是可以叠加的
外边距的合并
相邻外边距的合并(外边距塌陷):
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，
则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者
解决方案:
1)可以为父元素定义1像素的上边框或上内边距。
2)可以为父元素添加overflow:hidden。
嵌套块元素外边距的合并:
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上边距会与子元素的上外边距合并，合并之后的外边距为两者之间的较大值，合并到父元素身上，即使父元素的上外边距为0，也会发生合并
解决方案:
1可以为父元素设置定义一个1像素的上边框或者是上内边距
2、可以为父元素添加overflow：hidden触发bfc块级格式化上下文，独立布局区域，不会受到外部因素的干扰
rgba()和opacity的区别
1)rgba()和opacity都能实现透明效果,但是最大的不同时opacity作用域元素,以及元素内的所有内容的透明度
2)rgba()只作用域元素的颜色或者是其背景色,设置(rgba透明的元素的子元素不会继承透明效果)
浮动元素的特点
1、浮动的元素会脱离标准流，不占据原来的位置
2、浮动可以使元素一行显示
浮动只能浮动到父元素的左边和右边。浮动元素会受到父元素padding值得约束
4、浮动元素顶对齐
5、浮动元素只能影响下边的元素，不会影响上边的元素。
6、浮动元素有了行内块的显示特点
块元素浮动之后又不设置宽度的时候呀不会默认父元素的宽度了，默认的宽高为0，内容会撑开宽高，行内元素浮动之后，可以设置宽高了
7、当文字，行内元素，行内块元素遇到浮动元素，不会跑到浮动元素的底下，会环绕浮动元素
1)、浮动元素有了行内块的显示特点
块元素浮动之后又不设置宽度的时候呀不会默认父元素的宽度了，默认的宽高为0，内容会撑开宽高，行内元素浮动之后，可以设置宽高了
2)、当文字，行内元素，行内块元素遇到浮动元素，不会跑到浮动元素的底下，会环绕浮动元素
清除浮动的方法
1)手动定义父级元素的height
2、使用额外标签法，通常是加<div style=”clear:both”></div>
优缺点:
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差，会造成代码的冗余
3、使用后伪元素法：
.clearfix:after {
content:"";
height:0;
display:block;
clear:both;
visibility:hidden;
}
.clearfix {*zoom: 1;}代表网站：百度、淘宝网、网易
优点:符合闭合浮动思想 结构语义化正确
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
4、使用before和after双伪元素清除浮动.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}代表网站，小米，网易
优缺点:
优点：代码更简洁
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
定位的方法和特点
position常见的四个属性值,relative,absolute,fixed,static一般都要配合left,top,right,以及bottom的属性使用
1)static:默认位置,设置为static的元素,它始终会处于页面流基于的位置(static元素会忽略任何top,bottom,left,right声明)
2)relative:位置被设置为relative,可将其移至相对于正常位置的地方,意思就是如果设置了relative值,那么,他的偏移top,right,bottom,left的值都是以它原来的位置为基准偏移的,不管其他元素会怎么样,
注意relative移动的元素仍然在他原来的位置占空间
3)absolute设置为absolute的元素,可定位于相对于他包含它的元素的指定坐标,意思是如果他的父容器设置了position属性,并且position的属性值是absolute或者是relative,那么就会依据父容器进行偏移,如果其父容器没有设置position属性,
那么偏移是以body为依据的,注意设置absolute属性的元素在标准流中不占位置
4)fixed位置被设置为fixed的元素,可定义与相对于浏览器可视窗口的指定坐标,不论窗口是否滚动,元素都会留在那个位置,他始终是以body为依据的,
注意设置fixed属性在标准流中不占位置
盒子居中显示的方法
可以设置宽高的情况下:
方法一:
子绝父相
.p{
width:200px;
height:200px;
background:#f00;
position:relative;
}
.s{
width:100px;
height:100px;
background:#00f;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
方法二:
.p{
width:200px;
height:200px;
background:#f00;
position:relative;
}
.s{
width:100px;
height:100px;
background:#00f;
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
mrigin-top:-50px;
}
不设置宽高的情况下: 方法一:
.p{
width:200px;
height:200px;
background:#f00;
position:relative;
}
.s{
width:100px;
height:100px;
background:#00f;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
方法二:
.p{
display:flex;
justify-content:center;
align-items:center;
}
方法三:
.p{
display:table-cell;
text-align:center;
vertical-align:middle;
}
.s{
display:inline-block;
}
CSS3动画及与js动画的区别
css3动画:
定义动画
@keyframes move {
/* 动画序列、又叫时间节点 */
0% {
transform: translate(0, 0);
}
50% {
transform: translate(800px, 0);
}
100% {
/* transform:基于上一个状态的变化 */
transform: translate(800px, 500px);
}
}
调用动画:
div {
/* 调用 */
animation-name: dong_hua;
/* 动画执行时间 */
animation-duration: 2s;
}
区别:
1 功能涵盖面,js比css3大
1)定义动画的过程@keyframes不支持递归定义,如果有多种类似的动画过程,需要调节多个参数来生成的话,将会有很大的冗余,而js则天然可以以一套函数实现多个不同动画过
2)时间尺度上,@keyframes的动画粒度粗,而js的动画粒度控制可以很细
3)css3动画里被支持的时间函数非常少,不够灵活
4)以现有的接口,css3无法做到支持两个以上的状态转化
2.实现/重构难度不一,css比js更简单,性能调优方向固定
3.对个帧速表现不好的低浏览器版本,css3可以做到自然降级,而js需要撰写额外的代码
4.css动画有天然事件支持(transitionEnd,animationEnd),但是他们都需要针对浏览器加前缀.js则需要自己写事件
5.css有兼容性问题,而js大多数没有兼容性问题
iframe的作用
iframe是用来在网页中插入第三方页面，早期的页面使用 iframe主要是用于导航栏
这种很多页面都相同的部分，这样可以在切换页面的时候避免重复下载。
优点：
便于修改，模块分离，像一些信息管理系统会用到。
但现在基本上不推荐使用。除非特殊需要，一般不推荐使用。
缺点：
（1）iframe 的创建比一般的DOM 元素慢了 1-2个数量级
（2）iframe 标签会阻塞页面的加载，如果页面的 onload事件不能及时触发，
会让用户觉得网页加载很慢，用户体验不好.在 Safari 和Chrome 中可以通过js 动态设置
iframe 的src 属性来避免阻塞.
(3)） iframe对于SEO不友好，替代方案一般就是动态语言的Incude机制和ajax
动态填充内容等.
描述一下CSS中的渐进增强,优雅降级之间的区别?
优雅降级和渐进增强印象中是随着css3 流出来的一个概念。由于低级浏览器不支持
css3，但 css3 的效果又太优秀不忍放弃，所以在高级浏览中使用 css3 而低级浏览器只保证
最基本的功能。咋一看两个概念差不多，都是在关注不同浏览器下的不同体验，关键的区别
是他们所侧重的内容，以及这种不同造成的工作流程的差异。
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。
“渐进增强”观点则认为应关注于内容本身。
对BFC的理解有哪些?
1）定义：
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，
只有 Block-level box 参与，它规定了内部的Block-level Box 如何布局，并且与这个区域
外部毫不相干。
布局规则：
A. 内部的Box 会在垂直方向，一个接一个地放置。
B. Box垂直方向的距离由 margin决定。属于同一个 BFC的两个相邻 Box的 margin 会发
生重叠。
C. 每个元素的 margin box 的左边，与包含块border box 的左边相接触(对于从左往右的
格式化，否则相反)。即使存在浮动也是如此。
D. BFC 的区域不会与 float box 重叠。
E. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反
之也如此。
F. 计算 BFC 的高度时，浮动元素也参与计算。
3）哪些元素会生成 BFC：
A. 根元素
B. float 属性不为 none
C. position为 absolute 或 fixed
D. display为inline-block， table-cell， table-caption， flex， inline-flex
F. overflow 不为 visible
CSS reset和CSS normalize.css的区别
Reset 重置浏览器的 css 默认属性 ，浏览器的品种不同，样式不同，然后重置，让他们统
一。（暴力的，强制的）
1)Normalize.css是 cssreset 的替代方案，保护有用的浏览器默认样式而不是完全去
掉它们（温和的，根据浏览器特性的）
2) 一般化的样式：为大部分HTML元素提供
3) 修复浏览器自身的 bug并保证各浏览器的一致性
4) 优化 CSS 可用性：用一些小技巧
5) 解释代码：用注释和详细的文档来。
常见的兼容性问题分析及解决方案
1、png24位的图片在iE6 浏览器上出现背景，解决方案是做成 PNG8.
2、浏览器默认的margin 和padding不同。解决方案是加一个全局的{margin： 0;padding：
0;}来统一。
3、IE6双边距bug：块属性标签float 后，又有横行的margin情况下，在 ie6 显示 margin
比设置的大。浮动 ie 产生的双倍距离 #itcast{ float：left; width：10px; margin：0 0 0
100px;} 这种情况之下 IE会产生 20px 的距离，解决方案是在float 的标签样式控制中加入
_display：inline;将其转化为行内属性。( “_” 这个符号只有ie6 会识别)
4、 IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用 getAttribute()获取自定义属性;
Firefox 下,只能使用 getAttribute()获取自定义属性。
解决方法：统一通过 getAttribute()获取自定义属性。
5、 IE下,even对象有 x,y属性,但是没有 pageX,pageY 属性;
Firefox 下,event 对象有pageX,pageY 属性,但是没有 x,y属性。
解决方法：（条件注释）缺点是在 IE浏览器下可能会增加额外的 HTTP 请求数。
6、 Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust：none; 解决。
7、超链接访问过后hover 样式就不出现了 被点击访问过的超链接样式不在具有 hover 和
active了。解决方法是：改变CSS 属性的排列顺序：L-V-H-A 、 a： link {} a：visited{}a：
hover {} a：active {}
px em rem三者之间的区别
1）px 像素（Pixel）。绝对单位。像素px是相对于显示器屏幕分辨率而言的，是一
个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px要换算成物理长度，需要
指定精度 DPI。
2）em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字
体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因
此并不是一个固定的值。
3）rem是 CSS3新增的一个相对单位（root em，根em），使用 rem 为元素设定字
体大小时，仍然是相对大小，但相对的只是HTML根元素。
4）区别： IE无法调整那些使用 px作为单位的字体大小，而em 和rem可以缩放， rem
相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既
可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁
反应。目前，除了 IE8及更早版本外，所有浏览器均已支持rem。
css sprite如何使用?
Css 精灵图，把一堆小的图片整合到一张大的图片（png）上，减轻服务器对图片的请
求数量。再利用css 的“background-image”、“background-repeat”、
“background-position”的组合进行背景定位
src和href的区别
1)src（source）指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在
请求 src资源时会将其指向的资源下载并应用到文档中，如js 脚本，img图片和iframe 等
元素。
2)当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行
完毕，类似于将所指向资源嵌入当前标签内。
3)href（hypertext reference/超文本引用）指向网络资源所在位置，建立和当前元素（锚点）
或当前文档（链接）之间的链接，如果我们在文档中添加<link href="common.css" rel="stylesheet"/>那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止
对当前文档的处理。
overflow的属性值
1)visible:默认值,内容不会被裁剪,会呈现在元素框之外
2)Hidden:内容会被修剪,并且其余内容是不可见的
3)Scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
4)Inherit规定应该从父元素继承overflow属性的值
网页重绘与重排以及重构
网页重绘:
重绘是一个元素外观的改变所触发的浏览器行为,例如改变visibility outline 背景色等属性,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观,重绘不会带来重新布局,并不一定伴随着重排
网页重排:
重排是一种更明显的情况,可以理解为DOM树重新渲染计算,常见的网页重排操作有:
1)DOM元素的几何属性变化
2)DOM树的变化
3)获取某些元素
4)此外,改变元素的一些样式,如调整浏览器窗口大小等都发生重排
注意:重排对性能有很大的影响
网页重构:
页面重构:
编写CSS,让页面结构更加合理化,提升用户体验,实现良好的页面效果和提升性能
网站重构:
在不改变外部行为的情况下,简化结构,添加可读性,而在网站前端保持一致的行为,也就是说在不改变UI的情况下对网站进行优化,在扩展的同时保持UI一致
对传统的网站重构:
1)表格布局改为div+css布局
2)使网站前端兼容性于现代浏览器(针对不合规范的css,如对IE6有效的)
3)对于移动平台的优化
4)针对SEO进行优化
深层次的网站重构:
1)减少代码间的耦合
2)让代码保持弹性
3)严格按规范保持弹性
4)设计可扩展的API
5)代替旧有的框架,语言
6)增强用户体验,优化响应速度
速度的优化重构:
压缩js,css,image等前端资源
程序的性能优化
采用CDN来加速资源加载
对于js DOM的优化
HTTP服务器的文件缓存
多个域名存储网站资源会更有效的原因
1)CDN缓存方便
2)突破浏览器并发限制
3)节约cookie带宽
4)节约主域名的连接数,优化页面响应速度
5)防止不必要的安全问题
去除图片底边三像素的方法
1)设置父元素的font-size的字号为0
2)改变图片的display属性display: block(定位也可以,只要脱标就会消失);
3)给图片设置垂直对齐方式virtical-align: middle;//设置为任意值都可以
移动端
视口的概念及相关知识
1.三种视口: 移动端浏览器通常宽度是 240px~640px，而大多数为 PC 端设计的网站宽度至少为 800px，如果仍以浏览器窗口作为视口的话，网站内容在手机上看起来会非常窄。
因此，引入了布局视口、视觉视口和理想视口三个概念，使得移动端中的视口与浏览器宽度不再相关联。
视口主要分为三种:布局视口(客户端显示的大小),视觉视口(用户看到的大小),理想视口(视觉分辨率的值), 移动端视口元标签:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">
viewport 标签只对移动端浏览器有效，对 PC 端浏览器是无效的
当缩放比例为 100% 时，dip 宽度 = CSS 像素宽度 = 理想视口的宽度 = 布局视口的宽度
单独设置 initial-scale 或 width 都会有兼容性问题，所以设置布局视口为理想视口的最佳方法是同时设置这两个属性
即使设置了 user-scalable = no，在 Android Chrome 浏览器中也可以强制启用手动缩放
flex布局的相关知识总结
display:flex设置为弹性盒子,设置了盒子之后浮动块元素都没有了 主轴身上的属性:
1) flex-direction：确认主轴方向
flex-direction:row
主轴方向是行默认是从左到右
flex-direction:row-reverse
主轴方向是行从右到左
flex-direction:column
主轴方向是列默认从上到下
flex-direction:column-reverse
主轴方向是列从下到上
2) justify-content：控制主轴上（默认是x）的元素对齐方式，类似word中的左对齐、右对齐等相关属性
justify-content:flex-start
默认值使从头开始，如果主轴是x轴，则从左到右
justify-content:flex-end
从主轴的尾部开始排列
justify-content:center
在主轴居中对齐（如果主轴是x轴则水平居中）
justify-content:space-around
平分剩余空间，左右两边也有空白
justify-content:space-between
先贴两边，再平分剩余空间，两边没有空白
3)flex-wrap：控制子元素是否换行
flex-wrap：nowrap默认值
默认不换行，子元素的总宽机上超过父亲的宽度，不换行
flex-wrap：wrap
4)flex-flow:复合属性，设置主轴与换行
flex-flow:row wrap;
侧轴属性:
1)align-items：子元素排列方向
flex-start默认值从上到下
flex-end 从下到上
center挤在一起垂直居中
stretch拉伸
这里的拉伸的前提是子元素没有高度，在侧轴方向会拉伸，如果子元素自身有高度，不会拉伸，会按照本身的高度显示
2)align-content设置子项在侧轴上的排列方式这种方式与align-items的区别是设置换行，这种才生效
align-content：flex-start
默认从侧轴的头部开始，默认侧轴是Y轴，也就是从上到下垂直排列
align-content：flex-end
默认从侧轴的底部开始，默认侧轴是Y轴，也就是从下到上垂直排列
align-content：center
在侧轴中间显示
align-content：space-between
子项先在侧轴的两端紧贴着边，再平分剩余空间
align-content：space-around
设置子元素平分父元素高度，设置之后两边还有空白
移动端适配的解决方法
1.流式布局:
流式布局是：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）
网页中主要的划分区域的尺寸使用百分数（搭配min-、max-属性使用）
布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。
缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。
2.flex布局
css3引入的，flex布局；优点在于其容易上手，根据flex规则很容易达到某个布局效果，然而缺点是：浏览器兼容性比较差，只能兼容到ie9及以上；
3.自适应布局
自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
自己写一套前端适**配的方案
可以使用rem布局加上响应式布局:
对于响应式布局,核心就是媒体查询,而我们常说的rem是相对于根元素的字体大小而言的,我们可以利用媒体查询划分各个档位,比如说现在市面上常见的方式分辨率大小:
/* - 档位1：w<540px w <=539px; */
/* @media screen and (max-width:539px) {
body {
background-color: red;
}
} */
@media screen and (min-width:0) {
body {
background-color: red;
}
}
/* - 档位2 : 540px<=w and w<640px; */
/* @media screen and (min-width:540px) and (max-width:639px) {
body {
background-color: blue;
}
} */
@media screen and (min-width:540px) {
body {
background-color: blue;
}
}
/* - 档位3 : 640px<=w */
@media screen and (min-width:640px) {
body {
background-color: green;
}
}
然后再在各个档位上把设计师给出的设计稿按照750的方式进行布局,在每个分隔段都是这样写,最后根据rem根元素的大小进行计算,计算方式就是:
- 准备各个档位下的rem：提前准备好各个档位下的HTML 的font-size大小；
- 拿到当前设计稿屏幕尺寸对应的rem：因为我现在是750px的设计稿，所以可以得到750px这个尺寸属于的档位下的HTML 的font-size大小，也就是750px设计稿下的1rem值。这里我们通常把屏幕分成是10份,那么10份(只是为了好计算,也可以是其他的)就是,每一份就是1rem.所以这里1rem=750px/10=75px;所以这里要算一个元素宽为82px的元素宽的rem值,1px=1/75rem;82px=82rem/75
- 计算比例：把页面刚才所有的元素的PX值替换为 rem 比例值；（82px=82rem/75）;
bootstrap响应式布局的原理
响应式布局的核心就是媒体查询,根据各个档位下页面的布局进行设计,除此之外,为了应用响应式 Web 设计您需要创建一个包含适应各种设备尺寸样式的 CSS。一旦页面在特定的设备上加载，该页面上使用了各种字体和 Web 开发技术，比如媒体查询（Media Queries），此时，会先检测设备的视口大小，然后加载特定于设备的样式。
圣杯布局以及双飞翼布局解决方案
左右固定中间自适应:
<style>
* {
margin: 0;
padding: 0;
}
.middle,
.left,
.right {
position: relative;
float: left;
min-height: 130px;
}
.container {
padding: 0 220px 0 200px;
overflow: hidden;
}
.left {
margin-left: -100%;
left: -200px;
width: 200px;
background: red;
}
.right {
margin-left: -220px;
right: -220px;
width: 220px;
background: green;
}
.middle {
width: 100%;
background: blue;
word-break: break-all;
}
</style>
</head>
<body>
<div class='container'>
<div class='middle'></div>
<div class='left'></div>
<div class='right'></div>
</div>
</body>
