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 示意通过什么办法来进行平滑过渡。

linear	规定以雷同速度开始至完结的过渡成果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，而后变快，而后慢速完结的过渡成果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡成果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速完结的过渡成果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和完结的过渡成果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义本人的值。可能的值是 0 至 1 之间的数值。

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平滑过渡多个属性值

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

至于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);
     }
 };
复制代码

关于css:javascript-基础

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

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

3、CSS3动画

一：过渡动画—Transitions

transitions平滑过渡多个属性值

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

4、Flex布局

4.1.1 flex-direction属性

4.1.2 flex-wrap属性

4.1.3 flex-flow

4.1.4 justify-content属性

4.1.5 align-items属性

4.1.6 align-content属性

二、我的项目的属性

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

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

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

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

4.2.5 flex属性

4.2.6 align-self属性

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

6、BFC

7、革除浮动

8、解决浏览器兼容

款式兼容性（css）

交互兼容性（javascript）

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于css:javascript-基础

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

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

3、CSS3动画

一：过渡动画—Transitions

transitions平滑过渡多个属性值

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

4、Flex布局

4.1.1 flex-direction属性

4.1.2 flex-wrap属性

4.1.3 flex-flow

4.1.4 justify-content属性

4.1.5 align-items属性

4.1.6 align-content属性

二、我的项目的属性

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

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

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

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

4.2.5 flex属性

4.2.6 align-self属性

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

6、BFC

7、革除浮动

8、解决浏览器兼容

款式兼容性（css）

交互兼容性（javascript）

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

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

发表回复取消回复