xml地图|网站地图|网站标签 [设为首页] [加入收藏]
CSS3弹性伸缩布局,原生对象及扩展
分类:web前端

有趣的CSS题目(6): 全兼容的多列均匀布局问题

2016/09/29 · CSS · CSS

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。

解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。

不断更新,不断更新,不断更新,重要的事情说三遍。

谈谈一些有趣的CSS题目(1): 左边竖条的实现方法

谈谈一些有趣的CSS题目(2): 从条纹边框的实现谈盒子模型

谈谈一些有趣的CSS题目(3): 层叠顺序与堆栈上下文知多少

谈谈一些有趣的CSS题目(4): 从倒影说起,谈谈 CSS 继承 inherit

谈谈一些有趣的CSS题目(5): 单行居中,两行居左,超过两行省略

所有题目汇总在我的 Github 。

 

JavaScript 原生对象及扩展

2016/09/26 · JavaScript · 对象

原文出处: trigkit4   

CSS3弹性伸缩布局(二)——flex布局

2015/09/02 · CSS · CSS3

原文出处: 郭锦荣   

上一篇博客《CSS3弹性伸缩布局(一)——box布局》介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识。

新版本简介

新版本的Flexbox模型是2012年9月提出的工作草案,这个草案是由W3C 推出的最新语法。这个版本立志于指定标准,让新式的浏览器全面兼容,在未来浏览器的更新换代中实现统一。

6、全兼容的多列均匀布局问题

如何实现下列这种多列均匀布局(图中直线为了展示容器宽度,不算在内):

图片 1

 

内置对象与原生对象

内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始化阶段就被创建好的对象,是后者的一个子集;而后者包括了一些在运行过程中动态创建的对象。

图片 2

这里我们还是继续上一篇博客中的例子,使用最新版本的flex布局来实现相同的效果。

html代码:

XHTML

<div> <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p> <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p> <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p> </div>

1
2
3
4
5
<div>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>

基础的css代码:

CSS

p{ width:150px; border:3px solid lightblue; background:lightgreen; padding:5px; margin:5px; }

1
2
3
4
5
6
7
p{
    width:150px;
    border:3px solid lightblue;
    background:lightgreen;
    padding:5px;
    margin:5px;
}

此时我们给div元素设置display属性为flex :

CSS

div{ display:flex; }

1
2
3
div{
    display:flex;
}

刷新浏览器后的效果是:

图片 3

可以看到效果跟旧版本的-webkit-box是一样的。

在新版本中设置为弹性伸缩盒的display属性值有两个:

  • flex : 将容器盒模型作为块级弹性伸缩盒显示
  • inline-flex : 将容器盒模型作为内联级弹性伸缩盒显示

看一下新版本的flex布局的浏览器兼容情况:

图片 4

PS:可以看到,在一些比较旧的webkit内核的浏览器(Chrome,Safari)中,我们需要使用-webkit-flex来做兼容,但是这里我就省略了。

下面将逐一介绍flex布局的各个属性的基础用法:

法一:display:flex

CSS3 弹性盒子(Flexible Box 或 Flexbox),是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素拥有更恰当的排布行为。

当然 flex 布局应用于移动端不错,PC 端需要全兼容的话,兼容性不够,此处略过不谈。

原生对象(New后的对象)

ECMA-262 把原生对象(native object)定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。包括如下:

Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError、ActiveXObject(服务器方面)、Enumerator(集合遍历类)、RegExp(正则表达式)

1
Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError、ActiveXObject(服务器方面)、Enumerator(集合遍历类)、RegExp(正则表达式)

由此可以看出,简单来说,原生对象就是 ECMA-262 定义的类(引用类型)。

来源:

flex-direction属性

flex-direction属性用于设置伸缩项目的排列方式。

CSS

div{ display:flex; flex-direction:column; }

1
2
3
4
div{
    display:flex;
    flex-direction:column;
}

效果如下:

图片 5

结果就是容器内的所有项目按照从上到下排列的。

当你设置为row-reverse时,效果就是:

图片 6

这个是从浏览器的右边往左边排列的。

此属性的属性值有:

  • row : 设置从左到右排列
  • row-reverse : 设置从右到左排列
  • column : 设置从上到下排列
  • column-reverse : 设置从下到上排列

大家不妨都试一下,看看每一个的效果如何。

内置对象(不需要New)

定义:由ECMAScript实现提供的对象,独立于宿主环境,在一个脚本程序执行的开始处。

:每个内置对象(built-in object)都是原生对象(Native Object),一个内置的构造函数是一个内置的对象,也是一个构造函数。

来源:

举个栗子:

Native objects: Object (constructor), Date, Math, parseInt, eval。 string 方法比如 indexOf 和 replace, array 方法, ... Host objects (假定是浏览器环境): window, document, location, history, XMLHttpRequest, setTimeout, getElementsByTagName, querySelectorAll, ...

1
2
3
Native objects: Object (constructor), Date, Math, parseInt, eval。 string 方法比如 indexOf 和 replace, array 方法, ...
 
Host objects (假定是浏览器环境): window, document, location, history, XMLHttpRequest, setTimeout, getElementsByTagName, querySelectorAll, ...

ECMA-262][2 只定义了两个新的内置对象,即 GlobalMath (它们也是原生对象,根据定义,每个内置对象都是原生对象)。

以下是ECMA-262定义的内置对象(built-in):

global、Object、Function、Array、String、Boolean、Number、Math、Date、RegExp、JSON、Error对象(Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError 和URIError)

1
global、Object、Function、Array、String、Boolean、Number、Math、Date、RegExp、JSON、Error对象(Error,   EvalError, RangeError, ReferenceError,   SyntaxError, TypeError 和URIError)

图片 7

我们也可以修改内置对象的原型

JavaScript

if (!Array.prototype.forEach) { Array.prototype.forEach = function(fn){ for ( var i = 0; i < this.length; i++ ) { fn( this[i], i, this ); } }; } ["a", "b", "c"].forEach(function(value, index, array){ assert( value, "Is in position " + index + " out of " + (array.length - 1) ); });

1
2
3
4
5
6
7
8
9
10
11
if (!Array.prototype.forEach) {
  Array.prototype.forEach = function(fn){
    for ( var i = 0; i < this.length; i++ ) {
      fn( this[i], i, this );
    }
  };
}
["a", "b", "c"].forEach(function(value, index, array){
  assert( value, "Is in position " + index + " out of " + (array.length - 1) );
});

以上代码将输出:

PASS Is in position 0 out of 2 PASS Is in position 1 out of 2 PASS Is in position 2 out of 2

1
2
3
PASS Is in position 0 out of 2
PASS Is in position 1 out of 2
PASS Is in position 2 out of 2

注意:扩展原型是很危险的:

JavaScript

Object.prototype.keys = function(){ var keys = []; for ( var i in this ) keys.push( i ); return keys; }; var obj = { a: 1, b: 2, c: 3 }; assert( obj.keys().length == 3, "We should only have 3 properties." ); delete Object.prototype.keys;

1
2
3
4
5
6
7
8
9
10
11
12
Object.prototype.keys = function(){
  var keys = [];
  for ( var i in this )
    keys.push( i );
  return keys;
};
var obj = { a: 1, b: 2, c: 3 };
assert( obj.keys().length == 3, "We should only have 3 properties." );
delete Object.prototype.keys;

输出: FAIL We should only have 3 properties.

如果不是有特殊需要而去扩展原生对象和原型(prototype)的做法是不好的

JavaScript

//不要这样做 Array.prototype.map = function() { // code };

1
2
3
4
//不要这样做
Array.prototype.map = function() {
    // code
};

除非这样做是值得的,例如,向一些旧的浏览器中添加一些ECMAScript5中的方法。
在这种情况下,我们一般这样做:

XHTML

<script type="text/javascript"> if (!Array.prototype.map) { Array.prototype.map = function() { //code }; } </script>

1
2
3
4
5
6
7
<script type="text/javascript">
    if (!Array.prototype.map) {
        Array.prototype.map = function() {
            //code
        };
    }
</script>

flex-wrap属性

flex-wrap属性设置项目的换行方式(当容器宽度不足以容纳所有子项目时)。

CSS

div{ display:flex; flex-wrap:wrap; }

1
2
3
4
div{
    display:flex;
    flex-wrap:wrap;
}

此时结果如下:

图片 8

可以看到,当我把浏览器窗口缩小时,第三个p元素因为容纳不下而被挤下来了。

此属性的属性值有:

  • nowrap : 默认值,都在一行或者一列中显示
  • wrap : 伸缩项目无法容纳时,自动换行
  • wrap-reverse : 伸缩项目无法容纳时,自动换行,方向和wrap相反

当我将flex-wrap属性设置为wrap-reverse时,运行后的效果就是变成这样:

图片 9

法二:借助伪元素及 text-align:justify

定义如下 HTML 样式:

XHTML

<div class="container">     <div class="justify">         <i>1</i>         <i>2</i>         <i>3</i>         <i>4</i>         <i>5</i>     </div> </div>

1
2
3
4
5
6
7
8
9
<div class="container">
    <div class="justify">
        <i>1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
    </div>
</div>

我们知道,有个 text-align:justify 可以实现两端对齐文本效果。

text-align CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐,只控制它的行内内容的对齐。

text-align:justify 表示文字向两侧对齐。

一开始我猜测使用它可以实现,采用如下 CSS :

CSS

.justify{   text-align: justify; }   .justify i{   width:24px;   line-height:24px;   display:inline-block;   text-align:center;   border-radius:50%; }

1
2
3
4
5
6
7
8
9
10
11
.justify{
  text-align: justify;
}
 
.justify i{
  width:24px;
  line-height:24px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}

结果如下:

 

图片 10

Demo戳我

See the Pen justify1 by Chokcoco (@Chokcoco) on CodePen.

没有得到意料之中的结果,并没有实现所谓的两端对齐,查找原因,在 W3C 找到这样一段解释:

最后一个水平对齐属性是 justify,它会带来自己的一些问题。CSS 中没有说明如何处理连字符,因为不同的语言有不同的连字符规则。规范没有尝试去调和这样一些很可能不完备的规则,而是干脆不提这个问题。

额,我看完上面一大段解释还是没明白上面意思,再继续查证,才找到原因:

虽然 text-align:justify 属性是全兼容的,但是要使用它实现两端对齐,需要注意在模块之间添加[空格/换行符/制表符]才能起作用。

也就是说每一个 1 间隙,至少需要有一个空格或者换行或者制表符才行。

好的,我们尝试一下更新一下 HTML 结构,采用同样的 CSS:

XHTML

<div class="container">     <div class="justify">         <i>1</i>           <i>2</i>           <i>3</i>           <i>4</i>           <i>5</i>       </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="container">
    <div class="justify">
        <i>1</i>
 
        <i>2</i>
 
        <i>3</i>
 
        <i>4</i>
 
        <i>5</i>
 
    </div>
</div>

尝试给每一块中间添加一个换行符,结果如下:

图片 11

 

Demo戳我

See the Pen justify2 by Chokcoco (@Chokcoco) on CodePen.

啊哦,还是不行啊。

再寻找原因,原来是出在最后一个元素上面,然后我找到了 text-align-last 这个属性,text-align-last属性规定如何对齐文本的最后一行,并且 text-align-last 属性只有在 text-align 属性设置为 justify 时才起作用。

尝试给容器添加 text-align-last:justify

CSS

.justify{   text-align: justify;   text-align-last: justify; // 新增这一行 }   .justify i{   width:24px;   line-height:24px;   display:inline-block;   text-align:center;   border-radius:50%; }

1
2
3
4
5
6
7
8
9
10
11
12
.justify{
  text-align: justify;
  text-align-last: justify; // 新增这一行
}
 
.justify i{
  width:24px;
  line-height:24px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}

发现终于可以了,实现了多列均匀布局:

图片 12

 

Demo戳我

See the Pen justify-last by Chokcoco (@Chokcoco) on CodePen.

结束了?没有,查看一下 text-align-last 的兼容性:

图片 13

 

但是一看兼容性,惨不忍睹,只有 IE8+ 和 最新的 chrome 支持 text-align-last 属性,也就是说,如果你不是在使用 IE8+ 或者 最新版的 chrome 观看本文,上面 Demo 里的打开的 codePen 例子还是没有均匀分布。

上面说了要使用 text-align:justify 实现多列布局,要配合 text-align-last ,但是它的兼容性又不好,真的没办法了么,其实还是有的,使用伪元素配合,不需要 text-align-last 属性。

我们给 class="justify" 的 div 添加一个伪元素:

CSS

.justify{   text-align: justify; }   .justify i{   width:24px;   line-height:24px;   display:inline-block;   text-align:center;   border-radius:50%; }   .justify:after {   content: "";   display: inline-block;   position: relative;   width: 100%; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.justify{
  text-align: justify;
}
 
.justify i{
  width:24px;
  line-height:24px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
}
 
.justify:after {
  content: "";
  display: inline-block;
  position: relative;
  width: 100%;
}

去掉了 text-align-last: justify 了,增加一个伪元素,效果如下:

图片 14

 

通过给伪元素 :after 设置 inline-block 设置宽度 100% ,配合容器的 text-align: justify 就可以轻松实现多列均匀布局了。再多配合几句 hack 代码,可以实现兼容到 IE6+ ,最重要的是代码不长,很好理解。

最终实现题目初始所示:

图片 15

 

Demo戳我,任意列数均匀布局

See the Pen justifyLayout by Chokcoco (@Chokcoco) on CodePen.

此方法初见于这篇文章,得到原博主同意写入了本系列,非常值得一看:

  • 别想多了,只不过是两端对齐而已

 

所有题目汇总在我的 Github ,发到博客希望得到更多的交流。

到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏支持我写出更多好文章,谢谢!

打赏作者

用原型扩展对象

对js原生对象的扩展无非就是往prototype里注册,例如,我们可以往String对象里扩展ltrim,rtrim等方法。js每个对象都继承自Object,并且,对象和其他属性都通过prototype对象来继承。通过prototype对象,我们可以扩展任何对象,包括内建的对象,如StringDate

flex-flow属性

flex-flow 属性是 flex-direction 和 flex-wrap 属性的速记属性。

CSS

div{ display:flex; flex-flow:row wrap; }

1
2
3
4
div{
    display:flex;
    flex-flow:row wrap;
}

上面这个例子就相当于设置了flex-direction为row,flex-wrap为wrap。效果就是这样的:

图片 16

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 17 图片 18

1 赞 10 收藏 评论

String对象的扩展

JavaScript

<script type="text/javascript"> if(typeof String.prototype.ltrim=='undefined'){ String.prototype.ltrim = function(){ var s = this; s = s.replace(/^s*/g, ''); return s; } } if(typeof String.prototype.rtrim=='undefined'){ String.prototype.rtrim = function(){ var s = this; s = s.replace(/s*$/g, ''); return s; } } if(typeof String.prototype.trim=='undefined'){ String.prototype.trim = function(){ return this.ltrim().rtrim(); } } if(typeof String.prototype.htmlEncode=='undefined'){ String.prototype.htmlEncode = function(encodeNewLine){//encodeNewLine:是否encode换行符 var s = this; s = s.replace(/&/g, '&'); s = s.replace(/</g, '<'); s = s.replace(/>/g, '>'); s = s.replace(/'/g, '"'); if(encodeNewLine){ s = s.replace(/rn/g, '<br />'); s = s.replace(/r/g, '<br />'); s = s.replace(/n/g, '<br />'); } return s; } } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script type="text/javascript">
    if(typeof String.prototype.ltrim=='undefined'){
        String.prototype.ltrim = function(){
            var s = this;
            s = s.replace(/^s*/g, '');
            return s;
        }
    }
 
    if(typeof String.prototype.rtrim=='undefined'){
        String.prototype.rtrim = function(){
            var s = this;
            s = s.replace(/s*$/g, '');
            return s;
        }
    }
 
    if(typeof String.prototype.trim=='undefined'){
        String.prototype.trim = function(){
            return this.ltrim().rtrim();
        }
    }
 
    if(typeof String.prototype.htmlEncode=='undefined'){
        String.prototype.htmlEncode = function(encodeNewLine){//encodeNewLine:是否encode换行符
            var s = this;
            s = s.replace(/&/g, '&amp;');
            s = s.replace(/</g, '&lt;');
            s = s.replace(/>/g, '&gt;');
            s = s.replace(/'/g, '&quot;');
            if(encodeNewLine){
                s = s.replace(/rn/g, '<br />');
                s = s.replace(/r/g, '<br />');
                s = s.replace(/n/g, '<br />');
            }
            return s;
        }
    }
</script>

justify-content属性

justify-content 在当灵活容器内的各项没有占用主轴上所有可用的空间时对齐容器内的各项(水平)。

CSS

div{ display:flex; justify-content:space-around; }

1
2
3
4
div{
    display:flex;
    justify-content:space-around;
}

效果如下:

图片 19

可以看到所有项目平均分布,而且两端也有保留一半的空间。

此属性的属性值有:

  • flex-start : 伸缩项目以起始点靠齐
  • flex-end : 伸缩项目以结束点靠齐
  • center : 伸缩项目以中心点靠齐
  • space-between : 伸缩项目平均分布
  • space-around : 伸缩项目平均分布,但两端保留一半的空间

因为这些效果还是很容易就理解了,这里我就不一一演示了。

关于作者:chokcoco

图片 20

经不住流年似水,逃不过此间少年。 个人主页 · 我的文章 · 63 ·    

图片 21

Date对象的扩展

getDaysInMonth:获取某月有多少天

JavaScript

Date.getDaysInMonth = function (year, month) { var days = 0; switch (month) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: days = 31 break; case 4: case 6: case 9: case 11: days = 30; break; case 2: if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) days = 29; else days = 28; break; } return days; } if (typeof Date.prototype.format == 'undefined') { Date.prototype.format = function (mask) { var d = this; var zeroize = function (value, length) { if (!length) length = 2; value = String(value); for (var i = 0, zeros = ''; i < (length - value.length); i++) { zeros += '0'; } return zeros + value; }; return mask.replace(/"[^"]*"|'[^']*'|b(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])1?|[lLZ])b/g, function ($0) { switch ($0) { case 'd': return d.getDate(); case 'dd': return zeroize(d.getDate()); case 'ddd': return ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'][d.getDay()]; case 'dddd': return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][d.getDay()]; case 'M': return d.getMonth() + 1; case 'MM': return zeroize(d.getMonth() + 1); case 'MMM': return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][d.getMonth()]; case 'MMMM': return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][d.getMonth()]; case 'yy': return String(d.getFullYear()).substr(2); case 'yyyy': return d.getFullYear(); case 'h': return d.getHours() % 12 || 12; case 'hh': return zeroize(d.getHours() % 12 || 12); case 'H': return d.getHours(); case 'HH': return zeroize(d.getHours()); case 'm': return d.getMinutes(); case 'mm': return zeroize(d.getMinutes()); case 's': return d.getSeconds(); case 'ss': return zeroize(d.getSeconds()); case 'l': return zeroize(d.getMilliseconds(), 3); case 'L': var m = d.getMilliseconds(); if (m > 99) m = Math.round(m / 10); return zeroize(m); case 'tt': return d.getHours() < 12 ? 'am' : 'pm'; case 'TT': return d.getHours() < 12 ? 'AM' : 'PM'; case 'Z': return d.toUTCString().match(/[A-Z]+$/); // Return quoted strings with the surrounding quotes removed default: return $0.substr(1, $0.length - 2); } }); }; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
Date.getDaysInMonth = function (year, month) {
            var days = 0;
            switch (month) {
                case 1:
                case 3:
                case 5:
                case 7:
                case 8:
                case 10:
                case 12:
                    days = 31
                    break;
                case 4:
                case 6:
                case 9:
                case 11:
                    days = 30;
                    break;
                case 2:
                    if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0))
                        days = 29;
                    else
                        days = 28;
                    break;
            }
            return days;
        }
 
        if (typeof Date.prototype.format == 'undefined') {
            Date.prototype.format = function (mask) {
 
                var d = this;
 
                var zeroize = function (value, length) {
 
                    if (!length) length = 2;
 
                    value = String(value);
 
                    for (var i = 0, zeros = ''; i < (length - value.length); i++) {
 
                        zeros += '0';
 
                    }
 
                    return zeros + value;
 
                };
 
                return mask.replace(/"[^"]*"|'[^']*'|b(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])1?|[lLZ])b/g, function ($0) {
 
                    switch ($0) {
 
                        case 'd': return d.getDate();
 
                        case 'dd': return zeroize(d.getDate());
 
                        case 'ddd': return ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'][d.getDay()];
 
                        case 'dddd': return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][d.getDay()];
 
                        case 'M': return d.getMonth() + 1;
 
                        case 'MM': return zeroize(d.getMonth() + 1);
 
                        case 'MMM': return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][d.getMonth()];
 
                        case 'MMMM': return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][d.getMonth()];
 
                        case 'yy': return String(d.getFullYear()).substr(2);
 
                        case 'yyyy': return d.getFullYear();
 
                        case 'h': return d.getHours() % 12 || 12;
 
                        case 'hh': return zeroize(d.getHours() % 12 || 12);
 
                        case 'H': return d.getHours();
 
                        case 'HH': return zeroize(d.getHours());
 
                        case 'm': return d.getMinutes();
 
                        case 'mm': return zeroize(d.getMinutes());
 
                        case 's': return d.getSeconds();
 
                        case 'ss': return zeroize(d.getSeconds());
 
                        case 'l': return zeroize(d.getMilliseconds(), 3);
 
                        case 'L': var m = d.getMilliseconds();
 
                            if (m > 99) m = Math.round(m / 10);
 
                            return zeroize(m);
 
                        case 'tt': return d.getHours() < 12 ? 'am' : 'pm';
 
                        case 'TT': return d.getHours() < 12 ? 'AM' : 'PM';
 
                        case 'Z': return d.toUTCString().match(/[A-Z]+$/);
 
                            // Return quoted strings with the surrounding quotes removed    
 
                        default: return $0.substr(1, $0.length - 2);
 
                    }
 
                });
 
            };
        }

align-items属性

align-items 属性规定灵活容器内的各项的默认对齐方式,和旧版本中的box-align一样,处理伸缩项目容器的额外空间。

CSS

div{ display:flex; align-items:center; }

1
2
3
4
div{
    display:flex;
    align-items:center;
}

效果如下:

图片 22

那么,此属性的属性值有:

  • flex-start : 伸缩项目以顶部为基准,清理下部的额外空间
  • flex-end : 伸缩项目以底部为基准,清理上部的额外空间
  • center : 伸缩项目以中部为基准,平均清理上下部的额外空间
  • baseline : 伸缩项目以基线为基准,清理额外的空间
  • stretch : 伸缩项目填充整个容器,默认值

这些效果跟旧版本的box-align基本是一样的,具体怎么用,大家自己试一下就知道了。

使用原生js实现复制对象及扩展

jQueryextend()方法能很方便的实现扩展对象方法,这里要实现的是:使用原生js实现复制对象,扩展对象,类似jQuery中的extend()方法

JavaScript

var obj1 = { name : 'trigkit4', age : 22 }; var obj2 = { name : 'frank', age : 21, speak : function(){ alert("hi, I'm + name "); } }; var obj3 ={ age : 20 }; function cloneObj(oldObj) { //复制对象方法 if (typeof(oldObj) != 'object') return oldObj; if (oldObj == null) return oldObj; var newObj = Object(); for (var i in oldObj) newObj[i] = cloneObj(oldObj[i]); return newObj; } function extendObj() { //扩展对象 var args = arguments;//将传递过来的参数数组赋值给args变量 if (args.length < 2) return; var temp = cloneObj(args[0]); //调用复制对象方法 for (var n = 1; n < args.length; n++) { for (var i in args[n]) { temp[i] = args[n][i]; } } return temp; } var obj =extendObj(obj1,obj2,obj3); console.log(obj);//{ name: 'frank', age: 20, speak: [Function] } console.log(obj1);//{ name: 'trigkit4', age: 22 } console.log(obj2);//{ name: 'frank', age: 21, speak: [Function] } console.log(obj3);//{ age: 20 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var obj1 = {
    name : 'trigkit4',
    age : 22
};
var obj2 = {
    name : 'frank',
    age : 21,
    speak : function(){
        alert("hi, I'm + name ");
    }
};
 
var obj3 ={
    age : 20
};
 
function cloneObj(oldObj) { //复制对象方法
    if (typeof(oldObj) != 'object') return oldObj;
    if (oldObj == null) return oldObj;
    var newObj = Object();
    for (var i in oldObj)
        newObj[i] = cloneObj(oldObj[i]);
    return newObj;
}
 
function extendObj() { //扩展对象
    var args = arguments;//将传递过来的参数数组赋值给args变量
    if (args.length < 2) return;
    var temp = cloneObj(args[0]); //调用复制对象方法
    for (var n = 1; n < args.length; n++) {
        for (var i in args[n]) {
            temp[i] = args[n][i];
        }
    }
    return temp;
}
var obj =extendObj(obj1,obj2,obj3);
console.log(obj);//{ name: 'frank', age: 20, speak: [Function] }
console.log(obj1);//{ name: 'trigkit4', age: 22 }
console.log(obj2);//{ name: 'frank', age: 21, speak: [Function] }
console.log(obj3);//{ age: 20 }

align-self属性

align-self 和align-items 一样,都是清理额外空间,但它是单独设置某一个伸缩项目的。所有的值和align-itmes 一致。

CSS

p:nth-child(2){ align-self:center; }

1
2
3
p:nth-child(2){
    align-self:center;
}

此时的效果就是:

图片 23

其他属性值的效果同align-items,这里就不赘述。

es5-safe 模块

es5-safe 模块里,仅扩展了可以较好实现的可以安全使用的部分方法,包括:

JavaScript

Function.prototype.bind Object.create Object.keys Array.isArray Array.prototype.forEach Array.prototype.map Array.prototype.filter Array.prototype.every Array.prototype.some Array.prototype.reduce Array.prototype.reduceRight Array.prototype.indexOf Array.prototype.lastIndexOf String.prototype.trim Date.now

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Function.prototype.bind
Object.create
Object.keys
Array.isArray
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.every
Array.prototype.some
Array.prototype.reduce
Array.prototype.reduceRight
Array.prototype.indexOf
Array.prototype.lastIndexOf
String.prototype.trim
Date.now

详情:

flex属性

flex 属性和旧版本中的box-flex 类似,用来控制伸缩容器的比例分配。

CSS

p:nth-child(1) { flex: 1; } p:nth-child(2) { flex: 3; } p:nth-child(3) { flex: 1; }

1
2
3
4
5
6
7
8
9
p:nth-child(1) {
flex: 1;
}
p:nth-child(2) {
flex: 3;
}
p:nth-child(3) {
flex: 1;
}

效果如下:

图片 24

对象的创建

JavaScript 支持四种类型的对象:内部对象、生成的对象、宿主给出的对象(如 Internet 浏览器中的 windowdocument)以及ActiveX 对象(外部组件)。

Microsoft Jscript 提供了 11 个内部(或“内置”)对象。它们是Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、Error 以及 String 对象。每一个对象有相关的方法和属性,

JavaScript中对象的创建有以下几种方式:

(1)使用内置对象 (2)使用JSON符号 (3)自定义对象构造

1
2
3
(1)使用内置对象
(2)使用JSON符号
(3)自定义对象构造

order属性

order 属性和旧版本的box-ordinal-group 属性一样控制伸缩项目出现的顺序。

CSS

p:nth-child(1) { order: 2; } p:nth-child(2) { order: 3; } p:nth-child(3) { order: 1; }

1
2
3
4
5
6
7
8
9
p:nth-child(1) {
    order: 2;
}
p:nth-child(2) {
    order: 3;
}
p:nth-child(3) {
    order: 1;
}

效果如下:

图片 25

一、使用内置对象

JavaScript可用的内置对象可分为两种: 1,JavaScript语言原生对象(语言级对象),如String、Object、Function等; 2,JavaScript运行期的宿主对象(环境宿主级对象),如window、document、body等。

1
2
3
4
JavaScript可用的内置对象可分为两种:
 
1,JavaScript语言原生对象(语言级对象),如String、Object、Function等;
2,JavaScript运行期的宿主对象(环境宿主级对象),如window、document、body等。

总结

flex布局虽然目前的兼容性还不是很好,不过未来肯定是很热的布局方式。自己也是最近才接触flex布局,为了巩固这些基本的知识点,我就写了这两篇博客。虽然我知道自己总结得不是很好,但主要还是为了方便自己和那些还没接触过flex布局的博友们。

内置对象列表

Array Boolean Date Error EvalError Function Infinity JSON Map Math NaN Number Object ParallelArray Promise Proxy RegExp Set String Symbol SyntaxError Uint32Array WeakSet decodeURI decodeURIComponent() encodeURI() encodeURIComponent() escape()已废弃 eval() isFinite() isNaN() null parseFloat parseInt undefined

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Array
Boolean
Date
Error
EvalError
Function
Infinity
JSON
Map
Math
NaN
Number
Object
ParallelArray
Promise
Proxy
RegExp
Set
String
Symbol
SyntaxError
Uint32Array
WeakSet
decodeURI
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()已废弃
eval()
isFinite()
isNaN()
null
parseFloat
parseInt
undefined

以上资料来源于:

最后

在这里我推荐一下阮一峰写的两篇关于flex布局的博客,写得非常好:

自定义对象构造

创建高级对象构造有两种方式:使用“this”关键字构造、使用原型prototype构造

Flex 布局教程:语法篇:

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:CSS3弹性伸缩布局,原生对象及扩展

上一篇:创建对象的七种方式,作用域链与闭包 下一篇:创建对象的,来看看机智的前端童鞋怎么防盗
猜你喜欢
热门排行
精彩图文