一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!
也许你会说,left/right以父元素的width为参照物好理解,但是top/bottom为什么也是以父元素的width为参照物的呢?网上众说纷纭,关键还是看W3C的规范

利用这个规范,我们可以用来解决移动端的高度自适应占位问题,在移动端,高度一般都是用内部撑开,例如,一个div包着一个图片。如果是用图片撑开div的话,那么在图片未加载出来时,整个页面的布局就会发生变化。即使图片加载速度很快,容器在图片加载前后都会有一个变型的过程,也就是俗称的“闪烁”,而如果图片加载不出来,整体布局就更是难看了。

现在,利用margin/padding的百分比值。就可以做到不靠图片本身就能把容器的高度撑开

div{
      width:100%
      height:0
      padding-top:100%
      position:relative
      background:rgba(7,17,27,.4)
}
div img{
      position:absolute
      width:100%
      top:0
}

盒子模型如下:

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

同时,看到别人用伪类的方法,解决了上述方法不能设置maxheight的麻烦

#container {
  width: 50%;
  position: relative;
  background-color: red;
  overflow: hidden;  //需要触发BFC消除margin折叠的问题
}
.placeholder:after {
  content: '';
  display: block;
  margin-top: 100%; //margin 百分比相对父元素宽度计算
} 
<div id="container" class="placeholder"></div>

使用margin的话需要考虑margin折叠的问题,padding则无此烦恼。

后记,当然还有其他的方案也能实现宽高自适应,例如css3新推出的长度单位vw。。。。

当padding/margin的取值形式为百分比时。。。。。的更多相关文章

  1. CSS margin属性取值

    margin表示一个元素的外边距.取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近 但是,设置margin后,四个方向的表现形式不同 自身发生移动:top.left margin-t ...

  2. django的几个常见命令、request请求取值形式、数据库连接、

    django基础知识薄弱点 几个常见的命令 #创建django项目 django-admin startproject mysite #启动django项目 python manage.py runs ...

  3. 【转】MySQL外键约束On Delete、On Update各取值的含义

    转载地址:http://hi.baidu.com/jxqlovejava/item/3d2cc5b5d689917c244b0920 ‍ 先看On Delete属性,可能取值如上图为:No Actio ...

  4. MySQL外键约束On Delete、On Update各取值的含义

    主键.外键和索引的区别?   主键 外键 索引 定义: 唯一标识一条记录,不能有重复的,不允许为空 表的外键是另一表的主键, 外键可以有重复的, 可以是空值 主索引(由关键字PRIMARY定义的索引) ...

  5. 关于margin和padding取值为百分比和负值的总结

    以下是自己学习过程中的总结,直接上结论: 1.margin/padding取值为百分比: margin和padding四个方向上的取值为百分比都是参照父级元素的宽度来计算的. 2.margin取值为负 ...

  6. 页面传递的都是string ; 每个标签要有name的原因是为了取值 因为传递给后台是键值对的形式

    页面传递的都是string ; 每个标签要有name的原因是为了取值  因为传递给后台是键值对的形式

  7. httprequest存储的是字符内容 而文本内容是以字节形式上传的;所以普通的取值方式无法从httprequest取到值

    httprequest存储的是字符内容 而文本内容是以字节形式上传的;所以普通的取值方式无法从httprequest取到值

  8. Silverlight的ComboBox 的绑定和取值

    Silverlight的ComboBox与winform中的ComboBox存在类似的地方,但也有不同之处,本章包含以下内容: 一.ComboBox 如何添加和绑定数据. 二.ComboBox 如何添 ...

  9. js动态添加-表格逐行添加、删除、遍历取值

    关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可.功能包括:表格添加一行 ...

随机推荐

  1. 微信小程序--录音

    var app = getApp(), $ = require("../../utils/util.js"); const recorderManager = wx.getReco ...

  2. 【笔记】Python基础三:文件

    一,文件操作 (一),文件处理流程 1,打开文件,获得文件句柄(open函数提供)并赋值 2,通过句柄对文件进行操作 3,关闭句柄 f = open('陈粒',encoding='utf-8')#op ...

  3. systemd 编写服务管理脚本---学习

    转载:https://www.cnblogs.com/sparkdev/p/8521812.html 我们运行 linux 服务器的主要目的是通过运行程序提供服务,比如 mysql.web serve ...

  4. laravel5增删改查

    路由规则: 数据库配置: config/database.php laravel5/.env 控制器: 表单: 展示页面: 修改页面:

  5. 【转载】SQL Server中的Merge关键字

    简介 原文地址 Merge关键字是一个神奇的DML关键字.它在SQL Server 2008被引入,它能将Insert,Update,Delete简单的并为一句.MSDN对于Merge的解释非常的短小 ...

  6. dotnet run 提示System.Net.Sockets.SocketException (10049): 在其上下文中,该请求的地址无效。

    更换端口号试一下. 查看官方文档 PS: 使用帮助命令 -h,可以指定启动配置文件: dotnet run --launch-profile  xxx 例如下面的配置文件,假如我们要使用codes-t ...

  7. VMware 中安装KVM,模块不加载

    # yum -y install qemu-kvm libvirt virt-install bridge-utils 通过以上命令在VMWare中centos7安装KVM模块 安装后使用 #lsmo ...

  8. Read-only file system

    mount -o remount rw /  

  9. playframework 一步一步来 之 日志 (三)

    在paly中自定义配置logback,也很简单,只需在conf folder下添一个application-logger.xml或者logger.xml就行了.(出处:"If you cre ...

  10. Sublime Text Snippets(代码片段)功能

    原文链接:http://www.bluesdream.com/blog/sublime-text-snippets-function.html 我们在编写代码的时候,总会遇到一些需要反复使用的代码片段 ...