padding百分百值是相对谁的百分比
先看代码
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
width: 300px;
height: 600px;
background: #888;
}
.b169 {
width: 100%;
height: 0;
padding-bottom: 56.2%;
position: relative;
}
.b169 > .innerb169 {
width: 100%;
height: 100%;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<script type="text/javascript"> </script> <div class="outer">
<div class="b169">
<div class="innerb169">hello</div>
</div>
</div>
</body>
要查一下资料了。规定基于父元素的宽度的百分比的内边距。
padding百分百值是相对谁的百分比的更多相关文章
- 关于margin和padding取值为百分比和负值的总结
以下是自己学习过程中的总结,直接上结论: 1.margin/padding取值为百分比: margin和padding四个方向上的取值为百分比都是参照父级元素的宽度来计算的. 2.margin取值为负 ...
- 当margin和padding的值是百分比时，如何计算
对元素的margin设置百分数时,百分数是相对于自身包含块的width计算(包含块传送门),不管是margin-top/margin-bottom还是margin-left/margin-right. ...
- css的框模型速查
在css中,每个元素被视为一个框. 每个框具有3个属性: border 框的边框 margin 框与相邻框之间的距离 padding 框内容和边框之间的距离 对于margin存在一种特例:当元素底部页 ...
- CSS百分比padding实现比例固定图片自适应布局
一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...
- css padding 填充
语法: padding:[ <length> | <percentage> ]{1,4} 默认值:看每个独立属性 适用于:所有元素,除 table-row-group | ta ...
- Padding Borders Outlines Margins
简介: 在20世纪90年代,许多网页布局是使用table,使用table最主要的原因是因为可以放text到一个盒子里,但是这是一个比较复杂的过程,现在可以使用比较简单的方法,那就是css. 元素盒子: ...
- CSS——【元素内边距padding、元素外边距margin、元素边框border-width、元素大小width/height】与【元素显示大小】的关系
一.基本知识 padding:元素内边距,指的是元素内边框到元素中内容的距离. 用法: padding:长度|百分比 padding-top:长度|百分比 padding-bottom:长度|百分比 ...
- css笔记 - 张鑫旭css课程笔记之 padding 篇
[padding地址](https://www.imooc.com/learn/710) 一.padding与容器尺寸之间的关系 padding会影响元素的尺寸(通常情况下是通过增加/挤压内容区域) ...
- 浅谈padding
浅谈padding padding是CSS盒子模型的一部分,代表盒子模型的内边距. 用法 padding属性有四个值,分别代表上.右.下.左的内边距. .box { padding: 10px 5px ...
随机推荐
- Javascript和jquery事件--鼠标移动事件mousemove
mousemove,一个监听元素上鼠标移动的事件,如果鼠标在元素上移动,大概每16毫秒触发一次.我觉得挺有趣的一个元素,不过有替代还是不太推荐,从这个事件的触发频率就可以看出它会拖慢响应速度,消耗资源 ...
- vue 图片lazyload
今天看到我一醉哥的一篇朋友圈分享:<不如我们从头来过 | 掘金> 看完之后,百感交集,互联网的浪潮使创业公司如雨后春笋般崛起, 每一个初创公司都会有一群怀着美好愿景的小伙伴, 但是当寒冬来 ...
- 在react底下安装环境
1.在react底下安装环境 Image.png Image.png 2.新建一个文件夹 Image.png 3.配置入口文件redux:staticRoot+'/redux/app' Image.p ...
- php课程 9-33 php文件操作里面的注意事项有哪些
php课程 9-33 php文件操作里面的注意事项有哪些 一.总结 一句话总结:文件操作其实很简单,就是几个文件操作函数需要记一下. 1.文件函数如何使用(如何找php文件函数的资料)? 查看参考手册 ...
- 使用 JS 关闭警告框及监听自定义事件（amaze ui）
使用 JS 关闭警告框及监听自定义事件(amaze ui) 一.总结 1.jquery匿名函数:第8行,jquery匿名函数,$(function(){});,有没有很简单,只是少了jquery的前面 ...
- Windows中DLL文件的意义及其作用
Windows中DLL文件的意义及其作用 DLL是Dynamic Link Library的缩写,意为动态链接库.DLL文件即动态链接库文件,是一种可执行文件,它允许程序共享执行特殊任务所必需的代码和 ...
- FragmentPagerAdapter和FragmentStatePagerAdapter的差别
ViewPager同意用户通过左右滑动显示不同页面的数据.而这些页面须要PagerAdapter管理. 经常使用的有FragmentPagerAdapter和FragmentStatePagerAda ...
- 七步从AngularJS菜鸟到专家（7）：Routing
这是＂AngularJS – 七步从菜鸟到专家＂系列的第七篇. 在第一篇,我们展示了如何開始搭建一个AngularaJS应用.在第四.五篇我们讨论了Angular内建的directives.上一篇了解 ...
- VS2010下配置Opencv2.4.3 .
VS2008下OpenCV的配置过程在OpenCV论坛上写的很详细,具体过程可以见如下链接http://www.opencv.org.cn/index.php/VC_2008_Express%E4%B ...
- 快速杀死占用8080端口进程的批处理（kill-8080.bat）
@echo off setlocal enabledelayedexpansion for /f "delims= tokens=1" %%i in ('netstat -aon ...