percentage和percent用法的区别?

发布网友发布时间：2022-04-22 04:50

共5个回答

懂视网时间：2022-04-22 09:11

一起来了解CSS中的percentage百分比值使用方法

百分比值是CSS中设计各种元素尺寸以及页面布局的基础手段,这里就带大家来彻底掌握CSS中的percentage百分比值使用,包括percentage转px的方法等,here we go~

百分比旨在相对于父元素的相同属性的大小。
如果用来设置字体，则相对的就是父元素的字体大小。
大多数浏览器中<html> 和<body> 标签中的默认字体尺寸是100%.

html {font-size: 100%;} 
body {font-size: 100%;} 
100% = 1em = 16px = 12pt

如果用来设置宽和高等非字体尺寸，则以百分比为单位的长度值是基于具有相同属性的父元素的长度值。

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title>JS Bin</title> 
 <style type="text/css"> 
 p.parent { 
 margin:150px; 
 width: 200px; 
 height: 200px; 
 border: 1px solid blue; 
 } 
 p.child { 
 width: 50%; 
 height: 50%; 
 border: 1px dashed black; 
 } 
 </style> 
</head> 
<body> 
 <p class="parent"> 
 <p class="child"></p> 
 </p> 
</body> 
</html>

再啰嗦一点关于父元素的问题：何为父元素，相对定位（relative），绝对定位（absolute），浮动（float），固定（fixed）中如何找寻父元素？
由于HTML是树形结构，标签套标签，一般情况下的父子关系很明朗。

<p class="parent">
 <p class="child"></p>
</p>

1.相对定位元素，它的父元素符合标签嵌套。
2.绝对定位元素，它的父元素是离它最近的定位元素（绝对定位，相对定位，固定，但不包括浮动）或者视窗尺寸（没找到定位元素时）。
3.浮动元素，它的父元素也符合标签嵌套。
4.固定元素（特殊的绝对定位），它的父元素是视窗（浏览器默认用来展示内容的区域的尺寸，不是html 或body 的尺寸）。
注意一下绝对定位就行了，其他的相对简单。

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title>JS Bin</title> 
 <style type="text/css"> 
 html { 
 width:1000px; 
 } 
 body { 
 width:800px; 
 } 
 #box { 
 width:50%; 
 height:300px; 
 position: absolute; 
 margin-left: 200px; 
 border: 1px solid red; 
 } 
 #can { 
 position:absolute; 
 top:100px; 
 left:100px; 
 width:50%; 
 height:50%; 
 border:1px solid black; 
 } 
 </style> 
</head> 
<body> 
 <p id="box"> 
 <p id="can"></p> 
 </p> 

</body> 
</html>

详解CSS中的percentage百分比值使用方法

box 宽度为视窗的一半，can 的宽高是 box 的宽高的一半。
将 can 设置为 position: fixed; 则其父元素将不再是 box 而是浏览器视窗。
详解CSS中的percentage百分比值使用方法

can 的宽高是视窗宽高的一半。
浮动元素的父元素跟普通元素的父元素是一样的。

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title>JS Bin</title> 
 <style type="text/css"> 
 html { 
 width:1000px; 
 } 
 body { 
 width:800px; 
 } 
 #box { 
 width:50%; 
 height:300px; 
 position: absolute; 
 margin-left: 200px; 
 border: 1px solid red; 
 } 
 #can { 
 float:left; 
 width:50%; 
 height:50%; 
 border:1px solid black; 
 } 
 </style> 
</head> 
<body> 
 <p id="box"> 
 <p id="can"></p> 
 </p> 

</body> 
</html>

详解CSS中的percentage百分比值使用方法

注意： padding、 margin 如果设置了百分比，上，下，左，右用的都是父元素宽度的值为标准去计算。

percentage转px
Example 1: Margins

<p style="width: 20px"> 
<p id="temp1" style="margin-top: 50%">Test top</p> 
<p id="temp2" style="margin-right: 25%">Test rightright</p> 
<p id="temp3" style="margin-bottom: 75%">Test bottombottom</p> 
<p id="temp4" style="margin-left: 100%">Test left</p> 
</p>

得到的offset如下：

temp1.marginTop = 20px * 50% = 10px; 
temp2.marginRight = 20px * 25% = 5px; 
temp3.marginBottom = 20px * 75% = 15px; 
temp4.marginLeft = 20px * 100% = 20px;

然后，我又测试了padding，原以为padding的值会根据应用了该属性的相关元素来计算，但让我惊讶的是，padding也是根据应用该属性的父元素的宽来计算的，跟margin表现一致。(再插一句：当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的,元素竖向的百分比设定也是相对于容器的宽度，而不是高度。)
但有一个坑，上面都是对于未定位元素。好奇的我又很好奇，对于非静态定位元素的top, right, bottom, 和left的百分比值又怎么计算呢？
Example 2: Positioned Elements

<p style="height: 100px; width: 50px"> 
<p id="temp1" style="position: relative; top: 50%">Test top</p> 
<p id="temp2" style="position: relative; right: 25%">Test rightright</p> 
<p id="temp3" style="position: relative; bottom: 75%">Test bottombottom</p> 
<p id="temp4" style="position: relative; left: 100%">Test left</p> 
</p>

得到的offset如下：

temp1.top = 100px * 50% = 50px; 
temp2.rightright = 100px * 25% = 25px; 
temp3.bottombottom = 100px * 75% = 75px; 
temp4.left = 100px * 100% = 100px;

对于定位元素，这些值也是相对于父元素的，但与非定位元素不同的是，它们是相对于父元素的高而不是宽。
when the parent element does not have a height, then percentage values are processed as auto instead
虽然有点困惑，但只需要记住：对于margin和padding，百分比按照父元素的宽计算，对于定位元素，则按照父元素的高计算。

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

percentage：百分比
例句和用法：
Whisky contains a large percentage of alcohol.
威士忌所含酒精的百分比很高.
Of all the fibers now used by man, a very large percentage is man-made.
现在人类所使用的所有纤维之中，有很大的百分比是人造的。
We have only a small percentage of foreign books.
我们只有一少部分外文书。
What percentage of the earth is covered by oceans?
地球上百分之多少被海水覆盖着？
percent：n.百分之 adj.百分之一,(与基数词连用)百分之...的
例句和用法：
We give 10 percent discount for cash.
现金付款，我们九折优惠。
The company's market share is 48 percent in the marketplace.
这家公司的市场占有率是百分之四十八。
The gross national proct had increased 5 percent last year.
去年的国民生产总值提高了百分之五。
The millionaire has handed over 50 percent of his stock to his first son.
这个百万富翁已把他一半的股票移交给他的长子。
A solid solution of iron and up to1 percent of carbon, the chief constituent of hardened carbon tool steels.
马氏本，马登斯体一种由铁和高达百分之一的碳组成的溶液，是硬化碳工具钢的主要成分
The covering of forestry in our town is 60 percent.
我们镇的森林覆盖率是百分之六十。
I am a hundred percent in agreement with you.
我百分之百同意你的看法。

热心网友时间：2022-04-22 07:37

percentage

|pəˈsentɪdʒ; 美 pərˈs-|

双语解释：

[可数名词+单数/复数动词]

the number, amount, rate of sth, expressed as if it is part of a total which is 100; a part or share of a whole

百分率；百分比（指一个比率，可以单独使用）

双语例句：

What percentage of the population is/are overweight?
身体超重的人占人口多大的百分比？

A high percentage of the female staff are part-time workers.
女职员中，兼职工作的人占很高的比例。

percent

|pə ˈsent; 美 pər ˈsent|

双语解释：

You use percent to talk about amounts. For example, if an amount is 10 percent (10%) of a larger amount, it is equal to 10 hundredths of the larger amount.

百分之…（不能单独使用，必须与数词一同使用。）

双语例句：

20 to 40 percent of the voters are undecided.
20%到40%的选民还犹豫不决。
We aim to increase sales by 10 percent.
我们的目标是将销售额提高10%。

热心网友时间：2022-04-22 09:12

percentage
1.百分比, 百分率
Television attracts a large percentage of the people.
电视吸引了大部分观众。
2.比例
What is the percentage of nitrogen in air?
空气中所含的氮的比例是多少?

percent
名词 n.
1.百分比,百分数
2.百分之一
形容词 adj.
1.百分之...的,每一百中有...的
2.百分之...支付利息的
副词 adv.
1.以百分之...地;每一百中有...地

热心网友时间：2022-04-22 11:03

举例说明what is the percentage?How many Percent? I don't know the percentage.It is 5 percent. Percentage 是‘百分比’。这个东西的百分比是多少Percent 是‘百分之’。这个东西的含量是百分之5