当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),把下面代码全部贴进去即可.功能包括:表格添加一行 ...
随机推荐
- gridview 列头自动适应宽度
Gridview gv=Gridcontrol.MainView as Gridview; gv.BestFitColumns();
- POJOの説明
参考URL: https://baike.baidu.com/item/POJO/3311958?fr=aladdin https://wenku.baidu.com/view/eba89bbcf12 ...
- mysql出现“Incorrect key file for table”解决办法
本文来自: https://www.cnblogs.com/zjoch/archive/2013/08/19/3267131.html 今天mysql突然出现以下错误: mysql> selec ...
- vue使用qrcode插件生成二维码
参考:https://www.jianshu.com/p/d3883e020d99 步骤: 第一步:vue-cli下载插件 cnpm install --save qrcodejs2 第二步:组件中引 ...
- 关于iOS刷新UI需要在主线程执行
为什么一定要在主线程刷新UI? 安全+效率:因为UIKit框架不是线程安全的框架,当在多个线程进行UI操作,有可能出现资源抢夺,导致问题. 其实:在子线程是不能更新UI的, 看到能更新的结果只是个假象 ...
- python note 11 函数名的使用、闭包、迭代器
1.函数名就是一个变量 def func(): print("我是一个小小的函数") a = func print(a) #输出变量存放地址 <function func a ...
- linux,无法进行写操作怎么办?read-only file system
一句命令搞定: mount -o remount rw /
- Linux-Centon7安装以及配置
环境:MacOS 10.13.6 虚拟机:VirtualBox6.0(VirtualBox-6.0.4-128413-OSX.dmg) Linux:Centos7(CentOS-7-x86_64-Mi ...
- java-27 Properties类的使用
1.Properties Properties 类表示了一个持久的属性集.Properties 可保存在流中或从流中加载.属性列表中每个键及其对应值都是一个字符串. 2.方法 setProperty( ...
- table 的部分使用,固定行,固定列等
主要是用多张table表格实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...