display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; display: box; 这是老版本的写法,09年之前的.这样给外面的父元素设置了这5个属性之后,这个div就是弹性盒子模型了. 里面的元素就可以自由分配空间了,在一行,而不需要浮动布局float了 而弹性伸缩盒的原理就是给父…

1.display:box 父容器里面的box属性有box-orient|box-dirextion|box-align|box-pack|box-lines box-orient:用来确定父容器里面子元素的排列方式,是水平还是竖直horizontal|vertical|inline-axis|block-axis|inherit box-direction:确定父容器里面子容器的排列顺序,normal|reverse|inherit box-align:表示父容器里面子容器的垂直对齐方式,st…

背景分析:最近做移动端项目时,遇到一个常见的需求: 可以滑动的导航,如下图 虽然是很常见的一个布局,但在移动端没有做过,想当然的写下以下的样式,简单描述下: 父元素 width:100%: overflow: hidden; overflow-x: scroll: 子元素 float:left 浏览器刷新后,我擦,并不好使,折行了··· 停下来想想,看看那手百是怎么实现的: overflow: hidden; overflow-x: auto; -webkit-overflow-scrollin…

display:box我想大家很熟悉,那么display:inline-box呢,今天在项目中需要设置这样的属性box-align:center,那么就想到用 display:box;如果设置BOX,那么宽度不能自适应,必须设置一个值,我找了一下,终于找到一个属性可以宽度自适应高度定死的弹性伸缩盒的属性display:inline-box,CSS如下写 .dafeiNotice_time { padding:0 0.12rem; background:rgba(0,0,0,0.15); bord…

display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀:display:flex是2012年之后的命名.在实际的测试中display:flex不能完全的替代display:box.display:flex的浏览器兼容性比较麻烦. 1.关于display:flex 对于响应式布局,使用flex很方便,但是它的兼容性也是一个值得考虑的问题. <div class="container">…

可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码. 参考: flex: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html http://www.ruanyifeng.com/blog/2015/07/flex-examples.html box: http://www.warting…

**区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)- W3C 2011年第2次草案:[display:flexbox | inline-flexbox;](https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/)- W3C 2012年第5次草案及以后的候选推荐标准:[display:flex |…

没区别,仅是各阶段草案命名flex是最新的 但是在实际的浏览器测试中,display: flex 不能完全替代display: -webkit-box display: box 使用可以参考http://www.html5rocks.com/en/tutorials/flexbox/quick/display: flex 使用可以参考https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 兼容性的问题可以参考https://css-tric…

这几天在研究弹性布局,看书中写的是display:box,结果在chrome浏览器中是正常的,想着移动端大部分浏览器也是webkit内核的应该也没啥问题,结果确实没问题,但仔细一看,高度呢?好吧,严重的bug,高度不起作用了(特殊情况).再查查资料原来w3c已经废了display:box;换成display:flex了,只好重新学过了,以后还是看这个吧http://www.w3schools.com/国外站请自备神器. UC啥的浏览器用的还是display:box最新的是display:flex…

刚开始做网页时就有一个困惑,为什么display:block只能垂直排列,如果要水平排列就要使用float:left等方式.这种方法最难受的当然是当子元素的数量改变时,需要去修改子元素的宽度使重新适应.bootstrap为了兼容性在实现栅格布局时,就不得不生成大量如下代码: .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .…