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 ...
随机推荐
- Ext常用控件
多选下拉框 var workname = new Ext.form.MultiSelect({ store: pointComboBoxStore, fieldLabel: '工作面', labelS ...
- 中间件、服务器和Web服务器三者的区别
相信很多的Web安全初学者和我一样,对中间件和服务器的认识不够深刻,对两者的概念可能会有所混淆. 正好今天在学习的时候突然想到了这个问题,粗略百度了一下,似乎网上对这个问题的解释不多,那么就由我来为大 ...
- [spark]spark 编程教程
参考: 英文:https://spark.apache.org/docs/latest/programming-guide.html 中文:http://www.cnblogs.com/lujin ...
- 在sublime text 3中安装中文支持 分类： C_OHTERS 2015-04-24 22:04 229人阅读 评论(0) 收藏
1.安装package control 使用control+~打开终端,然后输入以下内容并确定: import urllib.request,os;pf='Package Control.subli ...
- eclipse调试鼠标放上去显示变量值
在eclipse中调试时,鼠标移动到变量上不显示值,这个原来自己也遇到过,没注意,反正就使用ctrl+shift+i嘛,也可以的,刚查了一下,解决方法如下: Window->Preference ...
- 为何在查询中索引未被使用 (Doc ID 1549181.1)
To Bottom * 为何在查询中索引未被使用 (Doc ID 1549181.1) To Bottom 文档内容 用途 排错步骤 高速检查 表上是否存在索引? 索引是否应该 ...
- mysql数据库 navicat premium mac 破解教程
https://www.jianshu.com/p/f3ef78deadaa 转自Navicat Premium for Mac v12.0.22.0 破解教程,macOS上手动破解,无需补丁,无毒 ...
- php 时间戳转为多少分钟前 小时前 天前
function mdate($time = NULL) { $text = ''; $time = $time === NULL || $time > time() ? time() : in ...
- vue项目build后font-awesome不显示问题
解决办法: 修改build目录下的utils.js:添加 publicPath: '../../' // Extract CSS when that option is specified // (w ...
- 【29.42%】【POJ 1182】食物链
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 64875 Accepted: 19085 Description 动物王国中有三 ...