您现在的位置是:网站首页>列表内容

彻底掌握CSS中的percentage百分比值使用

2023-10-22 17:28:01 83人已围观

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

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

CSS Code复制内容到剪贴板
  1. html {font-size: 100%;}   
  2. body {font-size: 100%;}   
  3. 100% = 1em = 16px = 12pt  

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

CSS Code复制内容到剪贴板
  1.   
  2.   
  3.   
  4.   "utf-8">   
  5.   JS Bin   
  6.   "text/css">   
  7.   div.parent {   
  8.     margin:150px;   
  9.     width200px;   
  10.     height200px;   
  11.     border1px solid blue;   
  12.   }   
  13.   div.child {   
  14.     width: 50%;   
  15.     height: 50%;   
  16.     border1px dashed black;   
  17.   }   
  18.      
  19.   
  20.   
  21.   "parent">   
  22.     "child">
  
  •   
  •   
  •   
  •   
  • 发布内容
    -六神源码网