我所知道的弹性盒子模型
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我所知道的弹性盒子模型相关的知识，希望对你有一定的参考价值。
弹性盒子是css自适应布局的一种好用的方法，有了它可以减少浮动的使用（避免清浮动）.
首先考虑一下兼容性
基本高版本主流浏览期都兼容,不过需要加前缀 最新写法为display:flex但是实际很多国产浏览器并不兼容,所以我还是用的display:box的写法并没有兼容两种.
所以主要介绍-webkit-box,想了解flex属性可以查看http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html（用法不太一样呀回来要整理整理）
写法为父级display后，子元素自动成为容器成员,并且float、clear和vertical-align属性将失效.
.box{ display:box; display:-webkit-box;/*(会与display:block冲突)*/ -webkit-box-align:center; -webkit-box-pack:center; } /*(主要做移动端只加了webkit)*/
父级容器box-align表示子集在y轴的排列方式 start | end | center | baseline | stretch start表示顶边对齐，end为底部对齐，center为居中对齐，baseline表示基线（英文字母o,m,n等的底边位置线）对齐，stretch 伸缩和父级等高.
父级容器box-pack表示子集在x轴的排列方式 start | end | center | justify 与父标签的起始位置对齐 末尾 居中 两端对齐
box-pack-justify两端对齐可以用来 设置两端对齐的标题例如
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .tit{ height:200px; width:200px; background:red; display:-webkit-box; display:-moz-box; display:box; -webkit-box-align:center; -webkit-box-pack:justify; padding:0 20px; color:#fff; } .tit div:nth-child(1){ height:40px; width:60px; background:#000; text-align:center; } .tit div:nth-child(2){ height:30px; width:40px; background:#000; text-align:center; } </style> </head> <body> <div class=‘tit‘> <div>左</div> <div>右</div> </div> </body> </html>
如果背景相同可以设置两端对齐也可以用table-cell
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .tit{ height:200px; width:200px; background:red; padding:0 20px; color:#fff; display:table; } .tit div:nth-child(1){ height:40px; width:60px; text-align:left; display:table-cell; vertical-align: middle; } .tit div:nth-child(2){ height:30px; width:40px; text-align:right; display:table-cell; vertical-align: middle; } </style> </head> <body> <div class=‘tit‘> <div>左</div> <div>右</div> </div> </body> </html>
box-orient可以设置排序方式 horizontal(水平) vertival (垂直)
子集容器可以设置-webkit-box-flex属性
表示占父级容器分割的分数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .tit{ height:200px; width:200px; background:red; padding:0 20px; color:#fff; display:-webkit-box; display:-moz-box; display:box; } .tit div:nth-child(1){ height:40px; background:#000; -webkit-box-flex:1;/*占总数1/3*/ } .tit div:nth-child(2){ height:30px; -webkit-box-flex:2;/*占总数2/3*/ background:#000; } </style> </head> <body> <div class=‘tit‘> <div>左</div> <div>右</div> </div> </body> </html>
注意: 如果两个box-flex 的值设置相同, 会均分父级宽度 。注意如果子集内容不同，会出现不能均分情况需要加个任意宽度 ,width:0%;width:100%;之类的都可以.
<div class=‘tit‘> <div>左123</div> <div>右456888</div> </div>
以上是关于我所知道的弹性盒子模型的主要内容，如果未能解决你的问题，请参考以下文章