1、百分比介绍

一般元素的宽度用百分比值表示时,元素的总宽度包括外边距取决于父元素的width,这样可能得到“流式”页面,即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置该样式,使其子元素使用百分数外边距,当用户修改浏览窗口的宽度时,外边距会随之扩大或缩小。

margin-right/margin-left的百分比值是相对于父元素的宽度来计算的,这很好理解;而margin-top/margin-bottom为什么也是以父元素的width为参照物的呢?

2、为什么呢?

CSS权威指南中的解释:若是相对于父元素的高度计算会形成死循环。
“我们认为,正常流中的大多数元素都会足够高以包含其后代元素(包括外边距),如果一个元素的上下外边距是父元素的height的百分数,就可能导致一个无限循环,父元素的height会增加,以适应后代元素上下外边距的增加,而相应的,上下外边距因为父元素height的增加也会增加,形成无限循环。”

还有一种说法是根本原因并不是因为死循环。例如zhangxinxu认为相对于 height 计算,大多数情况下计算值都是 0,跟摆设没什么 区别,还不如相对宽度计算,因为 CSS 默认的是水平流,计算值一直会有效,而且我们还可以 利用这一特性实现一些有意思的布局效果。也就是面向场景和需求设计,这种设计可以让我们轻松实现自适应的等比例矩形效果。

Anyway,总而言之就是:

默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于父元素宽度计算的。

3、小栗子

<div style="width:100px; border: 1px solid gray;"  id="box">
<div id="container">1</div>
</div> #container{
padding-top: 50%; // margin-top: 50%;
background-color: pink;
}

div中没有内容时,实现的是一个宽高为1:2的小矩形。padding-top: 50%;表示元素的高度为宽度的一半。padding-top: 100%; 可实现宽高为1:1的小矩形。(改为padding: 50%`,实现的是一个宽高1:1的小矩形,因为50%+50%=100%;)

从盒子模型可以看出,虽然容器的内容高度为0,但由于有了跟内容宽度一致的padding,因此整体视觉效果上像是被撑开了。

使用方法: padding-top用来设置元素的宽高比例;该元素在父元素宽度变化的过程中将保持自身固定的宽高比。

4、应用

对于绝大多数都布局,我们并不要求非要比例固定,但是有一种情况例外,那就是图片,因为图片原始尺寸它是固定的。在传统的固定宽度的布局下,我们会通过给图片设定具体的宽度和高度值,来保证我们的图片占据区域稳固;但是在移动端或者在响应式开发情况下,图片最终展现的宽度很可能是不确定的。

此时需要的不是对图片进行固定尺寸设定,而是比例设定。为了维持图片的宽高比固定,即保持原来的尺寸比不变,要做到元素高度随着元素的进行自适应变化。

对于复杂布局,如果图片的宽度是不固定的自适应的,我们通常会想到这么一个取巧的做法,就是只设定图片的宽度例如img { width: 100%; },图片的高度不进行限定,由图片的内容去撑开,这样会出现图片占据的高度有一个从0到计算高度的图片变化,视觉上会有明显的元素跳动,代码层面会有布局重计算。即使图片加载速度很快,容器在图片加载前后都会有一个变型的过程,也就是俗称的“闪烁”,而如果图片加载不出来,整体布局就更是难看了。

所以对图片高宽都进行限定还是有必要的,但是同时要保证宽度自适应。

给子元素/伪元素设置margin/padding撑开容器

由于添加子元素与HTML语义化相悖,因此更推荐使用伪元素(:after)来实现此方案。

<div style="width:100px; border: 1px solid gray;overflow:hidden;">
<div id="container" class="placeholder"></div>
</div> #container {
position: relative;
background-color: pink;
overflow: hidden; // 当使用margin-top需要触发BFC消除与其他元素可能发生margin折叠的问题
}
.placeholder:after {
content: ' ';
display: block;
margin-top: 100%;
}

容器内部如何添加内容

那么,在撑开容器后,如何给容器添加内容(图片、文本等)呢?
利用position: absolute;

<div id="container" class="placeholder">
<img src="xxx.jpg" />
</div> #container {
position: relative;
background-color: pink;
overflow: hidden;
}
.placeholder:after {
content: ' ';
display: block;
margin-top: 100%;
}
img {
position: absolute;
top: 0;
width: 100%;
}

References

CSS百分比padding实现比例固定图片自适应布局
巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁)

margin/padding百分比值的计算的更多相关文章

  1. css relative设置top为百分比值

    前言: 最近在学习HTML.CSS的过程中,想模仿一下百度首页.发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化(效果如下图所示),于是自己研究了一下并记录下来. 效果实现 <!D ...

  2. 巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁)

    本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...

  3. 巧用margin/padding的百分比值实现高度自适应

    原文:https://segmentfault.com/a/1190000004231995 一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padd ...

  4. 定位(left 、right 、top 、 bottom)、padding、margin 值设为百分比值时

    定位(left .right .top . bottom): top 为例 right 为例 padding.margin : 当padding.margin 值设为百分比值时,其百分比会相对于父元素 ...

  5. 当padding,margin,top为百分比值,具体数值如何计算

    padding以及margin的四个方向设置值为百分数的时候,是以父元素的宽度为基数来进行计算. (为了保持横向和纵向方向上的margin/padding一致,但是其实也不是一定以父元素的宽度为参照物 ...

  6. javascript 计算两个整数的百分比值

    ///计算两个整数的百分比值 function GetPercent(num, total) { num = parseFloat(num); total = parseFloat(total); i ...

  7. CSS 百分比 margin & padding

    前段时间我同事对于margin和padding应用百分比值似乎有些误解,觉得可能是个普遍问题,所以觉得有必要拿出来单独写一下. margin和padding都可以使用百分比值的,但有一点可能和通常的想 ...

  8. CSS设置百分比值的问题

    当给元素设置width:100%:height:100% 的时候没有反应 因为,元素的宽高是根据内容来自动适应的,当设置百分比值时,是根据这个元素的父元素来确定百分比的 如果父元素没有固定的值,那就需 ...

  9. css百分比值到底参考谁?

    一.元素宽高设置百分比 (1)width / min-width / max-width 参考块级父元素的宽度 (2)height / min-height / max-height 参考块级父元素的 ...

随机推荐

  1. SpringBoot错误经验

    1.在application.properties 添加 debug=true,可以看见项目的执行流程有助于调bug 2.如果错误显示端口号被占用 cmd 步骤1 查看端口号应用情况:netstat ...

  2. 医院里的CR、DR、CT、磁共振、B超都是什么?

    转自 百度知道MR CT CR DR DSA X线 都事医学影像疾病诊断的一种. MRI 是磁共振影像检查,可以获得横断面,矢状面和冠状面的影像.空间分辩率好. CT 是一种X线诊断设备,是一种复杂的 ...

  3. jquery点击来回切换

    做个笔记偶尔用有时记不住 方法一: <div id="test"> test </div> $('#test').mouseover(function () ...

  4. <每日一题> Day4:CodeForces-1042A.Benches(二分 + 排序)

    题目链接 参考代码: /* 排序 + 每次取小 #include <iostream> #include <algorithm> using namespace std; co ...

  5. 持续集成工具——Jenkins

    一.jenkins简介 1.持续集成工具 2.基于JAVA环境 二.环境搭建 1.安装JDK 2.安装配置git 3.安装配置tomcat Tomcat是针对Java的一个开源中间件服务器(容器),基 ...

  6. Gradle打包问题Deprecated Gradle features were used in this build, making it incompatible with Gradle 5.0

    前言 使用gradle打包react native的时候,出现了如下报错,下面和大家说一下解决的具体办法 Deprecated Gradle features were used in this bu ...

  7. 加秘钥的SSH

    import paramiko private_key = paramiko.RSAKey.from_private_key_file('id_rsa31.txt') # 创建SSH对象 ssh = ...

  8. EF添加关联的提示问题:映射从第 260 行开始的片段时有问题:

    一,EF添加关联的提示问题 严重性 代码 说明 项目 文件 行 禁止显示状态错误 错误 3004: 映射从第 260 行开始的片段时有问题:没有为 设置 T_xx_xxRelation 中的属性 T_ ...

  9. Nhbernate

    一.ORM1.对象关系映射(Object Relational Mapping,简称ORM)是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术.2.ORM是通过使用描述对象和数据库之间映射的 ...

  10. Windows下的vue-devtools工具的安装

    详细教程在这个链接里: https://www.cnblogs.com/xqmyhome/p/10972772.html