<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <title>无标题文档</title>

 <style type="text/css">

 <!--

 html,body{

 height:100%;

 }

 .box1 {

     background-color: #0000FF;

     height:100%;

     position:relative;

 }

 .box2 {

     background-color: #00FFFF;

     height:90%;

     width:90%;

     left:5%;

     top:5%;

     position:absolute;

 }

 .box3 {

     background-color: #FFFF00;

     height:20%;

     width:20%;

     right:5%;

     bottom:5%;

     position:absolute;

 }

 -->

 </style>

 </head>

 <body>

 <div class="box1">

   <div class="box2">

     <div class="box3"></div>

   </div>

 </div>

 </body>

 </html>

盒子尺寸父子传递及嵌套Demo的更多相关文章

  1. --@angularJS--较复杂的指令嵌套demo——综合小实例：登陆界面

    1.index.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title>c ...

  2. Css3盒子尺寸

    box-sizing属性 用来改变盒模式中的宽度和高度默认的计算方式. box-sizing: 1.content-box(默认值): 宽度和高度只包含内容区域 2.border-box: 宽度和高度 ...

  3. HTML盒子尺寸的计算

    参考链接http://edu.51cto.com/lesson/id-54739.html

  4. box-sizing 可以使border padding不影响设置的盒子尺寸

  5. ThreadLocal父子线程传递实现方案

    介绍InheritableThreadLocal之前,假设对 ThreadLocal 已经有了一定的理解,比如基本概念,原理,如果没有,可以参考:ThreadLocal源码分析解密.在讲解之前我们先列 ...

  6. 聊聊css盒子模型

    css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...

  7. 从零开始学 Web 之 CSS（三）链接伪类、背景、行高、盒子模型、浮动

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  8. CSS盒子模型之CSS3可伸缩框属性（Flexible Box）

    CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

  9. CSS的盒子模型（Box Model）

    盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此. 然而,任何美好的事物都有缺憾,盒 ...

随机推荐

  1. Python多线程的运行及time.sleep()的应用

    已知小明和其弟弟小白每月都需要生活费,二人同时从同一个账户中取钱,两人每人每月需要1000元,账户中现有余额3200元,如果卡内余额大于2000元,则父母不会存入,如果卡内余额小于2000元,则父母当 ...

  2. pycharm 的配置

    装好了pycharm之后 一.新建项目:(两个接口) 或 出现下图便创建成功: 二.配置本地项目编译器:(每个项目都要配一次) 出现下图就配置成功了: 三.pycharm + linux 远程开发(此 ...

  3. 用递归方法求n阶勒让德多项式的值

    /* Date: 07/03/19 15:40 Description: 用递归法求n阶勒让德多项式的值      { 1  n=0    Pn(x)= { x  n=1      { ((2n-1) ...

  4. 零基础学习python（2）

    再讲新知识之前,先将一些之前没提的东西再介绍一下: (1) 命令行模式 在Windows开始菜单选择“命令提示符”(或者是在搜索栏中输入“cmd”),就进入到命令行模式,它的提示符类似C:\>: ...

  5. ViewpageWebview

    import android.content.Intent;import android.support.v7.app.AppCompatActivity;import android.os.Bund ...

  6. Maven配置pom.xml，正在下载时网络不佳下载失败的解决方案

    环境:jdk1.7.0_17,Myeclipse 10,apache-maven-3.2.5 配置项目中pom.xml的dependencies时 ,如果本地仓库没有的话,就会自动下载.找不到仓库位置 ...

  7. Python之面向对象和正则表达（代数运算和自动更正）

    面向对象 一.概念解释 面对对象编程(OOP:object oriented programming):是一种程序设计范型,同时也是一种程序开发的方法,实现OOP的程序希望能够在程序中包含各种独立而又 ...

  8. 学习笔记TF066:TensorFlow移动端应用，iOS、Android系统实践

    TensorFlow对Android.iOS.树莓派都提供移动端支持. 移动端应用原理.移动端.嵌入式设备应用深度学习方式,一模型运行在云端服务器,向服务器发送请求,接收服务器响应:二在本地运行模型, ...

  9. XSS学习(二)

    尝试操作Cookie 创建一个cookie,需要提供cookie的名字,值,过期时间和相关路径等 <?php setcookie('user_id',123); ?> 它的作用是创建一个c ...

  10. MyCP课下作业

    任务详情 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt XXX2.bin 用来把文本文件(内容为 ...