css宽高百分比是相对于谁(css中的百分比单位详解)

大家好,今天小编来为大家解答以下的问题，关于css宽高百分比是相对于谁，css中的百分比单位详解这个很多人还不知道，现在让我们一起来看看吧！

CSS内边距的百分比数值

前面提到过，可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width计算的，这一点与外边距一样。所以，如果父元素的 width改变，它们也会改变。

下面这条规则把段落的内边距设置为父元素 width的 10%：

p{padding: 10%;}

例如：如果一个段落的父元素是 div元素，那么它的内边距要根据 div的 width计算。

<div style=width: 200px;>

<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>

</div>

注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

CSS让百分比和px一起使用

在CSS中，百分比和px可以一起使用，代码如下：

left: calc(10%+ 10px)

.class{ width: calc(50%- 100px);

}

注意：设置完left: 10px;后使用 padding-left: 10px;盒子内部向右移动10px，如果让盒子整体移动，用margin-left: 10px;

扩展资料：

px的特点：

1、IE无法调整那些使用px作为单位的字体大小；

2、国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

3、Firefox能够调整px和em，rem，但是有大部分的国产浏览器使用IE内核；

4、px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的,可以定宽、定高；

5、em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸；

如何css控制字体按百分比放大缩小

字体百分比放大缩小是可以的，不同单位不同设置情况

1.“Ems”(em):“em”是一个可伸缩的单位,用于web文档媒体展示。一个em等于当前的字体大小,例如,如果文档的字体大小是12 pt,1 em等于12 pt。Ems在本质上是可伸缩的,所以2 em相当于24 pt，.5 em相当于6 pt等。ems由于其可伸缩性和适应移动设备的特性在web文档中正变得越来越受欢迎。

2.像素(px):像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。一个像素等于电脑屏幕上的一个点(是你屏幕分辨率的最小分割)。许多网页设计师在web文档使用像素单位以生产浏览器渲染的像素完美呈现的网站。像素单元的一个问题是,它没有为视障读者的扩展,以适应移动设备。

3.点(pt):点通常用于印刷媒体(任何打印在纸上的媒体,等等)。一个点等于一英寸的1/72。点更像像素,他们是固定大小的单位,不能伸缩。

4.百分比(%):百分比单位更像“em”单位,除了一些根本性的差异。首先,当前的字体大小等于100%(比如12 pt= 100%)。当使用百分比单位,你的文字在移动设备上仍然保持完全的可伸缩性和可访问性。

建议使用最常用的像素单位，使用响应式媒体查询编写不同情况下的字体大小。

好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！