欢迎大家来到IT世界,在知识的湖畔探索吧!
今天为什么要给大家讲解这个东西呢,因为css这部分,尤其是数值这部分感觉非常简单,但是尤其是简单的,却很多人根本就没有弄懂。所以今天就来讲一下css的数值问题吧。大家还是好好听一下吧。
width height 百分比
当元素的height、width设置为百分比时,分别基于包含它的块级对象的高度、宽度。这个是常规百分比的含义。
<div class="container"> <div class="inner">注意这里</div> <div class="divider">我是分割线</div> </div> .container{ width: 500px; height: 300px; border: 1px solid grey; } .inner{ background: lightblue; text-align: center; width: 50%; height: 50%; } .divider{ border-top: 1px solid lightblue; text-align: center; }
欢迎大家来到IT世界,在知识的湖畔探索吧!
margin 百分比
假设一个块级容器,宽 500px,高 300px,块级子元素定义 margin:10% 5%;,你觉得 margin 的 top, right, bottom, left 计算值最终是多少?
我们来实际看一下
欢迎大家来到IT世界,在知识的湖畔探索吧! <div class="container"> <div class="inner">注意这里</div> <div class="divider">我是分割线</div> </div> .container{ width: 500px; height: 300px; border: 1px solid grey; } .inner{ margin: 10% 10%; background: lightblue; text -align: center; } .divider{ border-top: 1px solid lightblue; text-align: center; }
结果出来了,50px 50px 50px 50px,并不是50px 30px 50px 30px
为什么
CSS权威指南中的解释:
我们认为,正常流中的大多数元素都会足够高以包含其后代元素(包括外边距),如果一个元素的上下外边距是父元素的height的百分数,就可能导致一个无限循环,父元素的height会增加,以适应后代元素上下外边距的增加,而相应的,上下外边距因为父元素height的增加也会增加。
margin 的百分比值参照其包含块的宽度进行计算。
当书写模式变成纵向的时候,其参照将会变成包含块的高度。我们改变一下上面例子中的 CSS 书写模式:
.container{ width: 500px; height: 300px; border: 1px solid grey; writing-mode: vertical-lr; }
这时的结果为:30px 30px 30px 30px
也就是说书写模式影响 margin 百分比的参照对象。
padding 百分比
同上 Î
举个例子看看效果。注意,这是纵向排列的例子。
注意这里
我是分割线
同上一个例子相比, 左侧元素占位区域并没有扩大,仅仅是由于margin 改为padding 导致背景区域扩大而已。
因此,padding的百分比不是相对于自身,而是当书写模式为默认横向排列时,相对最近父元素的宽度,书写模式为writing-mode: vertical-lr; 纵向排列时,百分比相对于父元素高度
width、padding 联合百分比
单用一个很简单,但如果联合,可能就会有问题了。这里我不禁要问一句:
兄弟,你听过盒模型么?
- W3C的标准盒模型 box-sizing: content-box,默认属性 设置的width或height是对 实际内容(content)的width或height进行设置,内容周围的border和padding另外设置
- 怪异盒模型 box-sizing: border-box 设置的width或height是对 实际内容(content)+内边距(padding)+边框(border)之和
现在,我们来看个栗子,其中内部元素width设为100%, padding设为10%
欢迎大家来到IT世界,在知识的湖畔探索吧! <div class="container"> <div class="inner"><div class="text">注意这里</div></div> <div class="divider">我是分割线</div> </div> .container{ width: 500px; height: 300px; border: 1px solid grey; } .inner{ background: lightblue; text-align: center; width: 100%; padding: 10% 10%; box-sizing: content-box; // 补上这里是因为有些环境默认不是标准盒模型 } .divider{ border-top: 1px solid lightblue; text-align: center; } .text{ background: yellow; }
在标准盒模型下,width: 100%; padding: 10% 10%; 会导致内部元素溢出,如果遇到这种情况,一般都会使用怪异盒模型,即设置box-sizing: border-box,这时候width的值是会包含padding的距离的。你可以自己打开控制台试试,这里就不举例了。
top、left、right、bottom 百分比
还是看图说话
<div class="container"> <div class="inner"></div> </div> .container{ width: 500px; height: 300px; border: 1px solid grey; position: relative; } .inner{ width: 200px; height: 100px; background: lightblue; top:10%; left: 10%; position: absolute; }
可以很明显的看出,left相对于父元素宽度,top相对于父元素高度。同理可推出right相对于父元素宽度,bottom相对于父元素高度。
translate百分比
在translate 函数当中使用百分比是以该元素自身的宽高作为基准。
当子元素的width和height未知时,无法通过设置margin-left:-width/2和margin-top:-height/2来实现,这时候可以设置子元素的transform: translate(-50%,-50%)。
<div class="container"> <div class="inner"></div> </div> 复制代码 .container{ width: 500px; height: 300px; border: 1px solid grey; position: relative; } .inner{ width: 50%; height: 50%; background: lightblue; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
translate 属性和绝对定位、相对定位属性加上 top、left 数值都可以使元素产生位移,但存在细微差别,表现在offsetLeft 和 offsetTop 属性。
使用绝对定位、相对定位属性加上 top、left ,会影响offsetTop和 offsetLeft 的值;
使用 translate 的offsetTop和 offsetLeft 与没有产生位移的元素没有区别,即无论translate 的值为多少,offsetTop和 offsetLeft 的值都是固定不变的。
margin为负值
- margin-left,margin-right为负值
- 元素本身没有宽度,会增加元素宽度
<div class="container"> <div class="inner">里层的元素设置了margin-right:-100px</div> </div> .container{ width: 500px; height: 200px; border: 1px solid grey; margin-left: 100px; } .inner{ height: 100px; background: lightblue; margin-left: -100px; }
里层的元素设置了margin-left:-100px
- 元素本身有宽度,会产生位移 补充inner元素宽度属性
.inner{ height: 100px; background: lightblue; margin-left: -100px; width: 100%; }
里层的元素设置了margin-left:-100px
- margin-top为负值,不管是否设置高度,都不会增加高度,而是会产生向上的位移
.inner{ height: 100px; background: lightblue; margin-left: -100px; width: 100%; }
里层的元素设置了margin-top:-100px
- margin-bottom为负值的时候不会位移,而是会减少自身供css读取的高度.
<div class="container"> <div class="inner">里层的元素设置了margin-bottom:-100px</div> <div>这里是下一个元素</div> </div> .inner{ height: 150px; // 此处height变为150px background: lightblue; margin-bottom: -100px; width: 100%; }
里层的元素设置了margin-bottom:-100px
这里是下一个元素
那么,你觉得负值改为负百分比又是什么情况呢?欢迎留言
## padding 为负值
很遗憾,padding不允许指定为负,指定了也无效~
1、点赞+评论(勾选“同时转发”)
2、关注小编。并私信回复关键字【学习】(一定要私信哦~手机APP点击我的头像就能看到私信按钮了),部分资料如下
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/77661.html