您现在的位置是：网站首页> 编程资料编程资料

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

2021-09-05 910人已围观

简介 百分比值是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.     width: 200px;   
  10.     height: 200px;   
  11.     border: 1px solid blue;   
  12.   }   
  13.   div.child {   
  14.     width: 50%;   
  15.     height: 50%;   
  16.     border: 1px dashed black;   
  17.   }   
  18.      
  19.   
  20.   
  21.   "parent">   
  22.     "child">
  
  •   
    •   
  •   
  •   

    • 再

    上一篇：CSS z-index 层级关系优先级的概念css之Display、Visibility、Opacity、rgba和z-index: -1的区别解决CSS中子元素z-index与父元素兄弟节点的层级问题css 层叠与z-index的示例代码CSS3关于z-index不生效问题的解决z-index为负值的元素无法点击到的解决方法css z-index层重叠顺序使用介绍css中z-index: 0和z-index: auto的区别

    下一篇：浅谈css清除浮动(clearfix和clear)的用法CSS清除浮动方法大全(小结)CSS3 清除浮动的方法示例CSS清除浮动float的三种方法小结清除css浮动的三种方法小结详解css清除浮动float的七种常用方法总结和兼容性处理浅谈css中浮动和清除浮动带来的影响CSS清除浮动方法小结浅谈CSS中的clear清除浮动CSS清除浮动的方法详解CSS清除浮动的常用方法优缺点分析

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网