当padding/margin的取值形式为百分比时。。。。。
一个基础却又容易混淆的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的取值形式为百分比时。。。。。的更多相关文章
- CSS margin属性取值
margin表示一个元素的外边距.取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近 但是,设置margin后,四个方向的表现形式不同 自身发生移动:top.left margin-t ...
- django的几个常见命令、request请求取值形式、数据库连接、
django基础知识薄弱点 几个常见的命令 #创建django项目 django-admin startproject mysite #启动django项目 python manage.py runs ...
- 【转】MySQL外键约束On Delete、On Update各取值的含义
转载地址:http://hi.baidu.com/jxqlovejava/item/3d2cc5b5d689917c244b0920 先看On Delete属性,可能取值如上图为:No Actio ...
- MySQL外键约束On Delete、On Update各取值的含义
主键.外键和索引的区别? 主键 外键 索引 定义: 唯一标识一条记录,不能有重复的,不允许为空 表的外键是另一表的主键, 外键可以有重复的, 可以是空值 主索引(由关键字PRIMARY定义的索引) ...
- 关于margin和padding取值为百分比和负值的总结
以下是自己学习过程中的总结,直接上结论: 1.margin/padding取值为百分比: margin和padding四个方向上的取值为百分比都是参照父级元素的宽度来计算的. 2.margin取值为负 ...
- 页面传递的都是string ; 每个标签要有name的原因是为了取值 因为传递给后台是键值对的形式
页面传递的都是string ; 每个标签要有name的原因是为了取值 因为传递给后台是键值对的形式
- httprequest存储的是字符内容 而文本内容是以字节形式上传的;所以普通的取值方式无法从httprequest取到值
httprequest存储的是字符内容 而文本内容是以字节形式上传的;所以普通的取值方式无法从httprequest取到值
- Silverlight的ComboBox 的绑定和取值
Silverlight的ComboBox与winform中的ComboBox存在类似的地方,但也有不同之处,本章包含以下内容: 一.ComboBox 如何添加和绑定数据. 二.ComboBox 如何添 ...
- js动态添加-表格逐行添加、删除、遍历取值
关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可.功能包括:表格添加一行 ...
随机推荐
- 微信小程序--录音
var app = getApp(), $ = require("../../utils/util.js"); const recorderManager = wx.getReco ...
- 【笔记】Python基础三:文件
一,文件操作 (一),文件处理流程 1,打开文件,获得文件句柄(open函数提供)并赋值 2,通过句柄对文件进行操作 3,关闭句柄 f = open('陈粒',encoding='utf-8')#op ...
- systemd 编写服务管理脚本---学习
转载:https://www.cnblogs.com/sparkdev/p/8521812.html 我们运行 linux 服务器的主要目的是通过运行程序提供服务,比如 mysql.web serve ...
- laravel5增删改查
路由规则: 数据库配置: config/database.php laravel5/.env 控制器: 表单: 展示页面: 修改页面:
- 【转载】SQL Server中的Merge关键字
简介 原文地址 Merge关键字是一个神奇的DML关键字.它在SQL Server 2008被引入,它能将Insert,Update,Delete简单的并为一句.MSDN对于Merge的解释非常的短小 ...
- dotnet run 提示System.Net.Sockets.SocketException (10049): 在其上下文中,该请求的地址无效。
更换端口号试一下. 查看官方文档 PS: 使用帮助命令 -h,可以指定启动配置文件: dotnet run --launch-profile xxx 例如下面的配置文件,假如我们要使用codes-t ...
- VMware 中安装KVM,模块不加载
# yum -y install qemu-kvm libvirt virt-install bridge-utils 通过以上命令在VMWare中centos7安装KVM模块 安装后使用 #lsmo ...
- Read-only file system
mount -o remount rw /
- playframework 一步一步来 之 日志 (三)
在paly中自定义配置logback,也很简单,只需在conf folder下添一个application-logger.xml或者logger.xml就行了.(出处:"If you cre ...
- Sublime Text Snippets(代码片段)功能
原文链接:http://www.bluesdream.com/blog/sublime-text-snippets-function.html 我们在编写代码的时候,总会遇到一些需要反复使用的代码片段 ...