网格系统

目前HTML5的布局方式有很多：float，定位，弹性布局，分栏等。而在移动开发中，需要考虑到布局能够适应到不同的设备、方向和屏幕尺寸，可能还需要一些结构的更改： 网格布局 是一种新的布局方法，该方法使你能够基于固定数量、浏览器窗口中的可用空间或二者组合划分网页主要区域的空间。 通过将网格布局与 媒体查询（@media） 结合使用，可以使布局无缝地适应设备外形尺寸、方向、可用空间等因素的变化。 先给大家看一个例子，后面有属性介绍： http://www.ibokanfamily.com/win8/grid/grid.html (推荐使用支持转屏的win8设备查看，如surface) 这是写完的效果图，首先是它的结构： < body > < div id ="grid" > <!-- 结构的位置可以任意放置 --> < div id ="nav" draggable ="true" > 好吧，我是导航 </ div > < div id ="tit" > 唐菜也 </ div > < div id ="con" > 我是一些文本段落 </ div > < div id ="pic" > < img id ="mainphoto" alt ="mainphoto" src ="http://www.ibokanfamily.com/win8/grid/metro.jpg" /> </

本文译自 《A Complete Guide to Grid》 。由于译者水平有限，如有错误，请不吝指正。 文中所有图的版权归原作者所有 。 导语：CSS网格布局是目前CSS中可用的最强大的布局系统。它是二维系统，即可以处理行和列，不像flexbox只是一维系统。我们通过为父元素（变为grid container）和子元素（变为grid items）应用CSS规则来使用Grid布局。 一、介绍 CSS网格布局（亦称Grid）是一种基于网格的二维布局系统，主要致力于改变我们在页面中基于网格设计页面的方式。我们通常使用CSS布局网页，但有时并不好用。一开始我们使用table，之后用浮动、定位和行内块级元素，但是所有这些方法都需要兼容，并且未实现一些重要功能（如垂直居中）。弹性盒子可以提供帮助，但它主要面向一维布局，不能处理复杂的两维布局（弹性盒子和网格布局其实配合得不错）。只要我们写网页，我们不得不考虑那些布局问题的hack实现，而网格布局是首个特地为解决这种问题而创造出来的模块。 我写这篇教程主要是因为受到两件事的影响。一个是Rachel Andrew的那本了不起的书—— Get Ready for CSS Grid Layout 。这本书清晰透彻的介绍了Grid，也是本文的基础。我非常提倡你能买本读一下。另一个是Chris Coyier的 A Complete Guide to

1.背景介绍 CSS Grid(网格) 布局（又称为 “Grid(网格)” ）， 是一个二维的基于网格的布局系统它的目标是完全改变我们基于网格的用户界面的布局方式。CSS 一直用来布局我们的网页， 但一直以来都存在这样或那样的问题。一开始我们用表格（table），然后是浮动（float） ，再是定位（postion）和内嵌块（inline-block），但是所有这些方法本质上都是只是 hack 而已，并且遗漏了很多重要的功能 （例如垂直居中）。Flexbox 的出现很大程度上改善了我们的布局方式，但它的目的是为了解决更简单的一维布局 ，而不是复杂的二维布局（实际上 Flexbox 和 Grid 能结合在一起工作，而且配合得非常好） 。Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块，我们终于不需要想尽办法hack 页面布局样式了。 2.知识剖析 必须使用 display: grid 将容器元素定义为一个 grid(网格) 布局， 使用 grid-template-columns 和 grid-template-rows 设置 列 和 行 的尺寸大小， 然后通过 grid-column 和 grid-row 将其子元素放入这个 grid(网格) 中。与 flexbox 类似，网格项（grid items）的源顺序无关紧要。 你的 CSS 可以以任何顺序放置它们

（前面是大概简介，后面为具体实例） 可参考此文章 一、flex布局简介 flex是flexible box（弹性布局）的简介，是一个一维系统，用来为盒状模型提供最大的灵活性。 使用： 任何容器（行内元素可设置为display:inline-block）; 特点： 空间分布在行中进行，而非整体 二、grid布局简介 Gird Layout(css网格布局)是css中最强大的布局系统，是一个二维系统，可以同时处理行和列，可以通过将css规则用于父元素（网格容器）和该元素的子元素（网格元素）来使用网格布局。 使用： 对父元素设置dispay：grid;grid-template-colums和grid-template-rows来设置几行几 列，然后对 子元素设置占据几行几列 特点： 二维网格结构，十分便于操作 基本概念： *container：网格容器，设置display:grid就将容器变成了网格容器 *item：网格项，指网格容器中每一个子元素 *line：网格线，网格之间的分界线 *track：网格轨道，两条相邻的网格线之间的空间（行或列） *cell：网格单元，每个小网格 *area：网格区域，四条网格线包围起来的区域 *fr：在自由空间进行分配的一个单位 三、实例操作 1.flex （1） 2.grid （1）grid-template-columns、grid

原文链接 四边形网格定义 四边形网格，顾名思义，它的每个网格面片是一个四边形。有时候，四边形网格里会掺杂一些三角形面片，我们把这类网格也都叫做四边形网格。三角形网格常见于逆向建模领域，比如通过三维扫描仪扫描得到的网格。四边形网格常见于正向建模系统，如3dsMax，ZBrush等。这主要是因为点云或者三角形网格转成四边形网格有一定的难度，特别是高质量的四边形网格。 正则点：内点-度数为4；边界点(非拐点(Corner))-度数为3；边界点(凸拐点)-度数为2；边界点(凹拐点)-度数为4 分类：主要是根据顶点的正则度来进行分类。如下图所示，第一类网格为正则网格，所有顶点度数为4，只有特殊拓扑结构的网格能达到正则；第二类是半正则网格，它是分片正则的；第三类是度数半正则网格，它的顶点度数绝大部分是4；最后一类是无序的四边形网格，它有很多非正则点。 四边形网格的优缺点 与三角形网格相比，四边形网格有一些优点： 特征边对齐：四边形网格的边可以很自然的与特征边进行对齐，边走向也可以很自然的与模型的几何特征走向对齐。 样条曲面和细分曲面：样条曲面和Catmull-Clark细分曲面常见的定义域就是四边形 纹理贴图：半正则的四边形网格，每个正则片可以很好的与图片对齐，有利于图片的采样精确性 同时四边形网格也有一些缺点： 四边形可能不共面 高质量的四边形网格 奇异点个数尽量少，布局合理

目录 前言 一、Abstract（概括） 二、Introduction（介绍） 三、Unified Detection（统一检测） 1、Network Design（网络设计） 2、Training（训练） 3、Inference（推论） 4、Limitations of YOLO（YOLO的局限性） 前言 看过很多的YOLO中文版学习笔记，干货比较多，但是，有点干，对于很多想要入门的童鞋来说，看着很难理解，一些概念晦涩难懂，一些英文表述不知为何意。所以从这一篇博客开始，我尽量用比较简单的语言来讲述YOLO v1，把我个人的理解分享给大家，希望大家能够学懂YOLO，会用YOLO。 我会讲的很细，所以一篇博客来说一篇论文，内容有点多，我会分成两个博客来讲述YOLO论文还会有一部分博客作为补充，希望大家能认真学习，文中的如果哪里写的不好或者有错误，还希望大家能够不吝赐教。 先分享一波YOLO相关的文章，帮助大家更好的学习YOLO。 1.YOLO v1 论文笔记1： https://blog.csdn.net/shuiyixin/article/details/82533849 2.YOLO v1 论文笔记2： https://blog.csdn.net/shuiyixin/article/details/82560920 3.YOLO v1 代码实战 ： https://blog

Unity接界面布局： Hierarchy（层级视图）：存放当前游戏场景内所有游戏物体 Scense（主界面）：主要的游戏设计界面，开发者操作界面 Game（游戏视图）：玩家视角，也是摄像机所要看到的界面。 Project(项目）：工程内的所有资源都放在Assets文件夹下，如：图片（texture），预设体（prefabs），材质（meterials），脚本（scripts），场景（Scene）..... Console(控制台输出）：在一些脚本运行时，需要打印输出信息都在这里显示。 Insepector（属性面板）：游戏物体的基本属性和在游戏物体上的组件 游戏对象：在scene 中出现所有物品都叫游戏对象，游戏对象之间区别在于游戏对象上面的组件不相同（注：Unity是面向组件开发的） Unity使用快捷键： Q:鼠标变手，可拖动整个场景的移动 W：选中某一游戏物体时，可在空间上移动该游戏物体 E：选中某一游戏物体时，可以沿着x，y，z轴旋转物体 R：选中某一游戏物体时，可以沿着x，y，z轴放大，缩小物体 T：2D Terrain地形系统： 可以创建地形，编辑地形，为地形添加树木和花草 3D基础理论 1，坐标系： 坐标系分为2D笛卡尔坐标和3D笛卡尔坐标系（左手） 世界坐标系-Global：对应事物的 东，西，南，北，不会随着物体的改变而改变 物体坐标-Local：对应事物的 前

关于Service Mesh， 数人云 之前给大家分享了敖小剑老师的《Qcon2017实录|Service Mesh：下一代微服务》那么它对于容器相比传统模式都有哪方面的优势呢？同作为Service Mesh的新生代，Istio v0.2都有哪些添加与改进？本文见分晓！ 容器仍然是目前极度火热的话题，一些人称，通过容器他们正处于崛起的边缘，成为数据中心的主宰，另外一些人则认为容器只适用于云计算，还有一些人在耐心地等待着看容器是不是应用程序基础设施的SDN，一些权威人士在极力吹捧，但其实很少在生产中付诸实践。 通过一些研究和调查可以看到容器确实在吸引着人们的注意： 32%的公司每年花费50万美元或更多的资金用于容器技术的授权和使用费（Portworx的年度容器采用率调查） 采用容器技术的公司在9个月内将其容器数量增加5倍（Datadog 8个令人惊讶的事实，关于Docker的采用。 容器的密度为平均每台主机10个容器（Sys Docker 使用报告2017） 2017年，Docker的使用率飙升至35%（2017年云计算报告） 5%的企业希望采用容器来部署传统的网络托管应用服务（F5 Networks State of Application Delivery 2017） 如大多数的基础设施——无论是应用还是网络——在可预见的未来，容器都将与日常运行在大型机和Midranges

本章节我们将讲解 Bootstrap 的网格系统（Grid System）。 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 什么是网格（Grid）？ 摘自维基百科： 在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。 简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。 什么是 Bootstrap 网格系统（Grid System）？ Bootstrap 官方文档中有关网格系统的描述： Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。 让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。 移动设备优先策略 内容 决定什么是最重要的。 布局 优先设计更小的宽度。

一、什么是Grid布局？ 　　CSS Grid （网格布局），是一个基于二维网格布局的系统。网格由一组相交的水平线和垂直线组成，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。 二、浏览器支持情况(统计数据来自： http://caniuse.com/ ) 三、Grid基本概念 　　 网格容器、网格项 　　将某一个元素的display属性值设置为grid或者inline-grid，该元素就被声明成为一个网格容器(Grid Container)，它的所有子元素都会进入grid文档流，成为网格项(Grid item) 　　 display : grid | inline-grid | subgrid 　　 --grid ：定义一个块级的网格容器 　　--inline-grid ：定义一个内联的网格容器 　　--subgrid ：定义一个继承其父级网格容器的行和列的大小的网格容器，它是其父级网格容器的一个子项。 1 <div class="container"> 2 <div class="item">1</div> 3 <div class="item">2</div> 4 <div class="item">3</div> 5 <div class="item">4</div> 6 </div> 1 .container{ 2 display: grid; 3