css百分比的应用

前言 百分比的应用随处可见，在这里作一个小小的总结。 使用百分比的场合 [ 盒子模型 ] width、height [ 文本 ] font-size、line-height 、vertical-align [ 背景 ] border-radius、background-position [ 布局 ] bottom、left、right、top [ 动画 ] transform: translate 若是上面列举的全部属性你都可以轻松地说出它们的百分比含义，那么估计这篇文章就不大适合你了。 接下去咱们使用JsFiddle上面的demo来逐个说说这些样式的百分比 1. width 和 height 这个最经常使用也是最简单的了，它们的百分比计算是基于包裹它的父元素的宽和高来计算，好比: 其盒子模型如图所示 : 有一种特殊状况是，父元素没有明确的高度定义 [ 指的是不定义height或者使用min/max-height这种，都属于不明确的高度定义 ]，而且子元素使用百分比而且不是绝对定位，那么这时候的百分比等同于auto。 width : auto 在 CSS3 中，width:auto多种尺寸表现有了专门的属性值进行对应 .example1 { width: fill-available; } .example2 { width: max-content; } .example3 { width: min-content; } .example4 { width: fit-content; } 复制代码 width 的四种表现 充分利用可用空间 [ fill-available ] 块级元素 <div> 、<p>这些元素的宽度默认是100%基于父级容器的 行内元素 <inline-block> 内容超过一行，且宽度大于容器宽度的时候 收缩与包裹 [ fit-content ] float 、position : absolute width = 内容宽度 收缩到最小 [ min-content ] table-layout = auto、父元素为position : relative且宽度很小，子元素为position : absolute [ 你们空间都不够的时候，文字能断的就断，中文是随便断的，英文单词不能断 ] 超出容器限制 [ max-content ] 行内元素 white-space:nowrap height : auto height:100% 暗示元素将具备其父容器的100％高度。 height:auto 意味着，该元素将具备灵活的高度，即其高度将取决于其子元素的高度 块级元素 子元素 => (块级元素) height = .子元素 { height } 子元素 => (行内元素) 由行内元素组成line-box高度撑开 行内元素 line-height与vertical-align 2. margin和padding 这两个属性的百分比就比较有意思了，也是咱们常常用错的两个。在CSS盒子模型规范明确提出了其百分比的含义： The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1. padding的解释也是相似。 上面的意思能够总结出三点： 百分比的计算是基于其包含块的宽度 百分比的计算规则适用于 margin 和 padding 的四个方向 若是包含块的宽度取决于该元素，那么百分比的使用结果是未定义的。 这时定有童鞋会疑惑，为何 CSS 规范的制定者会选择使用包含块的宽度来做为参考值，而不是高度？ 其实在上面总结的三点中已经有所涉及的了，在咱们平时的样式布局中，元素的高度取决于子元素的高度，若是子元素的 margin 或者 padding 的百分比又依赖于包含块的高度，那么两者互相依赖，就永远没法获得一个稳定的值，陷入了一种死循环，所以也许是基于这个考虑，CSS 的规范中才会提到上面要点的第三点。以上纯属本身的猜想，仅供参考。 margin : auto 垂直方向 水平方向的 auto，其计算值取决于可用空间( 剩余空间 ) 原文：On the B edge and D edge, the used value depends on the available space. 翻译：若是场景是B和D，那么其 auto 计算值取决于可用空间。 水平方向 根据规范，margin-top: auto; 和 margin-bottom: auto;，其计算值为0 padding : auto ? auto is not a valid value for padding property 3. border-radius 根据MDN-border-radius的百分比介绍: 横轴上的百分比参考的是元素自身的宽度 纵轴上的百分比参考的是元素自身的高度，负值是无效的 border-radius的百分比参考值是自身的尺寸,因而你能够常常使用百分比来画出一个圆形来: 4. background-position background-position 这个属性容许你在它的包含块中随意移动背景图片(或者渐变)，默认值是0 0 若是使用百分比，那么百分比的计算应该是这样的，假设一个容器的长宽为400X200，图片是150X150，那么当设置 background-position: 20% 100% 父元素百分比位置和图片百分比位置对应 [ 经过容器位置肯定图片位置 ] (0, 0) => ((400 - 150) * 20%, (200 - 150) * 100%) 也就是移动的结果是(父元素-背景图片)*百分比，这样的设计很符合咱们平时排版的思路。 font-size 参照物 => 父元素 line-height 参照物 => 自身 font-size 大小 vertical-align 参照物 => 自身 line-height 大小 bottom、left、right、top 参考的是元素包含块的尺寸 left 和 right 参照包含块的宽度 bottom 和 top 参照包含块的高度 transform: translate 在水平或者垂直居中的应用场景中，我最常使用的即是这个平移变换了,轻轻松松的-50%就可让块元素居中,那么这个百分之50%基于的是什么样的参考值呢？答案即是其自身元素的宽度或者高度，这里的宽度和高度是否包含了padding和border呢？ 参考的是border-box的尺寸 请注意，当百分比值用于可继承属性时，只有结合参照值计算后的绝对值会被继承，而不是百分比值自己。

Write