除了height以外垂直方向上的margin-top(bottom)或者padding-top(bottom)的百分比取值都是相对于父元素的宽度

默认的content-box盒模型下元素的width就是指的content的宽度

.box {
width: 200px;
height: 400px;
padding: 50px;
border: 1px solid #000;
}
.child {
width: 100px;
height: 50%;
padding-bottom: 50%;
border: 1px solid #000;
}
 
当然这是border-box盒模型,width的百分比计算:
height = 父height*50% = (400px*50%) = 200px
padding-bottom = (父width200px - 父padding50px*2) *50%= 50px
因为这个是border-box盒模型,所以计算时要加上padding宽度的;
 
如果我们的盒子模型是content-box盒模型,就如下计算公式:
padding-bottom = (父width200px)*50% = 100px
 

CSS中的百分比(%)如何使用???的更多相关文章

  1. CSS中属性百分比的基准点

    1.属性百分比的基准点 1.1.基于包含块 以下的关于包含块(含块)的概念,不能简单地理解成是父元素. 如果是静态定位和相对定位,包含块一般就是其父元素.但是对于绝对定位的元素,包含块应该是离它最近的 ...

  2. 浅谈CSS中的百分比

    结论: 标准流中的元素,看其属性有没有继承性.对于width和margin-left,它是可以继承的,它会参照父元素或者祖先元素(其实是包含块):对于height,它没有继承性,父元素或者祖先元素会自 ...

  3. CSS中各种百分比(%)

    1.固定定位  position:absolute;width:100%;height:100%: 中%相对的   都是浏览器的可视窗口宽高. 2.标准文档流中,标签的 % 单位除了height以外, ...

  4. 一起来看看css中的单位

    一起来看看css中的单位 由于一直以来对于css中的百分比单位究竟是相对于谁的比例,这个问题不是很了解,所以就专门找资料看了一下. <div class="container w500 ...

  5. css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位

    css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...

  6. CSS 中的高度百分比

    CSS 中可以使用%来给定指定元素的大小,也就是高度.宽度.margin,padding 等等,但是相信很多人都对百分比表示法的具体含义并不清楚,那么不懂就练,毕竟是检验真理的唯一标准(考研党举个手我 ...

  7. CSS中对图片(background)的一些设置心得总结

    写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...

  8. 原来css中的border还可以这样玩

    原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...

  9. CSS中不为人知Zoom属性的使用介绍(IE私有属性)

    其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的 ...

随机推荐

  1. OC 面向对象的特性

    面向对象的编程语言有封装.继承 .抽象.多态4个主要的特征. 面向对象编程有三大特性:封装.继承.多态.   1. 封装: 封装是保证软件部件具有优良的模块性的基础,封装的目标就是要实现软件部件的“高 ...

  2. Web Scraper——轻量数据爬取利器

    日常学习工作中,我们多多少少都会遇到一些数据爬取的需求,比如说写论文时要收集相关课题下的论文列表,运营活动时收集用户评价,竞品分析时收集友商数据. 当我们着手准备收集数据时,面对低效的复制黏贴工作,一 ...

  3. Spring全家桶——SpringBoot之AOP详解

    Spring全家桶--SpringBoot之AOP详解 面向方面编程(AOP)通过提供另一种思考程序结构的方式来补充面向对象编程(OOP). OOP中模块化的关键单元是类,而在AOP中,模块化单元是方 ...

  4. 联通光猫管理员密码分析(HG220GS-U)

    联通光猫管理员密码分析 联通光猫型号:HG220GS-U软件版本:E00L3.03 运营商一直在做光猫防破解,对抗升级还是比较快的,所有的分析结论都和版本绑定的,因为运营商或者路由器的开发商看到后可能 ...

  5. node进程间通信

    作为一名合格的程序猿/媛,对于进程.线程还是有必要了解一点的,本文将从下面几个方向进行梳理,尽量做到知其然并知其所以然: 进程和线程的概念和关系 进程演进 进程间通信 理解底层基础,助力上层应用 进程 ...

  6. 剑指Offer之变态跳台阶

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级……它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 思路:由于青蛙每次可以跳上1级台阶,也可以跳上2级……它也可以跳上n级,故除了 ...

  7. canvas锥形渐变进度条

    从一个渐变圆角进度条浅出画一个圆 开始 这一切需要从一个(简单)的需求开始,在最开始对设计第一眼看到这张图的时候,感觉挺简单的嘛,直接用echarts饼图模拟出来一个就好了 echarts 然后上ec ...

  8. 50个SQL语句(MySQL版) 问题十三

    --------------------------表结构-------------------------- student(StuId,StuName,StuAge,StuSex) 学生表 tea ...

  9. 深度学习玩LOL-游戏助手-概述

    目标 用深度学习技术实现常规英雄联盟游戏助手的主要功能,功能主要包括:英雄推荐,装备推荐,地图预警等. 基本思路 首先使用图像分类算法模型对游戏客户端内的英雄头像进行截取和识别. 使用线性回归模型对可 ...

  10. leetcode56之合并区间

    题目描述: 给出一个区间的集合,请合并所有重叠的区间. 示例: 输入: [[1,3],[2,6],[8,10],[15,18]]输出: [[1,6],[8,10],[15,18]]解释: 区间 [1, ...