关于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 ...
随机推荐
- 后端程序员之路 52、A Tour of Go-2
# flowcontrol - for - for i := 0; i < 10; i++ { - for ; sum < 1000; { ...
- 敏捷史话（八）：敏捷的破局之道——Martin Fowler
在 Martin Fowler 的世界里,任何事情都有最优解. 1963年,Martin 出生于英格兰的沃尔索尔(Walsall),也在同样位于沃尔索尔的玛丽女王文法学校中接受中等教育.在这里的乡村中 ...
- WNN48T6X 54端口国产化万兆交换机
WNN48T6X是基于盛科CTC5160设计的国产化三层万兆交换机,提供48路千兆电口和6路万兆光口,采用龙芯 2K1000处理器,支持双冗余可插拔电源供电.支持常规的L2/L3协议,支持Telnet ...
- httpd解析PHP
1.vim /usr/local/apache2.4/conf/httpd.conf 编辑httpd的主配置文件 搜索ServerName,把ServerName www.example.com:80 ...
- NoSQL安装与操作
redis操作: redis的启动与关闭:注意:(需要关闭防火墙) redis的启动:redis-server redis.conf redis的登录:redis-cli -a pass redis的 ...
- P2055 [ZJOI2009]假期的宿舍 题解（二分图）
题目链接 P2055 [ZJOI2009]假期的宿舍 解题思路 因为懒,提供一种不连边,直接根据题目给出的邻接矩阵进行匈牙利算法的思路. \(a[i][j]\)表示\(i\)能不能睡\(j\)的床,需 ...
- SpringMVC源码分析和启动流程
https://yq.aliyun.com/articles/707995 在Spring的web容器启动时会去读取web.xml文件,相关启动顺序为:<context-param> -- ...
- POJ_2752 Seek the Name, Seek the Fame 【KMP】
一.题目 POJ2752 二.分析 比较明显的KMP运用. 但是这题不是只找一个,仔细看题后可以发现相当于是在找到最大的满足条件的后缀后,再在这个后缀里面找满足条件的后缀. 可以不断的运用KMP得出答 ...
- P1149_火柴棒等式（JAVA语言）
题目描述 给你n根火柴棍,你可以拼出多少个形如"A+B=C"的等式?等式中的A.B.C是用火柴棍拼出的整数(若该数非零,则最高位不能是0).用火柴棍拼数字0-90−9的拼法如图所示 ...
- 得分(JAVA语言)
package 第三章习题; /* * 给出一个由O和X组成的串(长度为1~80),统计得分. * 每个O得分为目前连续出现的O的个数,X得分为0. * 例如,OOXXOXXOOO的得分为 * ...