当前位置: 首页 > Web前端 > CSS

深入研究CSS属性中的百分比

时间:2023-03-30 13:44:49 CSS

面试题:CSS中的单位是什么?百分比可以用什么单位?这些百分比是如何计算的?css英寸中的绝对单位;厘米;毫米;磅;pc-pica相对单位em-链接到元素字体大小;ex-链接到元素字体的“x高度”;rem-链接到根元素字体大小;px-与CSS像素链接;%-percentageofanother属性值css可以采取percentage属性定位:top,right,bottom,left;盒子模型:宽度、高度、边距、填充;背景:背景位置,背景大小;文本:文本缩进;字体:字体大小;百分比是如何计算的百分比的计算是相对于一个基数的,它与当前元素的包含块有关。具体如下:根据包含块的宽度计算的属性:margin、padding、width、max-width、min-width、left、right、text-indent。基于包含块高度计算的属性:top,bottom,height,max-height,min-height属性基于当前字体大小计算:line-height属性基于line-height计算:vertical-align基于元素本身的width和height:background-position:背景图片的位置,分别设置水平和垂直方向的两个值,如果使用百分比,则百分比值将同时应用于元素和图片.比如50%50%,就是将图片的(50%,50%)和框的(50%,50%)对齐,相当于设置center居中。同样0%0%相当于lefttop,100%100%相当于rightbottom基于元素本身的宽度:background-size但是这个值只能应用于块元素,设置的百分比值会使用背景图像的大小根据包含元素的宽度的百分比计算