金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > 三角形运用,数组和对象就像书和报纸一样

三角形运用,数组和对象就像书和报纸一样

发布时间:2019-11-01 14:59编辑:web前端浏览(124)

    酷酷的 CSS3 三角形运用

    2016/08/04 · CSS · 2 评论 · CSS3, 三角形

    原文出处: keepfool   

    JavaScript 数组和对象就像书和报纸一样

    2017/05/26 · JavaScript · 对象, 数组

    原文出处: Kevin Kononenko   译文出处:蔡耀冠   

    简评:作者将 JavaScript 的数组和对象比喻为书和报纸,数组更注重顺序,而标签则对对象更重要。

    如果你读书、看报,那么你会理解 JavaScript 的数组和对象之间的不同之处。

    当你刚开始学 JavaScript 时,用哪一种方式组织和存储数据更好往往会让人困惑。

    一方面,你可能在学习 “for” 循环的时候熟悉了数组。但是,一旦你尽可能多地将数据塞进数组,当你在检查你的代码的时候,你创造的乱七八糟的东西将会让你难以理解。

    当你可以快速地决定每个结构的目标时,在对象和数组之间选择会简单得多。数组和书籍存储信息的方式相差无几,而对象则和报纸存储信息的方式差不多。

    让我们来看看!

    聊聊 CSS3 中的 object-fit 和 object-position

    2016/11/22 · CSS · CSS3

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

    最近一直忙于将JavaScript学习的笔记整理成电子书,也没什么空闲时间写新的文章。趁着今天有点空闲,决定再来折腾一下CSS3中的两个属性:object-fitobject-position

    这两个奇葩的属性是做什么的呢?其实它们是为了处理替换元素(replaced elements)的自适应问题,简单的说,就是处理替换元素的变形(这里指长宽比例变形)问题。

    等等,好像多了一个名词,啥叫替换元素?替换元素其实是:

    • 其内容不受CSS视觉格式化模型控制的元素,比如image,嵌入的文档(iframe之类)或者applet,叫做替换元素。比:img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。
    • CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object,video,textarea,input也是替换元素,audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。

    这个当然不是我头脑风暴来的,而是引用别人的解释:引用

    常见的替换元素有<video>、<object>、<img>、<input type=”image”>、<svg>、<svg:image>和<svg:video>等。

    要是看的稀里糊涂的也没关系,接着往下看,我相信你会懂得!

    1、object-fit

    语法:

    object-fit: fill | contian | cover | none | scale-down;

    1
    object-fit: fill | contian | cover | none | scale-down;
    • fill : 默认值。填充,可替换元素填满整个内容区域,可能会改变长宽比,导致拉伸。
    • contain : 包含,保持原始的尺寸比例,保证可替换元素完整显示,宽度或高度至少有一个和内容区域的宽度或高度一致,部分内容会空白。
    • cover : 覆盖,保持原始的尺寸比例,保证内容区域被填满。因此,可替换元素可能会被切掉一部分,从而不能完整展示。
    • none : 保持可替换元素原尺寸和比例。
    • scale-down : 等比缩小。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

    不好意思,我又要摆妹子来诱惑你们了,看效果图:

    图片 1

    上面的五个例子的代码:

    <style> .box{ position:relative; float:left; margin:0 10px 40px 10px; width:150px; height:150px; } .box>img{ width:100%; height:100%; background-color:#000; } .fill{ object-fit:fill; } .contain{ object-fit:contain; } .cover{ object-fit:cover; } .none{ object-fit:none; } .scale{ object-fit:scale-down; } </style> <div class="box"> <img src="example-girl.jpg" class="fill" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="contain" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="cover" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="none" alt=""> </div> <div class="box"> <img src="example-girl.jpg" class="scale" alt=""> </div>

    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
    <style>
    .box{  
      position:relative;  
      float:left;  
      margin:0 10px 40px 10px;  
      width:150px;  
      height:150px;  
    }  
    .box>img{  
      width:100%;  
      height:100%;  
      background-color:#000;  
    }  
    .fill{  
      object-fit:fill;  
    }  
    .contain{  
      object-fit:contain;  
    }  
    .cover{    
      object-fit:cover;  
    }  
    .none{  
      object-fit:none;  
    }  
    .scale{  
      object-fit:scale-down;  
    }  
    </style>
     
    <div class="box">  
      <img src="example-girl.jpg" class="fill" alt="">  
    </div>  
    <div class="box">  
      <img src="example-girl.jpg" class="contain" alt="">
    </div>  
    <div class="box">  
      <img src="example-girl.jpg" class="cover" alt="">
    </div>  
    <div class="box">  
      <img src="example-girl.jpg" class="none" alt="">
    </div>  
    <div class="box">  
      <img src="example-girl.jpg" class="scale" alt="">
    </div>

    看到这些效果,我想同志们最关心的的应该是兼容性,点这里点这里

    2、object-position

    object-position属性决定了它的盒子里面替换元素的对齐方式。

    语法:

    object-position: <position>

    1
    object-position: <position>

    默认值是50% 50%,也就是居中效果,其取值和CSS中background-position属性取值一样。(如果不熟悉background-position,可以瞄瞄这里《CSS3 Background》)

    例如:替换元素位于内容区域的左上角

    img{ object-fit: contain; object-position: 0 0; }

    1
    2
    3
    4
    img{
      object-fit: contain;
      object-position: 0 0;
    }

    效果图:

    图片 2

    例如:替换元素相对于左下角10px 10px地方定位

    img{   object-fit: contain;   object-position: bottom 10px left 10px; }

    1
    2
    3
    4
    img{
      object-fit: contain;
      object-position: bottom 10px left 10px;
    }

    效果图:

    图片 3

    当然,你也可以使用calc()来定位:

    img{   object-fit: contain;   object-position: calc(100% - 10px) calc(100% - 10px); }

    1
    2
    3
    4
    img{
      object-fit: contain;
      object-position: calc(100% - 10px) calc(100% - 10px);
    }

    效果图:

    图片 4

    它还支持负数:

    img{   object-fit: contain;   object-position: -10px calc(100% - 10px); }

    1
    2
    3
    4
    img{
      object-fit: contain;
      object-position: -10px calc(100% - 10px);
    }

    效果图:

    图片 5

    总之,object-position的特性表现与backgound-position一样一样的。

    兼容性:点这里

    到这里,这两个属性算是讲完了,就是这么简单。

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

    打赏作者

    概述

    在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角、阴影、锯齿或者一些小图标。

    在CSS3出现后,借助一些具有魔力的CSS3属性,使得这些元素大多都可以由开发人员自己来完成。在开始阅读这篇文章前,我们先喊个口号:不想当艺术家的程序员不是好设计师!

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星!

    Triangle Demo  |  Page Demo  |  GitHub Source

    数组:数据的顺序是最重要的

    这是超短篇小说的章节,以数组的形式。

    JavaScript

    var book = ['foreword', 'boyWhoLived', 'vanishingGlass', 'lettersFromNoOne', 'afterword'];

    1
    var book = ['foreword', 'boyWhoLived', 'vanishingGlass', 'lettersFromNoOne', 'afterword'];

    好吧,我承认,这是《哈利波特》系列的第一本的前三章。这是数组的可视化的形式:

    图片 6当顺序成为组织信息的最重要的因素时你应该使用数组。没有人(我希望)这样看《哈利波特》的章节标题,“嗯…,那章看起来很有趣,让我跳到那!”章节的顺序告诉你下一章是什么。

    当你从数组中检索信息时,你使用每个元素的下标。数组是从零开始索引的,这意味着从 0 开始计数而不是 1。

    如果你想要访问下标为 0 的书籍数组,你要用:

    JavaScript

    books[0]

    1
    books[0]

    然后你会得到:

    JavaScript

    'foreword'

    1
    'foreword'

    如果你想得到这本书第三章的章节标题,你要用:

    JavaScript

    books[2]

    1
    books[2]

    你会基于书的章节顺序来读下一章,而不是基于书的章节标题。

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

    任选一种支付方式

    图片 7 图片 8

    1 赞 收藏 评论

    图例

    我们先来看一副设计图

    图片 9

    这幅图复杂的元素不多,布局也较为简单,我们大致分析一下,需要PS美工爸爸帮忙做的只有一件事情,就是将上半部分的蓝色背景图给抠出来。
    除此之外,出现在这幅设计图的一些特殊形状和小图标,都可以通过CSS3来实现。
    我们将这些特殊形状和小图标分为两类:

    1. 可以用Icon Font实现的

    图片 10图片 11

    Icon Font是将一些图标作成字体文件,在CSS中指定font-face和font-family,然后为每个图标指定相应的class。
    在网页中使用Icon Font就像使用普通的文字一样,比如font-size属性可以设定图标的大小,设定color属性可以设定图标的颜色。 更多内容,请参考阿里巴巴矢量图标管理网站:。

    2. 不能用IconFont实现的

    图片 12

    为什么这些图形不用IconFont实现呢?因为通常Icon Font提供的都是一些正方形的矢量图标,也就是长等于宽的图标。
    本篇要讲的就是如何通过CSS3来实现这4个图形。

    对象:数据标签是最重要的

    报纸可能看起来是这样的,以对象的形式。

    JavaScript

    var newspaper= { sports: 'ARod Hits Home Run', business: 'GE Stock Dips Again', movies: 'Superman Is A Flop' }

    1
    2
    3
    4
    5
    var newspaper= {
      sports: 'ARod Hits Home Run',
      business: 'GE Stock Dips Again',
      movies: 'Superman Is A Flop'
    }

    下面是以可视化的形式来看同样的数据。

    图片 13当你要基于数据标签来组织数据时,对象是最好的。当你看报纸时,你可能不会从前往后一页页地读。你会基于新闻标题来跳过特定的部分。无论在报纸的哪个地方,你都可以快速的跳过并且有合适的上下文。这和书不一样,书的章节顺序很重要。

    对象通过键/值对来组织数据。看起来像这样:

    JavaScript

    key: value

    1
    key: value

    如果你想要进入报纸的商业部分,你会使用这样的

    JavaScript

    newspaper[‘business’]

    1
    newspaper[‘business’]

    或者:

    JavaScript

    newspaper.business

    1
    newspaper.business

    这回返回 ‘GE Stock Dips Again’。所以,通过数据的标签(键)来访问数据是最简单的,你想要把数据存在对象里。

    关于作者:TGCode

    图片 14

    路途虽远,无所畏 个人主页 · 我的文章 · 9 ·    

    图片 15

    三角形

    不知大家注意到了没有,这4个图形都包含了一个特殊的元素——三角形。
    这4个图形,都是由三角形、长方形,或者是一个被啃掉了一口的长方形组成的。

    CSS3是如何实现三角形的呢?——答案是通过边框,也就是border属性。

    结合对象和数组

    目前为止,我们只是在数组和对象中保存了 strings,你也可以保存其他类型的数据,比如 numbers 和 booleans,同时:

    1. 对象内的数组
    2. 数组中的对象
    3. 数组中的数组
    4. 对象中的对象

    现在开始变复杂了。但是,你几乎只需要两种以扩展方式的组合来存储你的数据。当你一星期后回顾代码也想要理解。

    让我们再看下书的例子。如果我们想要保存每章的页数会怎样呢?用对象来填满我们的数组可能是最好的。像这样:

    JavaScript

    var book =[ [‘foreword’, 14], [‘boywholived’, 18] ]

    1
    2
    3
    4
    var book =[
      [‘foreword’, 14],
      [‘boywholived’, 18]
    ]

    JavaScript

    var book = [ {name:'foreword', pageCount: 14}, {name:'boyWhoLived', pageCount: 18}, {name:'vanishingGlass', pageCount: 13}, {name:'lettersFromNoOne', pageCount: 17}, {name:'afterword', pageCount: 19} ];

    1
    2
    3
    4
    5
    6
    7
    var book = [
      {name:'foreword', pageCount: 14},
      {name:'boyWhoLived', pageCount: 18},
      {name:'vanishingGlass', pageCount: 13},
      {name:'lettersFromNoOne', pageCount: 17},
      {name:'afterword', pageCount: 19}
    ];

    我们维护了每章的顺序,现在我们可以叫出每章的特定的属性。所以,如果我们想要知道第二张的页数,我们可以用:

    JavaScript

    book[1][‘pageCount’]

    1
    book[1][‘pageCount’]

    这会返回一个 18 的

    现在假设你想知道你当地报纸每个栏目的顶级作者的排名,基于他们的资历。你可以在报纸对象中用一个数组来表达,像这样:

    JavaScript

    var newspaper= { sports: 'ARod Hits Home Run', sportsWriters: ['Miramon Nuevo', 'Rick Reilly', 'Woddy Paige'], business: 'GE Stock Dips Again', businessWriters: ['Adam Smith', 'Albert Humphrey', 'Charles Handy'], movies: 'Superman Is A Flop', moviesWriters: ['Rogert Ebert', 'Andrew Sarris', 'Wesley Morris'] }

    1
    2
    3
    4
    5
    6
    7
    8
    var newspaper= {
      sports: 'ARod Hits Home Run',
      sportsWriters: ['Miramon Nuevo', 'Rick Reilly', 'Woddy Paige'],
      business: 'GE Stock Dips Again',
      businessWriters: ['Adam Smith', 'Albert Humphrey', 'Charles Handy'],
      movies: 'Superman Is A Flop',
      moviesWriters: ['Rogert Ebert', 'Andrew Sarris', 'Wesley Morris']
    }

    一个数组用来存储作者很合适,因为顺序很重要。你知道每个数组中靠前的作者排名更高。下标为 0 的作者是排名最高的。

    你可以通过创建对象来优化报纸对象。比如,一个包含标题和作者列表的体育对象。但我会让你来尝试!

    1 赞 2 收藏 评论

    图片 16

    长方形边框

    HTML的块级元素都是长方形的,比如我们设定了以下样式:

    JavaScript

    <style> .simple-retangle { margin: 50px auto; width: 200px; height: 200px; border: 40px solid salmon; } </style> <div class="simple-retangle"></div>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
        .simple-retangle {
            margin: 50px auto;
            width: 200px;
            height: 200px;
            border: 40px solid salmon;
        }
    </style>
    <div class="simple-retangle"></div>

    如大家所认知的,这只是一个简单的长方形,这个长方形在画面中是这样显式的:

    图片 17

    这个长方形太单调了,再给它点颜色看看,咱们来个彩色边框吧。

    JavaScript

    <style> .colored-border-retangle { margin: 50px auto; width: 200px; height: 200px; border-top: 40px solid coral; border-right: 40px solid lightblue; border-bottom: 40px solid lightgreen; border-left: 40px solid mediumpurple; } </style> <div class="colored-border-retangle"></div>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <style>
        .colored-border-retangle {
            margin: 50px auto;
            width: 200px;
            height: 200px;
            border-top: 40px solid coral;
            border-right: 40px solid lightblue;
            border-bottom: 40px solid lightgreen;
            border-left: 40px solid mediumpurple;
        }
    </style>
    <div class="colored-border-retangle"></div>

    在画面中,每个边框都变成一个梯形了。

    图片 18

    为什么它会变成梯形呢?

    图片 19

    请注意长方形的4个角,以左上角为例,它到底是属于左边框还是上边框呢?
    左上角,既属于左边框,又属于上边框,角落的归属成了一个问题,浏览器为了不让边框打架,就让二位各分一半吧。
    于是乎左上角就被一分为二,变成了两个三角形,三角形靠近哪个边框,就显示那个边框的颜色。

    本文由金沙国际官网发布于web前端,转载请注明出处:三角形运用,数组和对象就像书和报纸一样

    关键词: