欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-07 10:41:24
...
一起来了解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,百分比按照父元素的宽计算,对于定位元素,则按照父元素的高计算。

以上就是详解CSS中的percentage百分比值使用方法的详细内容,更多请关注其它相关文章!