web前端，css样式
diaplay的那些属性webkit-box、moz-bok、o-box、ms-box、box，都是什么意思呢，我在W3C网站的手册上也没找到这些属性。然后这两张图片上的...
diaplay的那些属性webkit-box、moz-bok、o-box、ms-box、box，都是什么意思呢，我在W3C网站的手册上也没找到这些属性。然后这两张图片上的代码我明白是把三个弹性盒子按1：2：3的比例分配宽与高，但我从复制过来的代码删了几个属性后效果还是一样的，删掉的那些属性又是做什么的。
展开
4个回答
展开全部
-webkit-box、-moz-box、-o-box、-ms-box、box这些都是指同一个属性即box，前面带有-号的是分别针对不同的浏览器的，其中
-webkit- 针对Chrome和Safari浏览器
-moz- 针对FireFox浏览器
-o- 针对Opera浏览器
-ms- 针对IE浏览器
也就是说凡是带有这样的前缀的都是这些浏览器的私有属性，只有各自的浏览器内部才有效。之所以这样，是因为有些css属性是带有实验性质的（尤其是css3），各主流浏览器尚未对它完全支持，这样就会使用私有属性来进行试验，而其他浏览器则会自动忽略该属性。因此，网页为了兼容各种不同的浏览器，就会把所有的私有属性都放上去，也包括不带前缀的标准属性。而浏览器的版本众多，很可能低版本的浏览器对某个属性处于试验性质，而高版本则已经完全支持了（也就是说可以不用前缀了），比如box属性就是如此，因此你把其他带有前缀的属性去掉不影响效果。但是，既然是网页，就不会是只有你一个人看的，要是其他用户用的是低版本的浏览器呢？所以，从兼容性角度出发，你最好不要删掉这些属性，除非你能保证其他用户用的浏览器与你的完全一样。
-webkit- 针对Chrome和Safari浏览器
-moz- 针对FireFox浏览器
-o- 针对Opera浏览器
-ms- 针对IE浏览器
也就是说凡是带有这样的前缀的都是这些浏览器的私有属性，只有各自的浏览器内部才有效。之所以这样，是因为有些css属性是带有实验性质的（尤其是css3），各主流浏览器尚未对它完全支持，这样就会使用私有属性来进行试验，而其他浏览器则会自动忽略该属性。因此，网页为了兼容各种不同的浏览器，就会把所有的私有属性都放上去，也包括不带前缀的标准属性。而浏览器的版本众多，很可能低版本的浏览器对某个属性处于试验性质，而高版本则已经完全支持了（也就是说可以不用前缀了），比如box属性就是如此，因此你把其他带有前缀的属性去掉不影响效果。但是，既然是网页，就不会是只有你一个人看的，要是其他用户用的是低版本的浏览器呢？所以，从兼容性角度出发，你最好不要删掉这些属性，除非你能保证其他用户用的浏览器与你的完全一样。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
那些前缀属于浏览器私有样式，在早期一些属性没有得到广泛支持时，使用前缀来兼容以下各大浏览器，保证效果的最大实现。
-webkit-是基于webkit内核的浏览器，比如Chrome浏览器和一些Android上的浏览器
-o-是Opera浏览器，即欧朋浏览器
-ms-是Microsoft的Internet Explorer浏览器，即IE浏览器
还有-moz-是Mozilla FireFox浏览器，即火狐浏览器
-webkit-是基于webkit内核的浏览器，比如Chrome浏览器和一些Android上的浏览器
-o-是Opera浏览器，即欧朋浏览器
-ms-是Microsoft的Internet Explorer浏览器，即IE浏览器
还有-moz-是Mozilla FireFox浏览器，即火狐浏览器
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
The -moz-box-flex and -webkit-box-flex CSS properties specify how a -moz-box or-webkit-box grows to fill the box that contains it, in the direction of the containing box's layout. See Flexbox for more about the properties of flexbox elements.
Initial value
0
Applies to
elements that are direct children of an element with a CSS display value of -moz-box or -moz-inline-box or -webkit-box or -webkit-inline-box
Inherited
no
Media
visual
Computed value
as specified
Animatable
no
Canonical order
the unique non-ambiguous order defined by the formal grammar
Syntax
/* <number> values */
-moz-box-flex: 0;
-moz-box-flex: 3;
-webkit-box-flex: 0;
-webkit-box-flex: 3;
/* Global values */
-moz-box-flex: inherit;
-moz-box-flex: initial;
-moz-box-flex: unset;
Values
0
The box does not grow.
> 0
The box grows to fill a proportion of the available space.
Formal syntax
How to read CSS syntax.<number>
Examples
<!DOCTYPE html>
<html>
<head>
<title>-moz-box-flex example</title>
<style>
div.example {
display: -moz-box;
display: -webkit-box;
border: 1px solid black;
width: 100%;
}
div.example > p:nth-child(1) {
-moz-box-flex: 1; /* Mozilla */
-webkit-box-flex: 1; /* WebKit */
border: 1px solid black;
}
div.example > p:nth-child(2) {
-moz-box-flex: 0; /* Mozilla */
-webkit-box-flex: 0; /* WebKit */
border: 1px solid black;
}
</style>
</head>
<body>
<div class="example">
<p>I will expand to fill extra space</p>
<p>I will not expand</p>
</div>
</body>
</html>
Notes
The containing box allocates the available extra space in proportion to the flex value of each of the content elements.
Content elements that have zero flex do not grow.
If only one content element has nonzero flex, then it grows to fill the available space.
Content elements that have the same flex grow by the same absolute amounts.
If the flex value is set using the element's flex attribute, then the style is ignored.
To make XUL elements in a containing box the same size, set the containing box'sequalsize attribute to the value always. This attribute does not have a corresponding CSS property.
A trick to make all content elements in a containing box the same size, is to give them all a fixed size (e.g. height: 0), and the same box-flex value greater than zero (e.g. -moz-box-flex: 1).
Specifications
This property is a non-standard extension. There was an old draft of the CSS3 Flexbox specification that defined a box-flex property, but that draft has since been superseded.
Browser compatibility
Desktop
Mobile
Feature
Chrome
Firefox (Gecko)
Internet Explorer
Opera
Safari
Basic support Not supported (Yes) Not supported Not supported Not supported
Initial value
0
Applies to
elements that are direct children of an element with a CSS display value of -moz-box or -moz-inline-box or -webkit-box or -webkit-inline-box
Inherited
no
Media
visual
Computed value
as specified
Animatable
no
Canonical order
the unique non-ambiguous order defined by the formal grammar
Syntax
/* <number> values */
-moz-box-flex: 0;
-moz-box-flex: 3;
-webkit-box-flex: 0;
-webkit-box-flex: 3;
/* Global values */
-moz-box-flex: inherit;
-moz-box-flex: initial;
-moz-box-flex: unset;
Values
0
The box does not grow.
> 0
The box grows to fill a proportion of the available space.
Formal syntax
How to read CSS syntax.<number>
Examples
<!DOCTYPE html>
<html>
<head>
<title>-moz-box-flex example</title>
<style>
div.example {
display: -moz-box;
display: -webkit-box;
border: 1px solid black;
width: 100%;
}
div.example > p:nth-child(1) {
-moz-box-flex: 1; /* Mozilla */
-webkit-box-flex: 1; /* WebKit */
border: 1px solid black;
}
div.example > p:nth-child(2) {
-moz-box-flex: 0; /* Mozilla */
-webkit-box-flex: 0; /* WebKit */
border: 1px solid black;
}
</style>
</head>
<body>
<div class="example">
<p>I will expand to fill extra space</p>
<p>I will not expand</p>
</div>
</body>
</html>
Notes
The containing box allocates the available extra space in proportion to the flex value of each of the content elements.
Content elements that have zero flex do not grow.
If only one content element has nonzero flex, then it grows to fill the available space.
Content elements that have the same flex grow by the same absolute amounts.
If the flex value is set using the element's flex attribute, then the style is ignored.
To make XUL elements in a containing box the same size, set the containing box'sequalsize attribute to the value always. This attribute does not have a corresponding CSS property.
A trick to make all content elements in a containing box the same size, is to give them all a fixed size (e.g. height: 0), and the same box-flex value greater than zero (e.g. -moz-box-flex: 1).
Specifications
This property is a non-standard extension. There was an old draft of the CSS3 Flexbox specification that defined a box-flex property, but that draft has since been superseded.
Browser compatibility
Desktop
Mobile
Feature
Chrome
Firefox (Gecko)
Internet Explorer
Opera
Safari
Basic support Not supported (Yes) Not supported Not supported Not supported
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2019-09-16 · 让每一名学员高薪就业
四川源码时代科技有限公司
源码时代IT培训，即成都源代码教育咨询有限公司，专注Java、PHP、UI设计、H5前端培训，源码时代致力于打造中国高端IT培训品牌，旨在为每一名前来培训的学子提供良好的服务。
向TA提问
关注
![]()
展开全部
由于CSS3中的许多属性还未成为W3C标准的一部分，所以每种内核的浏览器都只能识别带有自身私有前缀的CSS3属性。我们在书写CSS3代码时，需要在属性前加上对应浏览器的私有前缀，然后该浏览器的内核才能识别相应的CSS3属性。
私有前缀的作用是为避免日后w3c公布标准时有所变更，加入一个私有前缀，比如-webkit-border-radius，通过这种方式来提前支持新属性。等到日后w3c公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius这种写法。
比如border-radius属性，应该W3C标准写法还未确定，所有不同浏览器不能识别代码的含义。必须要加上对应浏览器的私有前缀，才能够被浏览器识别。
目前私有前缀的对应关系如下：
-webkit- 针对Chrome和Safari浏览器
-moz- 针对FireFox浏览器
-o- 针对Opera浏览器
-ms- 针对IE浏览器
私有前缀的作用是为避免日后w3c公布标准时有所变更，加入一个私有前缀，比如-webkit-border-radius，通过这种方式来提前支持新属性。等到日后w3c公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius这种写法。
比如border-radius属性，应该W3C标准写法还未确定，所有不同浏览器不能识别代码的含义。必须要加上对应浏览器的私有前缀，才能够被浏览器识别。
目前私有前缀的对应关系如下：
-webkit- 针对Chrome和Safari浏览器
-moz- 针对FireFox浏览器
-o- 针对Opera浏览器
-ms- 针对IE浏览器
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
