box | 易学教程

引导记忆 CSS Flex布局（容器属性篇）

阅读更多关于引导记忆 CSS Flex布局（容器属性篇）

前言 hey, 大家好，我是迪迪，今天带大家轻松入门CSS Flex布局授人以鱼不如授人以渔，在文章中讲到个别知识点会附上小编的学习思路~ 希望能带给同行朋友们一些帮助，废话不多说，咱们开始吧！首先，理解一下什么是Flex Box布局 Flex是Flexible的缩写，意为伸缩的、灵活的 Box不用多说，就是盒子的意思所以Flex Box布局可以理解成伸缩布局盒模型接着，我们直接上手 2.1 先写一个简单的html结构 < div class = " container " >   < div > 1 </ div > < div > 2 </ div > < div > 3 </ div > < div > 4 </ div > < div > 5 </ div > </ div > 2.2 再给一些简单的样式 /*容器样式*/ .container { width : 600px ; height : auto ; border : 1px solid #000 ; } /*容器下的子元素样式*/ .container>div { height : 50px ; font-size : 45px ; } /*容器下为奇数的子元素*/ .container>div:nth-child(odd) {

vagrant搭建centos环境

阅读更多关于 vagrant搭建centos环境

vagrant搭建centos环境前言 macos作为开发环境已经相当方便，有很丰富的工具，如 homebrew 类似于ubuntu的 apt-get 和centos的 yum ，很方便地安装各种开发工具。但终究与线上生产环境不同，即便安装的是相同的软件，安装目录，管理方式都有所不同。当项目很复杂，或者有多个项目时，很容易将mac本地环境弄得乱七八糟。为了能与线上生产环境一致，尝试过用docker, 并没有想象中的方便，可能是我对dokcer的了解太少。且觉得docker的门槛较高。衡量各种方案后，最终选择用vagrant与virtualBox搭建一个完整的linux系统，这样能够与线上生产环境一致，也能很方便地进行移植。环境准备下载安装 virtualBox 下载安装 vagrant 使用迅雷下载官方镜像我选择的是 centos7.2 的镜像安装新建目录 centos ，作为vagrant的根目录导入下载的镜像 ☁ centos vagrant box add centos ~/Downloads/vagrant-centos-7.2.box # 将box命名为centos 初始化 ☁ centos vagrant init 会自动生成 Vagrantfile 配置文件修改配置文件设置box名称 box名称须与上面命令指定的box名一致 config.vm

使用vagrant与virtualbox简易安装centos7 与 docker

阅读更多关于使用vagrant与virtualbox简易安装centos7 与 docker

使用vagrant与virtualbox简易安装centos7 与 docker 写在前面环境要求：1.vagrant 2.virtualbox vagrant下载地址： https://www.vagrantup.com/downloads.html virtualbox下载地址： https://www.virtualbox.org/wiki/Downloads 一.镜像环境准备（访问外网较快的请跳过此步骤）官方仓库： https://atlas.hashicorp.com/boxes/search 官方镜像： https://vagrantcloud.com/boxes/search 第三方仓库： http://www.vagrantbox.es/ 本文将采取centos7作为实验基础镜像由于网络原因，在此提供下载百度云镜像地址centos7： https://pan.baidu.com/s/19mcMNhyHrCH0jwXTEMWitw 二.添加本地镜像，初始化box，配置docker下载地址，启动本地环境 1.添加本地box（访问外网较快的请跳过此步骤）在cmd窗口中，执行如下命令： vagrant box add centos7 d:/iso/CentOS-7-x86_64-Vagrant-1804_02.VirtualBox.box 1 *** 命令参考

CSS3弹性盒子（Flex Box）

阅读更多关于 CSS3弹性盒子（Flex Box）

CSS3弹性盒子（Flex Box） 1、flex-direction属性指定了弹性子元素在父容器中的位置 flex-direction:row | row-reverse | column | column-reverse flex-direction的值有： row：横向从左到右排列（左对齐），默认的排列方式 row-reverse：反转横向排列（右对齐），从后往前排，最后一项排在最前面。 column：纵向排列。 column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。 2、justify-content属性内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。 justify-content语法如下： justify-content：flex-start | flex-end | center | space-between | space-around flex-strat：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被防止在改行的main-start边线，而后续弹性项依次平齐摆放。 flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的mian-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。 center

css行高height研究

阅读更多关于 css行高height研究

最近看了《css 世界》，颇有体会，总结一下它的作用细节。首先回顾一下盒模型：中心的content,padding ,border,margin,这些又被分成4个盒子，content box(content-box),padding box(padding-box), border box(border-box), margin-box(透明)。 width的默认值是auto,至少包含以下4种不同的宽度的表现充分利用可用空间。fill-available 收缩与包裹。fit-content 收缩到最小min-content 超出容器限制。 <style> .father{ width:150px; background-color: aqua; white-space: nowrap; } .child{ display: inline-block; background-color: red; } </style> </head> <body> <div class='father'> <div class="child">恰似一江春水向东流，流到断崖不回头，不回头，不回头！！！</div> </div> </body> .father{ background:red; height:40px; width:700px; font-size:30px; color:#fff

jQuery动态效果

阅读更多关于 jQuery动态效果

以下面的这个盒子为例，我设置了它在页面中居中显示，方便观看： < div id = " box " > </ div > < script src = " jquery-3.4.1.min.js " > </ script > < style > #box { background : #18af75 ; height : 300px ; width : 300px ; margin : auto ; position : absolute ; top : 250px ; bottom : 250px ; left : 250px ; right : 250px ; } </ style > 1、隐藏box； $ ( '#box' ) . hide ( ) ; 2、显示box; $ ( '#box' ) . show ( ) ; 3、加入延迟； $ ( '#box' ) . delay ( 1000 ) . hide ( ) ; //延迟1秒 $ ( '#box' ) . delay ( 1000 ) . show ( ) ; 4、逐渐淡出： $ ( '#box' ) . fadeOut ( 1000 ) ; //动画时间1秒 5、逐渐淡入： $ ( '#box' ) . fadeIn ( 1000 ) ; //动画时间1秒 6、渐变到特定透明度： $ ( '#box' ) .

Faster RCNN 学习笔记

阅读更多关于 Faster RCNN 学习笔记

下面的介绍都是基于 VGG16 的 Faster RCNN 网络，各网络的差异在于 Conv layers 层提取特征时有细微差异，至于后续的 RPN 层、 Pooling 层及全连接的分类和目标定位基本相同 . 一）、整体框架我们先整体的介绍下上图中各层主要的功能 1) 、 Conv layers 提取特征图：作为一种 CNN 网络目标检测方法， Faster RCNN 首先使用一组基础的 conv+relu+pooling 层提取 input image 的 feature maps, 该 feature maps 会用于后续的 RPN 层和全连接层 2) 、 RPN(Region Proposal Networks): RPN 网络主要用于生成 region proposals ，首先生成一堆 Anchor box ，对其进行裁剪过滤后通过 softmax 判断 anchors 属于前景 (foreground) 或者后景 (background) ，即是物体 or 不是物体，所以这是一个二分类；同时，另一分支 bounding box regression 修正 anchor box ，形成较精确的 proposal （注：这里的较精确是相对于后面全连接层的再一次 box regression 而言） 3) 、 Roi Pooling ：该层利用 RPN 生成的

CSS border-radius

阅读更多关于 CSS border-radius

CSS3属性：border-radius border-radius ： none | <length>{1,4} [ / <length>{1,4} ]? 相关属性 border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius 取值： <length> ：由浮点数字和单位标识符组成的长度值。不可为负值。 border-top-left-radius：由浮点数字和单位标识符组成的长度值。不可为负值。说明：第一个值是水平半径。如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。如果任意一个值为0，则这个角是矩形，不会是圆的。值不允许是负值。用这个属性可以很容易做出圆角效果，当然，也可以做出圆形效果。原理很简单，“正方形的内切圆的半径等于正方形边长的一半”。 1.下面就做一个的圆。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS3 border-radius</title> 6 <style> 7 .circle { 8 background-color:#008080; 9 width: 400px; /*

事件对象2

阅读更多关于事件对象2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { margin: 100px; width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div id="box"> </div> <script> var box = document.getElementById('box'); // box.onclick = function (e) { // e = e || window.event; // // 获取事件名称 // console.log(e.type); // } box.onclick = fn; box.onmouseover = fn; box.onmouseout = fn; function fn(e) { e = e || window.event; switch (e.type) { case 'click': console.log('点击box'); break; case 'mouseover': console.log('鼠标经过box'); break;

vagrant基本用法

阅读更多关于 vagrant基本用法

vagrant使用小结最近公司用了vagrant的虚拟镜像服务,感觉挺不错的.在此仅记录使用方法. 优点：我们可以通过 Vagrant 封装一个 Linux 的开发环境，分发给团队成员。成员可以在自己喜欢的桌面系统（Mac/Windows/Linux）上开发程序，代码却能统一在封装好的环境里运行，非常霸气. 主要是看重它可以让开发人员在同样开发环境下开发，这样避免每个开发人员因为开发环境不一样导致最后代码上线的一些问题. 缺点：需要提前配置好一个满足开发条件的一些环境.（这个过程其实玩liunx的人，都会，对于不会的人来说，这就是缺点咯.）本文后面提到的centos-6.5-x86_64-base.box,是centos-6.5的系统，在里面我已经预装了php apache nginx nodejs等等满足程序运行的环境。下面使用步骤： 1、下载vagrant和VirtualBox vagrant 下载地址： http://www.vagrantup.com/downloads.html VirtualBox下载地址： https://www.virtualbox.org/wiki/Downloads box镜像文件，本文举例子的box文件（centos-6.5-x86_64-base.box，因为源文件太大，就不传了） 2、安装Vagrant 和 VirtualBox 3

订阅 box