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

icattlecoder 发布于2019-08-29 13:04 / 2926人阅读

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

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

云服务器 GPU云服务器 js中的乘百分之百 css属性访问CSS属性 position属性，css

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

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

CSS的进一步深入（更新中···）

摘要：在之前我们学了种选择器和三种样式的引入，学习选择器就是为了更好的选择文本，学习的引入是为了使文本增加各种样式和属性，下面我们简单来学习一下为文本加样式和一些属性和属性值文本的样式颜色文本对齐方式文本修饰宋体什么都没有宋体是上划线在之前我们学了6种选择器和三种CSS样式的引入，学习选择器就是为了更好的选择文本，学习CSS的引入是为了使文本增加各种样式和属性，下面我们简单来学习一下...

Half 2019-04-23 13:23 评论0 收藏0
css-secrets (css揭秘) 知识点目录，值得深入学习！

摘要：通过模糊来弱化背景和滚动提示使用两层背景，控制交互式的图片对比控件范围输入控件方式书中有很详细的解答提醒自己要回顾。 1. 第一章 css编码技巧第二章边框与背景半透明边框 hsla 多重边框 box-shadow outline 灵活的背景定位 background-position css3该属性可以指定偏移量，////bac...

DevWiki 2019-08-30 15:56 评论0 收藏0
深入学习CSS布局系列（一）布局常用属性

摘要：布局涉及到的属性常用属性值此元素不会被显示它和属性不一样。当所有父元素中的所有元素脱离文档流之后，父元素将失去原有默认的内容高度浮动塌陷配合使用属性规定元素的哪一侧不允许其他浮动元素。 @(CSS技巧)[CSS, 布局] 深入学习CSS布局系列（一）布局常用属性一直感觉自己对CSS的各个属性很了解，可是在前几天一次面试后发现自己真的很多地方感觉自己知道，可是实际上自己并不是真的理解了...

Noodles 2019-08-30 12:53 评论0 收藏0
【学习笔记】CSS深入理解之margin

摘要：张鑫旭的深入理解之学习笔记与容器的尺寸可视尺寸对于没有设定的块元素，可改变元素水平方向的可视尺寸占据尺寸对于元素，可改变元素水平垂直方向的占据尺寸与百分比单位普通元素的百分比都是相对于容器的宽度计算的绝对定位元素的百分比是相对于包含块的宽张鑫旭的CSS深入理解之margin学习笔记 margin与容器的尺寸可视尺寸：对于没有设定width的块元素，margin可改变元素水平方向...

stefan 2019-08-30 15:54 评论0 收藏0
360前端星学习笔记-深入css(2)

摘要：课程一继承某些元素会自动继承其父元素的计算值举例上述代码，标签里的就会继承父元素的，为。显示继承给设置显示继承根元素下所有元素除独自设置如的都是。二初始值当向上继承到顶点还是没找到值的话，就需要初始值了。课程ppt 一、css继承 1.1 某些元素会自动继承其父元素的计算值举例： This is a test of inherit. p { color: #666; ...

William_Sang 2019-08-29 15:38 评论0 收藏0