web前端,css样式

发布网友发布时间：2022-04-27 00:05

共4个回答

热心网友时间：2022-04-06 13:23

-webkit-box、-moz-box、-o-box、-ms-box、box这些都是指同一个属性即box，前面带有-号的是分别针对不同的浏览器的，其中
-webkit- 针对Chrome和Safari浏览器
-moz- 针对FireFox浏览器
-o- 针对Opera浏览器
-ms- 针对IE浏览器
也就是说凡是带有这样的前缀的都是这些浏览器的私有属性，只有各自的浏览器内部才有效。之所以这样，是因为有些css属性是带有实验性质的（尤其是css3），各主流浏览器尚未对它完全支持，这样就会使用私有属性来进行试验，而其他浏览器则会自动忽略该属性。因此，网页为了兼容各种不同的浏览器，就会把所有的私有属性都放上去，也包括不带前缀的标准属性。而浏览器的版本众多，很可能低版本的浏览器对某个属性处于试验性质，而高版本则已经完全支持了（也就是说可以不用前缀了），比如box属性就是如此，因此你把其他带有前缀的属性去掉不影响效果。但是，既然是网页，就不会是只有你一个人看的，要是其他用户用的是低版本的浏览器呢？所以，从兼容性角度出发，你最好不要删掉这些属性，除非你能保证其他用户用的浏览器与你的完全一样。

热心网友时间：2022-04-06 14:41

那些前缀属于浏览器私有样式，在早期一些属性没有得到广泛支持时，使用前缀来兼容以下各大浏览器，保证效果的最大实现。
-webkit-是基于webkit内核的浏览器，比如Chrome浏览器和一些Android上的浏览器
-o-是Opera浏览器，即欧朋浏览器
-ms-是Microsoft的Internet Explorer浏览器，即IE浏览器
还有-moz-是Mozilla FireFox浏览器，即火狐浏览器

热心网友时间：2022-04-06 16:16

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

热心网友时间：2022-04-06 18:07

由于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浏览器