文章地址 https://www.cnblogs.com/sandraryan/

案例：用diiv嵌套多个正方形，配合盒模型相关知识，使每个div在他的父元素上居中。（每个div中心点对齐）

涉及到margin的各种合并问题。

（触发BFC是更好的解决方案等，为做练习此处只考虑padding）

思路：给减少每个元素的宽高，加给padding。

<!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 type="text/css">

     .first {

         width: 500px;height: 500px;background-color: red;padding: 50px;

     }

     .second {

         width: 400px;height: 400px;background-color: orange;padding: 50px;

     }

     .third {

         width: 300px;height: 300px;background-color: yellow;padding: 50px;

     }

     .forth {

         width: 200px;height: 200px;background-color: green;padding: 50px;

     }

     .fifth {

         width: 100px;height: 100px;background-color: blue;padding: 50px;

     }

     .center {

         width:;height:;background-color: purple;padding: 50px;

     }

    </style>

</head>

<body>

    <div class="first">

        <div class="second">

            <div class="third">

                <div class="forth">

                    <div class="fifth">

                        <div class="center"></div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

用diiv实现多个方块居中嵌套--padding的更多相关文章

  1. 用diiv实现多个方块居中嵌套--margin

    文章地址 https://www.cnblogs.com/sandraryan/ 案例:用diiv嵌套多个正方形,配合盒模型相关知识,使每个div在他的父元素上居中.(每个div中心点对齐) 涉及到m ...

  2. word标题文字居中浅谈

    在Word排版时,要将标题在文档居中,是有区别的,如下图 在回车键后,在选择标题居中,我们常认为标题就是在整个文档居中了,但是实际上只是在回车键到右边区域居中而已,如上图红色方块居中. 只有在标题文字 ...

  3. 浅谈position、table-cell、flex-box三种垂直（水平）居中技巧

    一.首先是喜闻乐见的position方法,经典且万能,用法如下: 父元素{ position:relative; } 子元素{ position:absolute; top:50%; left:50% ...

  4. React Native 开发之 (05) flexbox布局

    一  flexbox布局 1 flex布局 flexbox是ReactNative 应用开发中必不可少的内容,也是最常用的内容. 传统的页面布局是基于盒子模型,依赖定位属性,流动属性和显示属性来解决. ...

  5. The Same Game": A Simple Game from Start to Finish3

    视图: 画出你的游戏界面 前面,我们的文档对象中已经初始化了游戏板对象,接下来我们需要显示这些信息给用户了. 第一步是添加代码,来重新设置我们的窗口尺寸.缺省的窗口尺寸不是我们想要的,我们将重写OnI ...

  6. style里的文字 背景 样式以及边框

    <style>        body{background:#FCC;}        .c00 div{ margin:0 auto; padding:0;}        #a01{ ...

  7. HTML/CSS 知识点

    整个前端开发的工作流程 产品经理提出项目需求 UI出设计稿 前端人员负责开发静态页面(跟前端同步的后台人员在准备数据) 前后台的交互 测试 产品上线(后期项目维护) 互联网原理 当用户在浏览器输入网址 ...

  8. echarts配置项说明//持续添加

    <template> <div>      <!-- <h2>本月抄表完成率</h2> --> <!-- <div id=&qu ...

  9. ie8中遇到的兼容问题以及解决方案

    一.CSS3 1.可以通过在css中引入pie.htc,处理兼容问题(可处理的属性) -webkit-box-shadow: 0 1px 5px #ff2826; -webkit-border-rad ...

随机推荐

  1. 全球城市群Megalopolis

    Megalopolis From Wikipedia, the free encyclopedia   (Redirected from Megalopolis (city type))   &quo ...

  2. Sublime Text编辑器运行Python程序控制台输入

    将文件保存为 .py后,安装插件: 1)按ctrl+shift+p快捷键呼出一个输入框,输入Install Package,回车,在新出现的输入框里输入“SublimeREPL”并安装. 2)点击To ...

  3. 基于spring-boot的测试桩设计--几种常见的controller

    第一种:通过@RequestBody,直接将请求体映射到对象 //@RequestBody @RequestMapping(value = "addUser", method = ...

  4. node.js（二）各种模块

    我们知道Node.js适合于IO密集型应用,不适合于CPU密集型应用.    JS和Node.js区别:         JS运行于客户端浏览器中,存在兼容性问题:数据类型:值类型+引用类型(ES+D ...

  5. 深入浅出Cocoa之消息【转】

    在入门级别的ObjC 教程中,我们常对从C++或Java 或其他面向对象语言转过来的程序员说,ObjC 中的方法调用(ObjC中的术语为消息)跟其他语言中的方法调用差不多,只是形式有些不同而已. 譬如 ...

  6. 【JZOJ4792】【NOIP2016提高A组模拟9.21】整除

    题目描述 麦克雷有一个1~n的排列,他想知道对于一些区间,有多少对区间内的数(x,y),满足x能被y整除. 输入 第一行包含2个正整数n,m.表示有n个数,m个询问. 接下来一行包含n个正整数,表示麦 ...

  7. js中的replace问题和textarea回车符问题

    在textarea中输入回车符 在js读取textarea中的值有\r\n然后到业务层转换到string中就有可能变成空格形式然后被存入数据库,当在取出此值的时候则会变成空格的形式,因此我们需要将不显 ...

  8. Directx11教程(6) 画一个简单的三角形(2)

    原文:Directx11教程(6) 画一个简单的三角形(2)      在上篇教程中,我们实现了在D3D11中画一个简单的三角形,但是,当我们改变窗口大小时候,三角形形状却随着窗口高宽比例改变而改变, ...

  9. oracle审计实施

    1.语句审计 Audit session;  Audit session By ; 与instance连接的每个会话生成一条审计记录.审计记录将在连接时期插入并且在断开连接时期进行更新. 保留有关会话 ...

  10. pl/sql基础知识—触发器

    n  触发器简单介绍 触发器是指隐含执行的存储过程,它不是由程序员或者是DBA来显式调用,而是因为某个操作引发执行的.当定义触发器时,必须要指定触法的事件和触发的操作,常用的触发事件包括insert, ...