javascript的进阶

开关

<h5>属性的灵活调用开关</h5>

*<input type="button" value="打开" onclick="if(this.value=='打开') this.value='关闭'; else this.value='打开'"/>

aniuse.com 查看元素兼容网

*给自己的子元素div往上排列{父元素控制子元素方式} display: -webkit-box{老版本};display: -webkit-flex{新版本兼容性增强};

*设置给父元素盒子的属性：控制子元素的显示方式

//弹性盒模型中 没调用flex-是没法使用很多属性的
flex-direction属性决定显示的方向（即项目的排列方向）

flex-wrapflex-wrap属性定义，如果一行排不下，如何换行。

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

justify-content属性定义了项目在水平方向的对齐方式。

align-items属性定义项目在竖直方向上如何对齐。

align-content属性定义了多行的对齐方式。如果项目只在一行，该属性不起作用。

• flex-direction： row | row-reverse | column | column-reverse;

row 默认值，左对齐 顺序显示
row-reverse 右对齐 倒序显示
column 竖直顺序显示
column-reverse 竖直倒序显示

flex-wrap ：nowrap | wrap | wrap-reverse;

nowrap 默认值 不换行(同单行文本不换行显示)
wrap 换行显示
wrap-reverse换行反向显示

*justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start 默认值 开始位置对齐

flex-end 结束位置对齐

center 居中

space-between 两端对齐，项目之间的间隔都相等。
space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。(同margin)
（两侧还有对应间隔）

*align-items: flex-start | flex-end | center | baseline | stretch;
flex-start 上端对齐 flex-end 下端对齐
center 居中

baseline 第一行文字的底端基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

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

flex-start 上端对齐
flex-end 下端对齐
center 居中
space-between 两端对齐每行之间间隔相等。

space-around 两端对齐每行项目上下的间距相等，所以两行项目之间的间距是单个的二倍(同margin)

stretch（默认值）：如果项目未设置高度或设为auto，每行均分盒子的高度。

*设置给子元素项目的属性：控制子元素本身的显示方式

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。简单来说就是按照order大小来觉得div出行顺序
#box div:nth-child(1){
flex-grow : 1;
order : 4;
}
#box div:nth-child(2){
order : 2;
}
#box div:nth-child(3){
order : 3;
}
#box div:nth-child(4){
order : 2;

        }

flex-grow: <number>; 定义盒子的弹性空间 具体的数字占比 百分比