css em弹性布局

最新推荐文章于 2022-08-16 14:18:04 发布

活着就得有野心

最新推荐文章于 2022-08-16 14:18:04 发布

阅读量344

点赞数 1

本文链接：https://blog.csdn.net/huoniu007/article/details/49334245

版权

元素自身没有设置字号大小时，元素的width、height、line-height、margin、padding、border等值转换都按下面公式转换：

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

我们来看一个实例：

			<body>
				<div id="wrapper">test</div>
			</body>

我们在body默认字体大小为“16px”,此时需要“div#wrapper”的相关参数值为：

			#wrapper {
				width: 200px;
				height: 100px;
				border: 5px solid red;
				margin: 15px;
				padding: 10px;
				line-height: 18px;
			}

那么我们按照上面的公式，将所在参数进行转换：

			#wrapper {
				width: 12.5em;/*1 ÷ 16 × 200 = 12.5em值*/
				height: 6.25em;/*1 ÷ 16 × 100 = 6.25em值*/
				border: 0.3125em solid red;/*1 ÷ 16 × 5 = 0.3125em值*/
				margin: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em值*/
				padding: 0.625em;/*1 ÷ 16 × 10 = 0.625em值*/
				line-height: 1.125em;/*1 ÷ 16 × 18 = 1.125em值*/
			}

我们一起来看计算出来的值：

接下来我需要大家在来看一个效果，这一点很关键哟，仔细看好，在同样的参数基础上稍加一条元素本身设置字体大小为：14px；，大家可以会说很简单的呀，按前面的公式计算出来加上就是了，那么我现在就按大家说的计算加上：

			#wrapper {
				font-size: 0.875em;/*1 ÷ 16 × 14= 0.875em值*/
				width: 12.5em;/*1 ÷ 16 × 200 = 12.5em值*/
				height: 6.25em;/*1 ÷ 16 × 100 = 6.25em值*/
				border: 0.3125em solid red;/*1 ÷ 16 × 5 = 0.3125em值*/
				margin: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em值*/
				padding: 0.625em;/*1 ÷ 16 × 10 = 0.625em值*/
				line-height: 1.125em;/*1 ÷ 16 × 18 = 1.125em值*/
			}

此进我们在firebug下看计算出来的layout值

为了更好的说明问题，我把元素自身没有设置字体大小和元素自身设置了字体大小，两者在firebug计算出来值：

我截这个图的主要意图是，说明一个问题就是元素自身要是设置了字体大小后，其计算公式就不在是前面所说的，我们需要做一下修改：

1、字体计算公式依旧

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

2、其它属性的计算公式需要换成

1 ÷ 元素的font-size × 需要转换的像素值 = em值

那么我们现在来计算一回：

			#wrapper {
				font-size: 0.875em;/*1 ÷ 16 × 14= 0.875em值*/
				width: 14.2857em;/*1 ÷ 14 × 200 = 14.2857em值*/
				height: 7.1429em;/*1 ÷ 14 × 100 = 7.1429em值*/
				border: 0.357em solid red;/*1 ÷ 14 × 5 = 0.357em值*/
				margin: 1.071em;/*1 ÷ 14 × 15 = 1.071em值*/
				padding: 0.714em;/*1 ÷ 14 × 10 = 0.714em值*/
				line-height: 1.2857em;/*1 ÷ 14 × 18 = 1.2857em值*/
			}

我们在来看一次计算出来的值：

总结

长篇介绍了一大堆，唯一想告诉大家的是以下几点

1、浏览器的默认字体大小是16px

2、如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值，我们都可以按下面的公式来计算

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

3、这一种千万要慢慢理解，不然很容易与第二点混了。如果元素设置了字体大小，那么字体大小的转换依旧按第二条公式计算，也就是下面的：

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

那么元素设置了字体大小，此元素的其他属性，如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算：

1 ÷ 元素自身的font-size × 需要转换的像素值 = em值

这样说，不知道大家理解了整明白了没有，如果没有整明白，可以回过头来看上面的一个实例。

活着就得有野心

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css em弹性布局

元素自身没有设置字号大小时，元素的width、height、line-height、margin、padding、border等值转换都按下面公式转换：1 ÷ 父元素的font-size × 需要转换的像素值 = em值我们来看一个实例： test 我们在body默认字体大小为“16px”,此时需要“div#wrapper”的相关参数值为：
复制链接

扫一扫