关于弹性布局
第二天了,喵爷大人让我写一个小页面来练练手,就是在这个页面里面,弹性布局这个方法我才是正式的使用的,之前,我虽然知道有弹性布局这个东西,但是我一直都没有使用过,仅仅是听说过而已,喵爷和我说,这里用弹性布局会比较容易一点,我才上网去看了一下关于弹性布局的,第一次使用,始终不是非常的习惯,所以,总是习惯性的避免使用它,造成了,布局细节方面出现挺多的错误的。。。这都是不习惯的后果啊~~~晚上我专程的用大概一个小时的时间,去看了一下关于弹性布局这方面的知识,现在来分享一下,我个人理解的弹性布局~~~
因为在公司了,我就间接性的掺一些对公司里面写好的样式,大家忽略就可以了~~~~~
首先呢 在使用弹性布局的时候,我们应该讲父元素定义成弹性布局:display:box;
因为兼容性问题,一般都是要写一大堆的
display: -webkit-box; //兼容谷歌 和safari
display: -moz-box; //这个是为了兼容火狐
display: -ms-box; //这个是为了兼容ie
display: -o-box; //这个是为了兼容欧朋
display: box;
公司里面的rest样式已经兼容好了,只需要我们用box这个类给父元素就可以了
下面的理解一下就行
这里弹性布局似乎会引发一个问题,不过我还没有遇到过,百度之后他们说的问题就是:弹性布局,布局的是centent部分的,然后padding和border会造成一定的问题,
在这里,讲一下题外的东西,大家都应该知道w3c的盒模型和IE的盒模型,虽然都是有centent和padding 和border加上margin构成的,但是有一个东西不一样,就是ie浏览器的盒模型的centent是包括border和padding的,但是w3c的是不包括的
所以 在使用盒模型的时候,加上一个样式 就是
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
这样 ,就讲w3c的盒模型和ie盒模型看齐了,它的意思就是,w3c的盒模型,它的centent包括border和padding了
在公司里面 直接加上box-sizing这个类给父元素就可以了,不用那么的麻烦~~
在父元素里面有这么一些属性 它可以决定
子元素的分布在哪个位置
start | 靠左 | |
box-pack | end | 靠右 |
center | 在中间 | |
justify | 间距平均 |
子元素的渲染排列
boxdirection | inline-axis | 横向排列 |
block-axis | 竖向排列 |
子元素的排列顺序
注:正常是123 倒序就变成321了
box-diretion | normal | 默认的,正常排列 |
reverse | 倒序 |
子元素的对齐方式,在子元素高度不一样的时候有用
stretch | (默认的)将子元素拉伸 | |
start | 顶部对齐 | |
box-align | end | 底部对齐 |
center | 居中对齐 | |
baseline | 基线对齐 |
写了那么多父元素的 现在就写一下子元素的东西吧,子元素的东西不怎么的多,比较重要的一个就是
box-flex:常量 这个属性也要兼容的
这个子元素的属性是什么意思呢,就是把父元素的空间平均分成多少份(常量的总和),然后哪个常量的值就是占有多少份的意思
下面这个子元素的属性是用来控制子元素的排列顺序的 我们可以改变它的值来改变它的位置
box-ordimal-group:常量
哪个常量的值越小,排列的顺序越靠前,