关于width的继承和获取
absolute元素（如果没有设置width值），其宽度自适应于内部元素，
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body,
html {
margin: 0;
padding: 0
} .div1 {
width: 100%;
height: 300px;
background: red
} .div2 {
background: blue;
height: 200px;
position: absolute;
} .div3 {
width: 100px;
background: yellow;
height: 50px;
}
</style>
</head> <body>
<div class="div1">
<div class="div2">
<div class="div3"></div>
</div>
</div>
</body> </html>
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body,
html {
margin: 0;
padding: 0
} .div1 {
/* width: 100%; */
height: 300px;
background: red
} .div2 {
background: blue;
height: 200px
} .div3 {
width: 100px;
background: yellow;
height: 50px;
}
</style>
</head> <body>
<div class="div1">
<div class="div2">
<div class="div3"></div>
</div>
</div>
</body> </html>
如果最外层div 不给宽度，内层div不设置宽度，则宽度均为100%；
关于width的继承和获取的更多相关文章
- 获取屏幕宽高度与可视区域宽高度（availWidth、clientWidth、width、innerWidth）
经常会遇到需要获取屏幕宽度.高度,可视区域宽度.高度等问题,也就常跟这几个打交道,一不小心,还真爱弄混淆了. 先来列举下这几个吧: screen.availHeight.screen.availWid ...
- es5 温故而知新 简单继承示例
// 矩形(构造器/父类) function Rectangle (height, width) { this.height = height; this.width = width; } // 获取 ...
- jQuery源码06-jQuery = function(){};给JQ对象，添加一些方法和属性，extend : JQ的继承方法，jQuery.extend()
/*! * Includes Sizzle.js 选择器,独立的库 * http://sizzlejs.com/ */ (function( window, undefined ) { //" ...
- getStyle(obj, attr)兼容获取css
设置元素(element)的css属性值可以用element的style属性,dom.style.attr 这样或取得到的值大多数是undefined:何解? dom.style.attr 是用来 ...
- 【java基础】面向对象的三大基本特征之-------继承
面向对象的三大特征:封装,继承,多态 java通过extends关键字来实现继承,而且是单继承,一个子类只可以有一个直接父类,但是父类还可以有父类... java.long.Object是所有类的父类 ...
- jquery 获取元素在浏览器中的绝对位置
代码详解 1,获取对象(自定义调整打开新窗口参照元素) var obj = $("#oButton"); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调 ...
- jquery 获取鼠标和元素的坐标点
获取当前鼠标相对img元素的坐标 $('img').mousemove(function(e) { varpositionX=e.pageX-$(this).offset().left; //获取当前 ...
- js继承《转》
http://www.jb51.net/article/55540.htm http://www.cnblogs.com/OceanHeaven/p/4965947.html http://www.j ...
- [转] easyui 获取数据表格中选中行的数据 Get selected row data from...
原文地址:http://my.oschina.net/meSpace/blog/41463 http://www.easyui.net/2010/06/easyui-tutorial-get-sele ...
随机推荐
- 清华大学-成绩排序（排序+解决MLE问题）
成绩排序 成绩排序 这里需要注意的就是超内存的问题. 解决方法就是通过指针的方式,每次动态开n大小的内存,而不是一开始就分配. #include<bits/stdc++.h> using ...
- 1.2 Python3基础-规范
>>返回主目录 总的来说,如果安装的不是安装的Anaconda,pip命令还是经常会用到的(cmd模式使用),当然也可以在PyCharm中直接安装 PEP8规范,我另有一篇博客已经写好,可 ...
- CSS基础 和 font字体、背景属性连写 与 清除浮动方法
1.伪类 1. :link 2. :visited 3. :hover(重要) 4. :active 5. :focus(input标签获取光标焦点) 2.伪元素 1.:first-letter 2. ...
- GTID介绍
从MySQL5.6开始增加GTID这个特性,Global Transaction ID,全局事务ID,用来强化主从数据库的一致性,故障恢复,以及容错能力,来替代传统的人工的主从复制: 有了GTID,在 ...
- mongodb为什么比mysql效率高
首先是内存映射机制,数据不是持久化到存储设备中的,而是暂时存储在内存中,这就提高了在IO上效率以及操作系统对存储介质之间的性能损耗.(毕竟内存读取最快) 其次,NoSQL并不是不使用sql,只是不使用 ...
- python 画图中文显示问题
在python文件当前目录下添加simsun.ttc(资源网上下载即可,有很多) 代码如下: plt.title("标题", fontproperties='SimHei', si ...
- 最新版Swagger 3升级指南和新功能体验！
Swagger 3.0 发布已经有一段时间了,它于 2020.7 月 发布,但目前市面上使用的主流版本还是 Swagger 2.X 版本和少量的 1.X 版本,然而作为一名合格的程序员怎么能不折腾新技 ...
- 在C#中使用 CancellationToken 处理异步任务
在 .NET Core 中使用异步编程已经很普遍了, 你在项目中随处可见 async 和 await,它简化了异步操作,允许开发人员,使用同步的方式编写异步代码,你会发现在大部分的异步方法中,都提供了 ...
- 数据库SQL查询作业
--设有三个关系 --S(S#,SNAME,AGE,SEX) --SC(S#,C#,GRADE) --C(C#,CNAME,TEACHER) --(1)检索LIU老师所授课程的课程号.课程名 sele ...
- 让你的程序炫起来！少有人知道但超酷的 Python 进度条开源库
本文适合有 Python 基础的朋友 本文作者:HelloGitHub-Anthony HelloGitHub 推出的<讲解开源项目>系列,本期介绍让你快速拥有完美进度条的 Python ...