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的继承和获取的更多相关文章
	

    
								
  1. 获取屏幕宽高度与可视区域宽高度（availWidth、clientWidth、width、innerWidth）
		
    经常会遇到需要获取屏幕宽度.高度,可视区域宽度.高度等问题,也就常跟这几个打交道,一不小心,还真爱弄混淆了. 先来列举下这几个吧: screen.availHeight.screen.availWid ...
    
		
    2. 
						
  2. es5 温故而知新 简单继承示例
		
    // 矩形(构造器/父类) function Rectangle (height, width) { this.height = height; this.width = width; } // 获取 ...
    
		
    3. 
						
  3. jQuery源码06-jQuery = function(){};给JQ对象，添加一些方法和属性，extend : JQ的继承方法，jQuery.extend()
		
    /*! * Includes Sizzle.js 选择器,独立的库 * http://sizzlejs.com/ */ (function( window, undefined ) { //" ...
    
		
    4. 
						
  4. getStyle(obj, attr)兼容获取css
		
    设置元素(element)的css属性值可以用element的style属性,dom.style.attr  这样或取得到的值大多数是undefined:何解? dom.style.attr  是用来 ...
    
		
    5. 
						
  5. 【java基础】面向对象的三大基本特征之-------继承
		
    面向对象的三大特征:封装,继承,多态 java通过extends关键字来实现继承,而且是单继承,一个子类只可以有一个直接父类,但是父类还可以有父类... java.long.Object是所有类的父类 ...
    
		
    6. 
						
  6. jquery 获取元素在浏览器中的绝对位置
		
    代码详解 1,获取对象(自定义调整打开新窗口参照元素) var obj = $("#oButton"); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调 ...
    
		
    7. 
						
  7. jquery 获取鼠标和元素的坐标点
		
    获取当前鼠标相对img元素的坐标 $('img').mousemove(function(e) { varpositionX=e.pageX-$(this).offset().left; //获取当前 ...
    
		
    8. 
						
  8. js继承《转》
		
    http://www.jb51.net/article/55540.htm http://www.cnblogs.com/OceanHeaven/p/4965947.html http://www.j ...
    
		
    9. 
						
  9. [转]	easyui 获取数据表格中选中行的数据 Get selected row data from...
		
    原文地址:http://my.oschina.net/meSpace/blog/41463 http://www.easyui.net/2010/06/easyui-tutorial-get-sele ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 利用Visual Studio调试JavaScript脚本
			
    方法1: 方法2: 打开IE,按F12调试. 方法3: JS断电点debugger代替
    
			
    2. 
						
  2. CodeBlocks的安装配置以及使用教程
			
    CodeBlocks的安装配置以及使用教程 教程写的很啰嗦,本来几句话就能搞定的,但为了照顾到那部分真正的小白还请大家见谅! 一.下载 前往CodeBlocks官网下载带编译器的版本,目前的最新版本为 ...
    
			
    3. 
						
  3. 通过穷举法快速破解excel或word加密文档最高15位密码
			
    1.打开文件 2.工具 --- 宏 ---- 录制新宏 --- 输入名字如 :aa 3.停止录制 ( 这样得到一个空宏 ) 4.工具 --- 宏 ---- 宏 , 选 aa, 点编辑按钮 5.删除窗口 ...
    
			
    4. 
						
  4. 锁与同步器的基础--AQS
			
    什么是AQS AQS全名AbstractQueueSynchronizer,可以翻译为抽象队列同步器 Abstract--说明该类需要被继承,提供实现的框架和一些必要的功能 事实上,AQS也的确提供了 ...
    
			
    5. 
						
  5. Go语言学习笔记——Go语言的指针
			
    Go具有指针.指针保存了变量的内存地址. 类型*T是指向类型T的值得指针.其零值是nil var p *int &符号会生成一个指向其作用对象的指针 i:=42 P=&i *符号表示指 ...
    
			
    6. 
						
  6. 使用HTML、jquery、DOM创建文本
			
    <html> <head> <meta charset="utf-8"> <meta charset="utf-8"& ...
    
			
    7. 
						
  7. CMU15-455 Lab2 - task4 Concurrency Index -并发B+树索引算法的实现
			
    最近在做 CMU-15-445 Database System,lab2 是需要完成一个支持并发操作的B+树,最后一部分的 Task4 是完成并发的索引这里对这部分加锁的思路和完成做一个总结,关于 B ...
    
			
    8. 
						
  8. Linux入门视频笔记四（vim入门）
			
    一.vim的基本介绍(纯命令模式编辑器) 1.vim的两种模式:命令模式(不能输入任何东西).编辑模式(按i进入编辑模式) 2.ESC:从编辑模式退出到命令模式 3.保存: ①:wq code.c(如 ...
    
			
    9. 
						
  9. 巧用 SVG 滤镜还能制作表情包？
			
    本文将介绍一些使用 SVG feTurbulence 滤镜实现的一些有趣.大胆的的动效. 系列另外两篇: 有意思!强大的 SVG 滤镜 有意思!不规则边框的生成方案 背景 今天在群里面聊天,看到有人发 ...
    
			
    10. 
						
  10. Java学习之浅析高内聚低耦合
			
    •前言 如果你涉及软件开发,可能会经常听到 "高内聚,低耦合" 这种概念型词语. 可是,何为 "高内聚,低耦合" 呢? •概念 "高内聚,低耦合&qu ...
    
			
    11.