为了账号安全,请及时绑定邮箱和手机立即绑定

百分比的计算方法

百分比的计算方法相关知识

  • margin/padding百分比值的计算
    1、百分比介绍一般元素的宽度用百分比值表示时,元素的总宽度包括外边距取决于父元素的width,这样可能得到“流式”页面,即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置该样式,使其子元素使用百分数外边距,当用户修改浏览窗口的宽度时,外边距会随之扩大或缩小。margin-right/margin-left的百分比值是相对于父元素的宽度来计算的,这很好理解;而margin-top/margin-bottom为什么也是以父元素的width为参照物的呢?2、为什么呢?CSS权威指南中的解释:若是相对于父元素的高度计算会形成死循环。“我们认为,正常流中的大多数元素都会足够高以包含其后代元素(包括外边距),如果一个元素的上下外边距是父元素的height的百分数,就可能导致一个无限循环,父元素的height会增加,以适应后代元素上下外边距的增加,而相应的,上下外边距因为父元素height的增加也会增加,形成无限循环。”还有一种说法是根本原因并不是因为死循环。例如zhangxinxu认为相对于 heig
  • 关于margin-top:的值是百分百比的问题,以及盒子高度百分百问题
    css margin 的值是百分百的时候,其值是基于父元素的宽度来计算的,并非是自身的宽度,padding 百分比的取值也是一样的, css height 的高度百分比是按其父元素的高度来计算的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ background: #ccc;border: 1px solid #ccc; width: 900px; height: 300px; } .pox{ background: #f0f; width:50%; height: 50%; margin-top: 50%; } </s
  • 父元素百分比 line-height设置文字居中
    当父元素设置高度为百分比的时候  line-height的值自然也就不能是定值  不能用绝对的px值 ,但是给line-height设置百分比,实际上这个百分比是根据字体大小计算的,还是无法得出具体的百分比,所以遇到这种情况只能另辟蹊径,有两种解决办法:1.给父元素设置display:flex;align-items:center;justify-content:center;2.给父元素设置displa:table;需要居中的元素 设置 display:table-cell;vertical-align:middle;
  • 【CSS】margin和padding使用百分比
    最近在做一个小项目,前端部分需要适配手机端。由于工期比较急,先上线PC端,所以在开发PC端样式的时候,没有考虑太多手机端的适配问题。PC端上线后开始做手机端的适配工作,其实主要就是用media query做响应式的处理。由于这个项目还是那种非常老式的服务端渲染的前后端混在一起的开发模式,在我开发完PC端页面后,后端就拿着我的页面去对接后台了。所以我再要做手机端适配,就希望不要再去改html结构了,最好只修改css即可。遇到的一个比较蛋疼的问题是,有一些PC端上会有一些图片作为background,这些容器的宽高自然也是用px写死的固定值。到了手机端,宽度可以100%,但高度就不能用百分比了。有没有一种可以在css中通过宽度和宽高比算出高度的方法呢?答案是有的,那就是padding和margin的百分比。原理是:padding和margin中如果取百分比的值,这个百分比都是根据宽度而言的。如果宽度是100%,并且你知道你的background用的图片的尺寸,那你就可以通过padding-bottom把容器撑开

百分比的计算方法相关课程

百分比的计算方法相关教程

百分比的计算方法相关搜索

查看更多慕课网实用课程

意见反馈 帮助中心 APP下载
官方微信