html弹性盒子布局,div+css3弹性盒子(flex box)布局「建议收藏」

html弹性盒子布局,div+css3弹性盒子(flex box)布局「建议收藏」一、CSS3弹性盒子(FlexBox)弹性盒子是CSS3的一种新布局模式。CSS3弹性盒(FlexibleBox或flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。首先要明白几个概念:主轴:Flex容器的主轴主要用来配置Flex项目,默…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

一、CSS3 弹性盒子(Flex Box)

弹性盒子是CSS3的一种新布局模式。

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

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

首先要明白几个概念:

主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向

侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的

方向:默认主轴从左向右,侧轴默认从上到下

主轴和侧轴并不是固定不变的,通过flex-direction可以互换。

主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。该轴的开始和结束被称为main start 和main end。

交叉轴(cross axis)是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start和 cross end。

设置了 display: flex 的父元素被称之为 flex 容器(flex container)。

在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项(flex item)元素。

e12d3da9dc05?from=timeline

概念释义

二、浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

属性

e12d3da9dc05?from=timeline

e12d3da9dc05?from=timeline

e12d3da9dc05?from=timeline

e12d3da9dc05?from=timeline

e12d3da9dc05?from=timeline

Basic support (single-line flexbox)

29.0 21.0 -webkit-

11.0

22.0 18.0 -moz-

6.1 -webkit-

12.1 -webkit-

Multi-line flexbox

29.0 21.0 -webkit-

11.0

28.0

6.1 -webkit-

17.0 15.0 -webkit- 12.1

三、CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示,从左到右:

flex弹性盒子

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

弹性盒子布局自动一行填满且不随浏览器大小而变化

四、CSS3 弹性盒子常用属性

属性

描述

flex-direction

指定弹性容器中子元素排列方式

flex-wrap

设置弹性盒子的子元素超出父容器时是否换行

flex-flow

flex-direction 和 flex-wrap 的简写

align-items

设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式

align-content

修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐

justify-content

设置弹性盒子元素在主轴(横轴)方向上的对齐方式

1. flex-direction 属性

决定项目的方向。

注意:如果元素不是弹性盒对象的元素,则 flex-direction 属性不起作用。

flex-direction: row | row-reverse | column | column-reverse;

e12d3da9dc05?from=timeline

四种方向row | row-reverse | column | column-reverse

属性值

描述

row

默认值。元素将水平显示,正如一个行一样。

row-reverse

与 row 相同,但是以相反的顺序。

column

元素将垂直显示,正如一个列一样。

column-reverse

与 column 相同,但是以相反的顺序。

flex弹性盒子

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-direction:column;

/* flex-direction: row | row-reverse | column | column-reverse;

* row 默认值。元素将水平显示,正如一个行一样。

row-reverse 与 row 相同,但是以相反的顺序。

column 元素将垂直显示,正如一个列一样。

column-reverse 与 column 相同,但是以相反的顺序*/

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

flex-direction:column;结果

2. flex-wrap 属性

flex-wrap 属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

描述

nowrap

默认值。规定元素不拆行或不拆列。

wrap

规定元素在必要的时候拆行或拆列。

wrap-reverse

规定元素在必要的时候拆行或拆列,但是以相反的顺序。

flex-wrap: nowrap | wrap | wrap-reverse;

可以取三个值:

(1) nowrap (默认):不换行。

e12d3da9dc05?from=timeline

nowrap

(2)wrap:换行,第一行在上方。

e12d3da9dc05?from=timeline

wrap

(3)wrap-reverse:换行,第一行在下方。

e12d3da9dc05?from=timeline

wrap-reverse

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

/*flex-direction:column;*/

/* flex-direction 属性 决定项目的方向。

* flex-direction: row | row-reverse | column | column-reverse;

* row 默认值。元素将水平显示,正如一个行一样。

row-reverse 与 row 相同,但是以相反的顺序。

column 元素将垂直显示,正如一个列一样。

column-reverse 与 column 相同,但是以相反的顺序*/

flex-wrap:wrap;

/*flex-wrap 属性 规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap 默认值。规定元素不拆行或不拆列。

wrap 规定元素在必要的时候拆行或拆列。

wrap-reverse 规定元素在必要的时候拆行或拆列,但是以相反的顺序。

* */

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

flex-wrap:wrap;

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-direction:column;

/* flex-direction 属性 决定项目的方向。

* flex-direction: row | row-reverse | column | column-reverse;

* row 默认值。元素将水平显示,正如一个行一样。

row-reverse 与 row 相同,但是以相反的顺序。

column 元素将垂直显示,正如一个列一样。

column-reverse 与 column 相同,但是以相反的顺序*/

flex-wrap:wrap;

/*flex-wrap 属性 规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap 默认值。规定元素不拆行或不拆列。

wrap 规定元素在必要的时候拆行或拆列。

wrap-reverse 规定元素在必要的时候拆行或拆列,但是以相反的顺序。

* */

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

flex-direction:column;flex-wrap:wrap;

3. flex-flow 属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

/* flex-flow: */

flex-flow:column wrap;

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-flow:row wrap;

/*

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

flex-flow:

例:flex-flow:row wrap;

* * */

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

flex-flow:row wrap;

4. justify-content属性

justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

描述

flex-start

默认值。项目位于容器的开头。

flex-end

项目位于容器的结尾。

center

项目位于容器的中心。

space-between

项目位于各行之间留有空白的容器内。(两端对齐,项目之间的间隔都相等)

space-around

项目位于各行之前、之间、之后都留有空白的容器内。(每个项目两侧的间隔相等.所以,项目之间的间隔比项目与边框的间隔大一倍.)

e12d3da9dc05?from=timeline

分布图

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

/*justify-content: flex-start(默认值) | flex-end | center | space-between | space-around;*/

/*justify-content:space-around;*/

/*

flex-start 默认值。项目位于容器的开头。

flex-end 项目位于容器的结尾。

center 项目位于容器的中心。

space-between 项目位于各行之间留有空白的容器内。

space-around 项目位于各行之前、之间、之后都留有空白的容器内

*/

}

.item{width: 100px; height: 200px;}

.item1-1{ background:red;height: 100px}

.item1-2{ background:orange;width: 300px;}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

默认 justify-content: flex-start;

justify-content:flex-end

e12d3da9dc05?from=timeline

justify-content:flex-end;

justify-content:center

e12d3da9dc05?from=timeline

justify-content:center;

justify-content:space-between; /*两端对齐,项目之间的间隔都相等。*/

e12d3da9dc05?from=timeline

justify-content:space-between;两端对齐,项目之间的间隔都相等

justify-content:space-around;每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

e12d3da9dc05?from=timeline

justify-content:space-around;每个项目两侧的间隔相等.所以,项目之间的间隔比项目与边框的间隔大一倍.

5. align-items属性

align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

描述

stretch

默认值。项目被拉伸以适应容器。

center

项目位于容器的中心。

flex-start

项目位于容器的开头。

flex-end

项目位于容器的结尾。

baseline

项目位于容器的基线上。

e12d3da9dc05?from=timeline

image

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

align-items: stretch;

/*

flex-start:交叉轴的起点对齐。

flex-end:交叉轴的终点对齐。

center:交叉轴的中点对齐。

stretch(默认值):如果项未设置高度或设为auto,将占满整个容器的高度。

baseline: 项目的第一行文字的基线对齐。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px;}

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

默认align-items: stretch;如果项未设置高度或设为auto,将占满整个容器的高度

align-items:flex-start;

e12d3da9dc05?from=timeline

align-items:flex-start;交叉轴的起点对齐

align-items:flex-end;

e12d3da9dc05?from=timeline

align-items:flex-end;交叉轴的终点对齐

align-items:center;

e12d3da9dc05?from=timeline

align-items:center;交叉轴的中点对齐

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

align-items:baseline;

/*

flex-start:交叉轴的起点对齐。

flex-end:交叉轴的终点对齐。

center:交叉轴的中点对齐。

stretch(默认值):如果项未设置高度或设为auto,将占满整个容器的高度。

baseline: 项目的第一行文字的基线对齐。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px;

padding: 20px;} /* 修改文字开始的位置 通过padding来修改*/

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

align-items:baseline;项目的第一行文字的基线对齐

align-content 定义了多根轴线的对齐方式

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

描述

flex-start

与交叉轴的起点对齐。

flex-end

与交叉轴的终点对齐。

center

与交叉轴的中点对齐。

space-between

与交叉轴两端对齐,轴线之间的间隔平均分布。

space-around

每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

stretch(默认值)

轴线占满整个交叉轴。

e12d3da9dc05?from=timeline

align-content 多根轴线的对齐方式

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-flow:row wrap;

align-content: stretch;

/*

flex-start:与交叉轴的起点对齐。

flex-end:与交叉轴的终点对齐。

center:与交叉轴的中点对齐。

space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

stretch(默认值):轴线占满整个交叉轴。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px; }

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px;}

1
2
3
4
5
6
1
2
3
4
5
6

e12d3da9dc05?from=timeline

默认align-content:stretch;

align-content:flex-start;

e12d3da9dc05?from=timeline

align-content: flex-start;

align-content: flex-end;

e12d3da9dc05?from=timeline

align-content: flex-end;

align-content:center;

e12d3da9dc05?from=timeline

align-content: center;

align-content:space-between;

e12d3da9dc05?from=timeline

align-content: space-between;与交叉轴两端对齐,轴线之间的间隔平均分布。

align-content:space-around;

e12d3da9dc05?from=timeline

align-content:space-around;每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

五、flex-item项的常用属性(弹性子元素属性)

属性

描述

order

设置弹性盒子的子元素排列顺序。

flex-grow

设置或检索弹性盒子元素的扩展比率。

flex-shrink

指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。

flex-basis

用于设置或检索弹性盒伸缩基准值。

flex

设置弹性盒子的子元素如何分配空间。

align-self

在弹性子元素上使用。覆盖容器的 align-items 属性。

1. order属性

数值越小,排列越靠前,默认为0。

order: ;

:用整数值来定义排列顺序,数值小的排在前面。可以为负值,默认为0。

e12d3da9dc05?from=timeline

数值越小,排列越靠前

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px; order: 6;}

.item1-2{ background:orange;width: 300px;height: auto;order: 5;}

.item1-3{ background:yellow;width: 100px;order: 0;}

.item1-4{ background:green;width: 100px;order: 3;}

.item1-5{ background:cyan;width: 100px;order: 2;}

.item1-6{ background:blue;width: 100px;order: 1;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

order分别设置为 6 5 4 0 3 2 1

2. flex-grow属性

flex-grow: ;

:一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

e12d3da9dc05?from=timeline

按照设置数字比例进行拉伸,默认为0,即如果存在剩余空间,也不放大。

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px; flex-grow:1}

.item1-2{ background:orange;height: auto;flex-grow:5}

.item1-3{ background:yellow;flex-grow:1}

.item1-4{ background:green;flex-grow:1}

.item1-5{ background:cyan;flex-grow:1}

.item1-6{ background:blue;flex-grow:1}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

flex-grow 属性设定分别为 1 5 1 1 1 1

3. flex-shrink属性

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。默认为1,即如果空间不足,该项目将缩小。负值对该属性无效

flex-shrink: ;

:一个数字,规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

如果设置为0不进行收缩,值越大收缩越多。

e12d3da9dc05?from=timeline

flex-shrink 设置分别为 1 0 1 1 1 1 1 1

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

.item{width: 400px; height: 200px;flex-shrink:1}

.item1-1{ background:red;height: 100px; }

.item1-2{ background:orange;height: auto;flex-shrink:2}

.item1-3{ background:yellow;flex-shrink:3}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

flex-shrink 设置分别为 1 2 3 1 1 1 值越大缩放比例越大

4. flex-basis属性

flex-basis: | auto;

:一个长度单位或者一个百分比,规定元素的初始长度。

auto:默认值。长度等于元素的长度。如果该项目未指定长度,则长度将根据内容决定。

如果不使用 box-sizing 来改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的宽或者高(取决于主轴的方向)的尺寸大小。

默认值为auto,即项目的本来大小。也可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间

5. flex属性

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选

flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;

描述

flex-grow

一个数字,规定项目将相对于其他元素进行扩展的量。

flex-shrink

一个数字,规定项目将相对于其他元素进行收缩的量。

flex-basis

项目的长度。合法值:”auto”、”inherit” 或一个后跟 “%”、”px”、”em” 或任何其他长度单位的数字。

auto

与 1 1 auto 相同。

none

与 0 0 auto 相同。

initial

设置该属性为它的默认值,即为 0 1 auto。

inherit

从父元素继承该属性。

6. align-self属性

.flex-container .flex-item {

align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;

}

描述

auto

默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。

stretch

元素被拉伸以适应容器。

center

元素位于容器的中心。

flex-start

元素位于容器的开头。

flex-end

元素位于容器的结尾。

baseline

元素位于容器的基线上。

initial

设置该属性为它的默认值。

inherit

从父元素继承该属性。

可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

e12d3da9dc05?from=timeline

改变子元素的align-items

弹性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

align-items:flex-start;

/*

flex-start:交叉轴的起点对齐。

flex-end:交叉轴的终点对齐。

center:交叉轴的中点对齐。

stretch(默认值):如果项未设置高度或设为auto,将占满整个容器的高度。

baseline: 项目的第一行文字的基线对齐。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px;

padding: 20px;}

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px; align-self:flex-end}

1
2
3
4
5
6

e12d3da9dc05?from=timeline

align-items:flex-start; align-self:flex-end;

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/227275.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Spring中Responsebody注解的作用[通俗易懂]

    Spring中Responsebody注解的作用[通俗易懂]好长一段时间以来都只是写些测试代码,好久没写项目代码了,以至于sping那套东西日渐生疏了。最近在折腾一个小项目,写了一个controller用来响应ajax请求,结果断点调试发现一直返回"404…notresponse…",折腾了快2小时,一直没想到是注解的问题,万般无赖之下上了度娘,方才如梦初醒,特意记录一下,一来提醒一下自己,二来也让跟我遇到一样问题的朋友少受些折磨。这个注解表示…

  • 电商后台管理系统——权限管理模块

    电商后台管理系统——权限管理模块电商后台管理系统——权限管理模块电商后台管理系统的权限管理模块分为角色列表和权限列表两部分,两部分流程图大概如下权限列表实现过程:

  • validationengine如何自定义验证信息_analytical engine

    validationengine如何自定义验证信息_analytical engineValidationEngine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合。附件提供了该插件,解压密码为:im486,Js目录下为ValidationEngine所需js文件(不包括jquery),css目录下的validationEngine.jquery.css为本插件样式文件,demo为示例文件(其

  • 初识行为识别

    初识行为识别随着互联网的不断发展,各种应用的不断推广。数据无论从存储,格式,形式,类型等方面都趋向于多样化,丰富化,指数化。数据就是价值,为何这么说呢?在机器学习,深度学习推动下,训练数据需求很大。对于分类模型,训练数据越多,分类器的准确度会在一定程度上更精确。行为识别可以说就是在这基础上演变出来的一个研究分支。那么什么是行为识别呢?我的理解是这样的,比如对于某个图片或者视频中的某个信息进行捕获,我们可以使用…

  • HTML上document的方法

    HTML上document的方法document:属性document.title//设置文档标题等价于HTML的<title>标签document.bgColor//设置页面背景色document.fgColor

  • 分而治之,保持胜利果实

    分而治之,保持胜利果实

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号