数据类型之 undefined 和null
1. 含义:
是JavaScript 中的数据类型
2. 区别:
undefined:表示没有数值(应该是有数值,但是现在没有)
eg. 定义int1,但是没有赋值数据
var int1;
console.log(int1)
null:表示数值为空 (表示有数值,但是数值为空)
3. 注:
也可以给直接赋值undefined和null,但是必须小写。
eg. 定义一个变量,直接给变量赋值undefined和null
var int2 =null;
console.log(int2);
执行结果:null
var int3 =undefined;
console.log(int3);
执行结果:undefined
4. 总结:
1> 在JS中,表示的是一种数值。
2> 赋值时,必须严格遵守大小写规范。
3> 并且,不能带引号,如果有引号,就是字符串,就不是原有的数据了。
5. 定义未赋值变量和未定义变量的区别:
1> 定义未赋值,只是定义了变量,但是没有给变量进行赋值效果
eg.
var int 1;
console.log(int1)
未赋值,所以执行结果是undefined
2> 直接使用一个没有定义过的变量
eg.
console.log(int2)
未定义,执行结果是报错
大家好 我是逆战班的学员 来做个知识点的总结:
flex布局
Flex弹性布局元素,主要分为两种:
1>语法添加到父容器上(display:flex)
2>语法添加到子容器上
1.添加到父容器上的语法
(1) display:flex
(2) flex-direction::(row:布局的排列方向)主轴排列方向
值:row(默认值) 显示为行,方向为当前文档水平流方向,默认从左往右。
row-reverse:显示为行,方向和row属性相反
column:显示为列
colum-reverse:显示为列,属性和column属性相反
(3)flex-wrap:用来控制弹性盒是否进行换行处理
值:no-wrap:(默认)不换行
wrap:换行处理
wrap-reverse:(折行的反向操作)反向换行
(4) flex-flow:是flex-direction和flex-warp的复合写法,第一个值表示方向,第二个是换行
(5)justify-content:决定了主轴方向上子项的对齐和分布方式
值:flex-start:(默认值)表现为子项都去起始位置对齐
flex-end:子项都去结束位置对齐
center:子项都去中心位置对齐
space-between:表现为两端对齐,between是中间的意思,意思是多余的空白间距只是元素中间分配区域。
space-around:意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距,最终视觉上边缘两侧的空白只有中间空白宽度一半
space-evenly:每个flex子项两侧空白间距完全相等。
(6)align-items: 指的是flex所有每一行中的子元素上下对齐方式。
值:stretch:(默认)flex子项拉伸
flex-start:表现为容器子项顶对齐
center:表现为中心对齐
flex-end:表现为底部对齐
(7) align-content : 跟justify-content相反的操作。侧轴的对齐方式。(最少需要两行才能看出效果,因为他是多行的一个上下对齐方式)
值:stretch:(默认)每一行子元素都等比拉伸
space-around:每一行元素上下都享有独立不重叠的空白空间
space-evenly:每一行元素都上下等分
flex-start:表现为起始位置对齐
flex-end:表现为结束位置对齐
center:表现为中心位置对齐
space-between:表现为两端对齐,
2.作用在flex子项上的css属性
(1)order:所有flex子项order默认值为0(排序)
(2)flex-grow: 扩展 ( 想看到扩展的效果,必须有空隙 )
值:0 : 默认值 , 不去扩展
1 : 去扩展 , 会把空白区域全部占满
(子元素会按照设置的比例值来分配空隙,如果比例值总和小于1,那么会有空隙,如果比例值总和大于等于1,那么就没有空隙。)
(3)flex-shrink : 收缩
值:1(默认值)表示收缩
0表示不收缩,.5收缩小一些,2收缩大一些。(大小是跟正常缩放1进行比较的)
(4)flex-basis:跟flex-shrink/flex-grow很像。
flex-shrink/flex-grow是设置一个比例值,flex-basis是设置一个具体值。
(5)flex : 一种复合写法
flex-grow flex-shrink flex-basis
flex:1;
flex : 1 1 0
flex:0;
flex : 0 1 0
(6)algin-self::控制单独某一个子项的垂直对齐方式
值:stretch:(默认)flex某一个子项拉伸
flex-start:表现为顶对齐
center:表现为中心对齐
flex-end:表现为底部对齐
注意点:
1>:默认情况下,在弹性盒子中的子元素的左右排列的。
2>水平是主轴的时候:默认情况下,当宽高不写的时候,宽度由内容决定,高度由父容器决定。
3>垂直是主轴的时候:默认情况下,当宽高不写的时候,宽度由父容器决定,高度由内容决定。
4>当子项的总宽度大于父容器的时候,会自动收缩的(弹性的优先级是大于自身固定大小的)
5>当子项的内容已经达到了父容器最小宽高的时候,就会出现溢出的现象。
大家好 我是逆战班的学员 来做个知识点的总结: 数据类型之 undefined 和null
原文:https://www.cnblogs.com/SHY1214/p/12551362.html