<!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. EM 算法最好的解释

    https://wenku.baidu.com/view/fcb6a52bf5335a8102d220e3.html

  2. svg常见形状

    SVG是使用XML来描述二维图形和绘图程序的语言.是指可伸缩矢量图形(Scalable Vector Graphics),svg.图像在放大或改变尺寸的情况下图形质量不会有所损失. svg的主要竞争者 ...

  3. register form code(2nd week blog)

    register form code(2nd week blog) 注册 用户名: 密码: 确认密码: 邮箱: 电话:     性别: 男 女

  4. 小妖精的完美游戏教室——人工智能，A*算法，启发因子篇

    //================================================================//// Copyright (C) 2017 Team Saluk ...

  5. web框架---django

    15:31:14一.web框架1.框架:即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演. ...

  6. [R] 繪圖 Par 函数

    本篇內文主引用 https://zhuanlan.zhihu.com/p/21394945 之內容再稍加整理並參照下方有用資源 [rdocumentation] https://www.rdocume ...

  7. composer.json

    {    "require": {        "doctrine/doctrine-orm-module": "0.*",        ...

  8. Vue面试中经常会被问到的面试题

    一.对于MVVM的理解 MVVM是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. View代表UI组件,它负责将数据模 ...

  9. 左耳听风-ARTS-第1周

    Algorithm https://leetcode.com/problems/longest-common-prefix/ class Solution { public String longes ...

  10. sql server数据库入门

    create database 学生信息 on primary  //建立在主文件文件组 ( name='学生信息_data', filename='D:\2011上半年度\数据库\sql代码\xue ...