HTML+CSS入门 深入学习CSS属性中的百分比
阿萨 2018-03-20 来源 :网络 阅读 1321 评论 0

摘要:本篇HTML+CSS入门将讲解CSS属性中的百分比这一知识点,看完这篇文章会让你对CSS属性中的百分比的知识点有更加清晰的理解和运用。

本篇jHTML+CSS入门将讲解CSS属性中的百分比这一知识点,看完这篇文章会让你对CSS属性中的百分比的知识点有更加清晰的理解和运用。

 

面试题: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但此值只能应用在块元素上,所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算

 

希望这篇文章可以帮助到你。总之,同学们,你想要的职坐标IT频道都能找到!


本文由 @阿萨 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程