web前端面试基础知识

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像素的上边框或者是上内边距
二、能够为父元素添加overflow：hidden触发bfc块级格式化上下文，独立布局区域，不会受到外部因素的干扰
复制代码

rgba()和opacity的区别

1)rgba()和opacity都能实现透明效果,可是最大的不一样时opacity做用域元素,以及元素内的全部内容的透明度
2)rgba()只做用域元素的颜色或者是其背景色,设置(rgba透明的元素的子元素不会继承透明效果)
复制代码

浮动元素的特色

一、浮动的元素会脱离标准流，不占据原来的位置
二、浮动可使元素一行显示
浮动只能浮动到父元素的左边和右边。浮动元素会受到父元素padding值得约束
四、浮动元素顶对齐
五、浮动元素只能影响下边的元素，不会影响上边的元素。
六、浮动元素有了行内块的显示特色
块元素浮动以后又不设置宽度的时候呀不会默认父元素的宽度了，默认的宽高为0，内容会撑开宽高，行内元素浮动以后，能够设置宽高了
七、当文字，行内元素，行内块元素遇到浮动元素，不会跑到浮动元素的底下，会环绕浮动元素
    1)、浮动元素有了行内块的显示特色
    	块元素浮动以后又不设置宽度的时候呀不会默认父元素的宽度了，默认的宽高为0，内容会撑开宽高，行内元素浮动以后，能够设置宽高了
    2)、当文字，行内元素，行内块元素遇到浮动元素，不会跑到浮动元素的底下，会环绕浮动元素
复制代码

清除浮动的方法

1)手动定义父级元素的height
二、使用额外标签法，一般是加<div style=”clear:both”></div>
优缺点:
    优势：通俗易懂，书写方便
    缺点：添加许多无心义的标签，结构化较差，会形成代码的冗余
三、使用后伪元素法：
.clearfix:after {
    content:"";
    height:0; 
    display:block;
    clear:both;
    visibility:hidden;
}	
.clearfix {*zoom: 1;}表明网站：百度、淘宝网、网易
     优势:符合闭合浮动思想  结构语义化正确
     缺点：因为IE6-7不支持:after，使用 zoom:1触发 hasLayout。
四、使用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) 解释代码：用注释和详细的文档来。

复制代码

常见的兼容性问题分析及解决方案

一、png24位的图片在iE6 浏览器上出现背景，解决方案是作成 PNG8.

二、浏览器默认的margin 和padding不一样。解决方案是加一个全局的{margin： 0;padding：
0;}来统一。

三、IE6双边距bug：块属性标签float 后，又有横行的margin状况下，在 ie6 显示 margin
比设置的大。浮动 ie 产生的双倍距离 #itcast{ float：left; width：10px; margin：0 0 0
100px;} 这种状况之下 IE会产生 20px 的距离，解决方案是在float 的标签样式控制中加入
_display：inline;将其转化为行内属性。( “_” 这个符号只有ie6 会识别)

四、 IE下,可使用获取常规属性的方法来获取自定义属性,
也可使用 getAttribute()获取自定义属性;
Firefox 下,只能使用 getAttribute()获取自定义属性。
解决方法：统一经过 getAttribute()获取自定义属性。

五、 IE下,even对象有 x,y属性,可是没有 pageX,pageY 属性;
Firefox 下,event 对象有pageX,pageY 属性,可是没有 x,y属性。
解决方法：（条件注释）缺点是在 IE浏览器下可能会增长额外的 HTTP 请求数。

六、 Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可经过加入 CSS 属性 -webkit-text-size-adjust：none; 解决。

七、超连接访问事后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>

复制代码