display: -webkit-box; 做个小小试验

最近做个微信项目发现css3在微信内部浏览器中和其他浏览有些区别 做个小小笔记

.job {
            display: -webkit-box;
            display: flexbox;
            -webkit-box-pack: center;
            margin-top:100px;
            transform: translate3d(0,50px,0);
            border: #CCC 1px solid;
        }

            .job .job_ch {
                flex: 1;
                -webkit-box-flex:1;
                border: red 1px solid;
            }

            .job .job_ch_left {
                flex: 2;
                -webkit-box-flex: 2;
                border: red 1px solid;
            }
 <div class="job">
            <div class="job_ch">
                1
            </div>
            <div class="job_ch_left">
                2
            </div>
        </div>

这个写法都是认可的 表现一样一样的

时间: 2024-12-17 22:15:52

display: -webkit-box; 做个小小试验的相关文章

区别CSS中display:box;inline;none以及HTML中 &lt;frame&gt; 标签&lt;table&gt; 标签的 frame 属性

区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内容自动换行;行高以及顶和底边距都可控制:宽度缺省是它的容器的100%,除非设定一个宽度:<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子,意思是他们默认显示方式是block: display:inl

CSS3 display:flex和display:box有什么区别

父级元素有display:box;属性之后.他的子元素里面加上box-flex属性.可以让子元素按照父元素的宽度进行一定比例的分占空间. 如: html: <article>   <section>01</section>   <section>02</section>   <section>03</section></article> article{   width:600px;   height:200p

Webkit Box 模型属性备忘

-webkit-box-orient: horizontal||vertical 设置或检索弹性盒模型对象的子元素的排列方式.对应的脚本特性为boxOrient.需设置容器的display:-webkit-box; CSS样式: html,body,div{ margin:0px; padding:0px;} .orient{display:-webkit-box;-webkit-box-orient:horizontal; width:600px; margin:0 auto;} .orien

css3中display和box小结

display:table用处: 1.创建登高列 2.实现大小不确定元素的垂直居中 3.容器内子项目数目未知,子项目平均分配容器的水平空间 float必须指定其宽度才行,不确定的话就用display:table-cell box-sizing的属性值:content-box(default),border-box,padding-box. 1.content-box,border和padding不计算入width内 2.padding-box,padding计算入width内 3.border-

CSS3 display:flex和display:box有什么区别?

**区别**,仅是各阶段草案命名.- 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 |

css3弹性盒display:box和flex的完整好教程

1.flexbox-CSS3弹性盒模型flexbox布局完整版教程(转)2.CSS3盒模型display:box详解(转)

布局神器display:table-cell

元素两端对齐 第一个案例是让两个元素分别向左和向右对齐,如果是过去,我一定会用float来实现,但其实用table可以这么做: * { box-sizing: border-box; } .content { display: table; border: 1px solid #06c; padding: 15px 5px; max-width: 1000px; margin: 10px auto; min-width: 320px; width: 100%; } .box { width: 1

尖刀出鞘的display常用属性及css盒模型深入研究

一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-block后的元素具有block元素可以设置宽高特性,同时又具有inline元素默认不换行的特性. 其实display:inline-block这个属性现在浏览器都支持,其实IE从5.5开始就已经支持了,但是IE6,7支持的还不够完善,我们可以先来做demo测试下就可以明白.为了做demo,所以我们现在需要

css display:flex布局介绍

定义容器的display属性 .box{ display: -webkit-flex; /*webkit*/ display: flex; } /*行内flex*/ .box{ display: -webkit-inline-flex; /*webkit*/ display:inline-flex; } 容器样式 .box{ flex-direction: row | row-reverse | column | column-reverse; /*主轴方向:左到右(默认) | 右到左 | 上到