关于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 ...
随机推荐
- ClickHouse源码笔记4:FilterBlockInputStream, 探寻where，having的实现
书接上文,本篇继续分享ClickHouse源码中一个重要的流,FilterBlockInputStream的实现,重点在于分析Clickhouse是如何在执行引擎实现向量化的Filter操作符,而利用 ...
- MySQL：基本操作与常用函数
基本操作 这里的基本操作为添加.修改.删除数据表中的记录. INSERT语句 -- 通用INSERT: INSERT INTO 表名 (字段1, 字段2, ...) VALUES (值1, 值2, . ...
- Java 哈希表（google 公司的上机题）
1 哈希表(散列)-Google 上机题 1) 看一个实际需求,google 公司的一个上机题: 2) 有一个公司,当有新的员工来报道时,要求将该员工的信息加入(id,性别,年龄,住址..),当输入该 ...
- 打造综合性智慧城市之朔州开发区 3D 可视化
前言 近几年,我国智慧城市建设步伐也不断加快,党中央和国务院也更加注重智慧园区的建设与发展,智慧园区建设与园区产业发展相结合,向着创新化.生态化发展,更加注重高新技术.绿色环保型等产业的发展,将管 ...
- MAC (Message Authentication Code，消息认证码算法）
需要将密钥发送到对方,对方用该密钥进行摘要处理,进行摘要验证. //初始化KeyGenerator KeyGenerator keyGenerator= KeyGenerator.getInstanc ...
- Codeforces Round #575 (Div. 3) D2. RGB Substring (hard version) 【递推】
一.题目 D2. RGB Substring (hard version) 二.分析 思路一开始就想的对的,但是,用memset给数组初始化为0超时了!超时了! 然后我按照题解改了个vector初始化 ...
- python创建一个二维列表
方法一:利用for-in语句来生成一个二维列表 a = [] 2 for i in range(10): 3 a.append([]) 4 for j in range(10): 5 a[i].app ...
- DNA序列(JAVA语言)
package 第三章习题; /* * 输入m个长度均为n的DNA序列,求一个DNA序列,到所有序列的总Hamming距离尽量小. * 两个等长字符串的Hamming距离等于字符不同的位置个数, ...
- Tex中的引号(JAVA语言)
package 第三章; import java.util.Scanner; public class Tex中的引号 { public static void main(String[] args) ...
- Kubernetes 实战 —— 04. 副本机制和其他控制器：部署托管的 pod
保持 pod 健康 P84 只要 pod 调度到某个节点,该节点上的 Kubelet 就会运行 pod 的容器,从此只要该 pod 存在,就会保持运行.如果容器的主进程奔溃, Kubelet 就会自动 ...