@xunuo
2018-09-28T16:59:39.000000Z
字数 1360
阅读 987
前端
- 弹性盒子的概念:
弹性盒子是css3一种新的布局模式,当页面需要适应不同的屏幕大小及设别类型时确保元素拥有恰当的行为的布局方式- 定义弹性盒子
- display:flex;若浏览器内核为webkit则为-webkit-flex(写在父级元素的CSS样式中,其子级元素就会默认的同行排列),设置成flex之后,子级的float,clear,vertical-align 都将失效)
- 弹性盒子的几大属性
- flex-direction:排列方式,row(横向排列)、column(纵向排列)、row-reverse(横向反向排列)、column-reverse(纵向反向排列)
- justify-content:对齐方式,flex-start(起始位置对齐) flex-end(结束位置对齐) center(居中) space-between(靠边,分散对齐) space-around(不靠边,分散对齐)。
- flex-wrap:wrap(换行,当盒子一行不足以盛下它的多个子级元素的时候,就会换行)、nowarp(不换行)。这个属性是用来写元素的子级在X轴上的对齐方式。
- align-items:stretch(在竖直方向铺满,但是里面的内容不能设置高度)......这个属性用来写盒子的子级元素在Y轴上的对齐方式,flex-start,flex-end,center,baseline。
- align-content:产生换行的时候,可以用来除去换行所产生的缝隙,属性值有:对齐方式,flex-start(起始位置对齐) flex-end(结束位置对齐) center(居中) space-between(靠边,分散对齐) space-around(不靠边,分散对齐),strech(默认值,铺满整个Y轴)。但是,当元素只有一行,不需要换行的时候会没有任何效果。
- flex-flow:flex-direction和flex-wrap的缩写。一般写为:flex-flow:row wrap;属性值根据具体情况子级设置。
- 弹性盒子的子级元素的排序设置:
- order:number;数值越小越靠前。
- flex-grow:number;默认值是0,即,有剩余空间也不放大(用来设置放大比例);
- flex-shrink:number;默认值是1,即,空间不够也不缩小(用来设置缩小比例);原理同上。
- flex-basis:auto;(或像素)。
- align-self:相对于子级元素自己进行设置,写在子级元素的样式中。(对齐方式)
es6中let与const的区别
- var
- let
- const
https://blog.csdn.net/lilongsy/article/details/75048822
link与@import的区别
var p = /[0-9]/; var b = p.test(string);
//true,说明有数字
var p = /[a-z]/i; var b = p.test(string);
//true,说明有英文字母
var p = /[0-9a-z]/i; var b = p.test(string);
//true,说明有英文字母或数字