资讯专栏INFORMATION COLUMN

深入学习CSS属性中的百分比

icattlecoder / 2633人阅读

摘要:同理相当于,相当于基于元素本身的宽度但此值只能应用在块元素上,所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算

面试题:css中的单位都有哪些?可以取百分数的单位有哪些?这些百分比是如何计算的?

css中的单位

绝对单位
in-英寸;cm;mm;pt-磅;pc-pica

相对单位
em-与元素字号挂钩;ex-与元素字体的“x高度”挂钩;rem-与根元素字号挂钩;px-与CSS像素挂钩;%-另一属性值的百分比

css中可以取百分比的属性

定位:top,right,bottom,left;

盒模型:width,height,margin,padding;

背景:backgroud-position,background-size;

文本:text-indent;

字体:font-size;

百分比是如何计算的

百分比的计算是相对一个基数的,这个基数与当前元素的包含块有关。具体如下:

基于包含块的宽度来计算的属性:margin,padding,width,max-width,min-width,left,right,text-indent.

基于包含块的高度来计算的属性:top,bottom,height,max-height,min-height

基于当前字体大小来计算的属性:line-height

基于line-height来计算的属性:vertical-align

基于元素本身的宽高:background-position:背景图像的位置,分别设置水平方向和垂直方向上的两个值,如果使用百分比,那么百分比值会同时应用于元素和图像。例如 50% 50% 会把图片的(50%, 50%)这一点与框的(50%, 50%)处对齐,相当于设置了 center center。同理 0% 0% 相当于 left top,100% 100% 相当于 right bottom

基于元素本身的宽度:background-size但此值只能应用在块元素上,所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112341.html

相关文章

  • CSS的进一步深入(更新中···)

    ...以设置具体的数字大小,如:100px 100px;   还可以写成分比,如50% 50%就是居中,还可以写成英文单词(top/left/right/bottom/center),如:left left就是左上角         背景简写:         (注:背景大小不能简写)               ...

    Half 评论0 收藏0
  • css-secrets (css揭秘) 知识点目录,值得深入学习

    ...“蚂蚁行军”!!注意斜纹变虚线,理解background-position分比的含义; 顶部边框裁切 第三章 形状 自适应的椭圆 半椭圆 四分之一椭圆 平行四边形 这种情况内容也会被旋转,不符合设计要求! 解决办法: 使用伪元素 菱形图...

    DevWiki 评论0 收藏0
  • 深入学习CSS布局系列(一)布局常用属性

    ...素、厘米等。默认值是 0px。 %:规定基于父元素的宽度的分比的外边距。 inherit: 规定应该从父元素继承外边距。 常见用法(持续更新) 元素居中 #main { //使用max-width防止当浏览器宽度小于600px时出现水平滚动条 max-width: 600p...

    Noodles 评论0 收藏0
  • 学习笔记】CSS深入理解之margin

    ...元素,margin可改变元素水平/垂直方向的占据尺寸 margin与分比单位 普通元素的分比margin都是相对于容器的宽度计算的 绝对定位元素的分比是相对于包含块的宽度计算的 margin重叠 前提 只应用于block元素 不考虑writing-mode...

    stefan 评论0 收藏0
  • 360前端星学习笔记-深入css(2)

    ...出来的,比如有些值需要渲染之后才能获得,如vh,vw,分比这种,得到使用值 将小数像素值转为整数,比如width:400.2px,转化成width: 400px,生成实际值,css求值完毕 3.1 举个栗子

    William_Sang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<