x1、CSS 盒子模型与怪异盒模型

1、规范盒模型 中width指的是内容区域 content 的宽度；height指的是内容区域 content 的高度。

规范盒模型下盒子的大小 = content + border + padding + margin

2、怪异盒模型 中的 width 指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度

怪异盒模型下盒子的大小 =width（content + border + padding）+ margin

3、在 ie8+ 浏览器中应用哪个盒模型能够由 box-sizing（CSS 新增的属性)触发，

默认值为 content-box，即规范盒模型；如果将 box-sizing 设为 border-box 则用的是 IE 盒模型

4、box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow,v-shadow 必须。程度，垂直暗影的地位。容许赋值。blur 可选，含糊间隔。spread 可选，暗影的尺寸。color 可选，暗影的色彩。inset 可选，将内部暗影（outset）改为外部暗影。

2、HTML5 在标签、属性、存储、API 上的新个性

•标签：

新增语义化标签（aside / figure / section / header / footer / nav等），

减少多媒体标签 video 和audio，使得款式和构造更加拆散

•属性：

加强表单，次要是加强了 input 的 type 属性；

meta减少 charset 以设置字符集；

script减少 async 以异步加载脚本

•存储 ：减少localStorage、sessionStorage 和indexedDB，引入了 application cache 对 web 和利用进行缓存

•API：减少 拖放 API、天文定位、SVG 绘图、canvas 绘图、Web Worker、WebSocket

3、CSS3 动画

一：过渡动画 —Transitions

1：过渡动画 Transitions

含意：在 css3 中，Transitions 性能通过将元素的某个属性从一个属性值在指定的工夫内平滑过渡到另一个属性值来实现动画性能。

Transitions 属性的应用办法如下所示：

transition: property | duration | timing-function | delay

transition-property: 示意对那个属性进行平滑过渡。

transition-duration: 示意在多长时间内实现属性值的平滑过渡。

transition-timing-function 示意通过什么办法来进行平滑过渡。

transition-delay: 定义过渡动画提早的工夫。

默认值是 all 0 ease 0

浏览器反对水平：IE10，firefox4+，opera10+，safari3+ 及 chrome8+

上面是 transitions 过渡性能的 demo 如下：

HTML 代码如下：

<div class="transitions">transitions 过渡性能 </div>

CSS 代码如下：

.transitions {
    -webkit-transition: background-color 1s ease-out;
    -moz-transition: background-color 1s ease-out;
    -o-transition: background-color 1s ease-out;
}.transitions:hover {background-color: #00ffff;}

成果如下：

transitions 过渡性能

如果想要过渡多个属性，能够应用逗号宰割，如下代码：

div {-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;}

2. 咱们能够应用 Transitions 性能同时平滑过渡多个属性值。

如下 HTML 代码：

<h2>transitions 平滑过渡多个属性值 </h2><div class="transitions2">transitions 平滑过渡多个属性值 </div>

css 代码如下：

.transitions2 {
        background-color:#ffff00;
        color:#000000;
        width:300px;
        -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
        -moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
        -o-transition: background-color 1s linear, color 1s linear, width 1s linear;
}.transitions2:hover {
        background-color: #003366;
        color: #ffffff;
        width:400px;
}

成果如下：

transitions 平滑过渡多个属性值

transitions 平滑过渡多个属性值

留神：transition-timing-function 示意通过什么办法来进行平滑过渡。它值有如下：

有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

至于 linear 线性咱们很好了解，能够了解为匀速运动，至于 cubic-bezier 贝塞尔曲线目前用不到，能够忽略不计，咱们当初来了解下 ease, ease-in, easy-out 和 ease-in-out 等属性值的 含意；

ease: 先快后逐步变慢；

ease-in: 先慢后快

easy-out: 先快后慢

easy-in-out: 先慢后快再慢

了解下面几个属性值，如下 demo：

HTML 代码如下:

<div id="transBox" class="trans_box">
    <div class="trans_list ease">ease</div>
    <div class="trans_list ease_in">ease-in</div>
    <div class="trans_list ease_out">ease-out</div>
    <div class="trans_list ease_in_out">ease-in-out</div>
    <div class="trans_list linear">linear</div></div>

CSS 代码如下：

.trans_box {background-color: #f0f3f9;  width:100%}.trans_list {
    width: 30%;
    height: 50px;
    margin:10px 0;
    background-color:blue;
    color:#fff;
    text-align:center;
}.ease {
    -webkit-transition: all 4s ease;
    -moz-transition: all 4s ease;
    -o-transition: all 4s ease;
    transition: all 4s ease;
}.ease_in {
    -webkit-transition: all 4s ease-in;
    -moz-transition: all 4s ease-in;
    -o-transition: all 4s ease-in;
    transition: all 4s ease-in;
}.ease_out {
    -webkit-transition: all 4s ease-out;
    -moz-transition: all 4s ease-out;
    -o-transition: all 4s ease-out;
    transition: all 4s ease-out;
}.ease_in_out {
    -webkit-transition: all 4s ease-in-out;
    -moz-transition: all 4s ease-in-out;
    -o-transition: all 4s ease-in-out;
    transition: all 4s ease-in-out;
}.linear {
    -webkit-transition: all 4s linear;
    -moz-transition: all 4s linear;
    -o-transition: all 4s linear;
    transition: all 4s linear;
}.trans_box:hover .trans_list{
    margin-left:90%;
    background-color:#beceeb;
    color:#333;
    -webkit-border-radius:25px;
    -moz-border-radius:25px;
    -o-border-radius:25px;
    border-radius:25px;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

二：Animations 性能: 定义多个关键帧

Animations 性能与 Transitions 性能雷同，都是通过扭转元素的属性值来实现动画成果的。

它们的区别在于：应用 Transitions 性能是只能通过指定属性的开始值与完结值。而后在这两个属性值之间进行平滑过渡的形式来实现动画成果，因而不能实现简单的动画成果；

而 Animations 则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为简单的动画成果。

语法：animations: name duration timing-function iteration-count;

name: 关键帧汇合名（通过此名创立关键帧的汇合）

duration: 示意在多长时间内实现属性值的平滑过渡

timing-function: 示意通过什么办法来进行平滑过渡

iteration-count: 迭代循环次数，可设置为具体数值，或者设置为 infinite 进行有限循环，默认为 1.

用法：@-webkit-keyframes 关键帧的汇合名 {创立关键帧的代码}

如上面的代码：

@-webkit-keyframes mycolor {0% {background-color:red;}
   40% {background-color:darkblue;}
   70% {background-color: yellow;}
   100% {background-color:red;}}
.animate:hover {
   -webkit-animation-name: mycolor;
   -webkit-animation-duration: 5s;
   -webkit-animation-timing-function:

4、Flex 布局

设为 Flex 布局当前，子元素的 float、clear 和vertical-align属性将生效。

采纳 Flex 布局的元素，称为 Flex 容器（flex container）

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

4.1.1 flex-direction 属性

flex-direction属性决定主轴的方向（即我的项目的排列方向）。

.box {flex-direction: row | row-reverse | column | column-reverse;}

它可能有 4 个值。

• row（默认值）：主轴为程度方向，终点在左端。
• row-reverse：主轴为程度方向，终点在右端。
• column：主轴为垂直方向，终点在上沿。
• column-reverse：主轴为垂直方向，终点在下沿。

4.1.2 flex-wrap 属性

默认状况下，我的项目都排在一条线（又称 ” 轴线 ”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{flex-wrap: nowrap | wrap | wrap-reverse;}

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

4.1.3 flex-flow

flex-flow属性是 flex-direction 属性和 flex-wrap 属性的简写模式，默认值为row nowrap。

.box {flex-flow: <flex-direction> || <flex-wrap>;}

4.1.4 justify-content 属性

justify-content属性定义了我的项目在主轴上的对齐形式。

.box {justify-content: flex-start | flex-end | center | space-between | space-around;}

它可能取 5 个值，具体对齐形式与轴的方向无关。上面假如主轴为从左到右。

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center：居中
• space-between：两端对齐，我的项目之间的距离都相等。
• space-around：每个我的项目两侧的距离相等。所以，我的项目之间的距离比我的项目与边框的距离大一倍。

4.1.5 align-items 属性

align-items属性定义我的项目在穿插轴上如何对齐。

.box {align-items: flex-start | flex-end | center | baseline | stretch;}

它可能取 5 个值。具体的对齐形式与穿插轴的方向无关，上面假如穿插轴从上到下。

• flex-start：穿插轴的终点对齐。
• flex-end：穿插轴的起点对齐。
• center：穿插轴的中点对齐。
• baseline: 我的项目的第一行文字的基线对齐。
• stretch（默认值）：如果我的项目未设置高度或设为 auto，将占满整个容器的高度。

4.1.6 align-content 属性

align-content属性定义了多根轴线的对齐形式。如果我的项目只有一根轴线，该属性不起作用。

.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

该属性可能取 6 个值。

• flex-start：与穿插轴的终点对齐。
• flex-end：与穿插轴的起点对齐。
• center：与穿插轴的中点对齐。
• space-between：与穿插轴两端对齐，轴线之间的距离均匀散布。
• space-around：每根轴线两侧的距离都相等。所以，轴线之间的距离比轴线与边框的距离大一倍。
• stretch（默认值）：轴线占满整个穿插轴。

二、我的项目的属性

以下 6 个属性设置在我的项目上。

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

4.2.1 order 属性: 定义我的项目的排列程序 0

order属性定义我的项目的排列程序。数值越小，排列越靠前，默认为 0。

.item {order: <integer>;}

4.2.2 flex-grow 属性: 定义我的项目的放大比例 0

flex-grow属性定义我的项目的放大比例，默认为0，即如果存在残余空间，也不放大。

.item {flex-grow: <number>; /* default 0 */}

如果所有我的项目的 flex-grow 属性都为 1，则它们将等分残余空间（如果有的话）。如果一个我的项目的 flex-grow 属性为 2，其余我的项目都为 1，则前者占据的残余空间将比其余项多一倍。

4.2.3 flex-shrink 属性: 定义了我的项目的放大比例 1

flex-shrink属性定义了我的项目的放大比例，默认为 1，即如果空间有余，该我的项目将放大。

.item {flex-shrink: <number>; /* default 1 */}

如果所有我的项目的 flex-shrink 属性都为 1，当空间有余时，都将等比例放大。如果一个我的项目的 flex-shrink 属性为 0，其余我的项目都为 1，则空间有余时，前者不放大。

负值对该属性有效。

4.2.4 flex-basis 属性 将占据固定空间

flex-basis属性定义了在调配多余空间之前，我的项目占据的主轴空间（main size）。浏览器依据这个属性，计算主轴是否有多余空间。它的默认值为auto，即我的项目的原本大小。

.item {flex-basis: <length> | auto; /* default auto */}

它能够设为跟 width 或height属性一样的值（比方 350px），则我的项目将占据固定空间。

4.2.5 flex 属性

flex属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。后两个属性可选。

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

倡议优先应用这个属性，而不是独自写三个拆散的属性，因为浏览器会推算相干值。

4.2.6 align-self 属性

align-self属性容许单个我的项目有与其余我的项目不一样的对齐形式，可笼罩 align-items 属性。默认值为 auto，示意继承父元素的align-items 属性，如果没有父元素，则等同于stretch。

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;}

该属性可能取 6 个值，除了 auto，其余都与 align-items 属性完全一致。

5、实现一个元素程度垂直居中

1）毛病：如果不晓得宽高，这个成果就没法实现。如果数据除不尽，实现的成果存在误差。

{width：200px；height：200px；position：absolute 或者 fixed；top：50%；margin-top：-100px；left：50%；margin-left：-100px；}

2）毛病：不适宜未知宽高的元素程度垂直居中

{width：333px；height：333px；position：fixed；margin：auto；top：0；left：0；right：0；bottom：0；}

3）长处：能够实现一个未知宽高的元素程度垂直居中 毛病：display：flex；css3 新减少的；兼容到 IE10 以上

html{height：100%；} 

body{margin：0；display：flex；height：100%；}

div{margin：auto；}

其中：display：flex 给的最近的父元素

4）

body{margin：0；}

div{
     position：fixed；top：50%；left：50%；transform：translate(-50%，-50%)；}
     
 /*top：50%；left：50%；这个是浏览器视口整体宽高的一半；transform：translate(-50%，-50%)；是以后元素宽高的一半 */ 

6、BFC

有 BFC 个性的元素能够看作是隔离了的独立容器，容器外面的元素不会在布局上影响到里面的元素

只有元素满足上面任一条件即可触发 BFC 个性：

• html 根元素
• 浮动元素：float 除 none 以外的值
• 相对定位元素：position (absolute、fixed)
• display 为 inline-block、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

​ 建设 BFC 的最好形式莫过于 overflow:hidden

BFC 个性及利用

1. 当元素在同一个 BFC 中，垂直方向上的 margin 会重叠，解决办法是将其放在不同的 BFC 容器中。

2.BFC 能够蕴含浮动的元素（革除浮动），只有设置容器 overflow：hidden

3.BFC 能够阻止元素被浮动元素笼罩（文字盘绕问题），只有设置元素 overflow：hidden

7、革除浮动

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。然而当子元素设置浮动之后，子元素会齐全脱离文档流，此时将会导致子元素无奈撑起父元素的高度，导致父元素的高度塌陷。

​ 解决方案 1：after+zoom（最好用的，最举荐的，兼容性也很好）

​ 父元素::after{content:””; display:block;height:0;visibility:hidden;clear:both;}

​ 父元素:{zoom:1}

​ 倡议：定义公共类来缩小 css 代码

​ 解决方案 2：给父元素增加申明 overflow:hidden; zoom：1；(须要兼容 IE6 增加)

​ 长处：简略、代码少、浏览器反对好

​ 毛病：不能和 position 配合应用，因为超出的尺寸的会被暗藏。**

8、解决浏览器兼容

款式兼容性（css）

交互兼容性（javascript）

1、事件兼容的问题，咱们通常须要会封装一个适配器的办法，过滤事件句柄绑定、移除、冒泡阻止以及默认事件行为解决

 var  helper = {}

 // 绑定事件
 helper.on = function(target, type, handler) {if(target.addEventListener) {target.addEventListener(type, handler, false);
     } else {
         target.attachEvent("on" + type,
             function(event) {return handler.call(target, event);
             }, false);
     }
 };

 // 勾销事件监听
 helper.remove = function(target, type, handler) {if(target.removeEventListener) {target.removeEventListener(type, handler);
     } else {
         target.detachEvent("on" + type,
         function(event) {return handler.call(target, event);
         }, true);
     }
 };
复制代码