文章地址 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. 使用Redis管道提升性能

    首发于 樊浩柏科学院 Redis 的 管道 (pipelining)是用来打包多条无关命令批量执行,以减少多个命令分别执行带来的网络交互时间.在一些批量操作数据的场景,使用管道可以显著提升 Redis ...

  2. 【JZOJ3853】【NOIP2014八校联考第2场第2试9.28】帮助Bsny(help)

    EVRT Bsny的书架乱成一团了,帮他一下吧! 他的书架上一共有n本书,我们定义混乱值是连续相同高度书本的段数.例如,如果书的高度是30,30,31,31,32,那么混乱值为3:30,32,32,3 ...

  3. koa2路由

    注意:必须导出 文档地址:https://npm.taobao.org/package/koa-router 例: const router = require('koa-router')() rou ...

  4. nginx简介 （转）

    1.Nginx概述 2.Nginx安装与控制指令 3.Nginx如何工作 4.Nginx配置实例 4.1如何配置Linux下Nginx 4.1.1配置Nginx代理HTTP请求到Tomcat 4.1. ...

  5. postman常用公共函数

    常用公共函数: 1).判断是否超时(assertNotTimeout):var hasResponse=postman.getResponseHeader('Content-Type')?true:f ...

  6. 【风马一族_mysql】mysql基本指令

    船停在港湾是很安全的,但那不是造船的目的! 用户 创建用户 mysql>grant 权限(select,insert,update,delete) on  数据库.数据表  to  用户名@电脑 ...

  7. 网络流24题 餐巾计划（DCOJ8008）

    题目描述 一个餐厅在相继的 n nn 天里,每天需用的餐巾数不尽相同.假设第 i ii 天需要 ri r_ir​i​​ 块餐巾.餐厅可以购买新的餐巾,每块餐巾的费用为 P PP 分:或者把旧餐巾送到快 ...

  8. Linux使用注意事项

    1.Linux严格区分大小写 2.Linux中所有内容以文件形式保存,包括硬件 3.修改任何设置,若想永久生效,都需要修改配置文件(除非某些发现版已经默认设置为同时修改内存和硬盘数据). 4.Linu ...

  9. (一)流--IO框架

    介绍: IO(Input/Output)是计算机输入/输出的接口.java的核心库java.io提供了全方面的IO接口,包括:文件系统的操作,文件读写,标准设备输出等等 File  文件和目录类 In ...

  10. 【时光回溯】【JZOJ3568】【GDKOI2014】小纪的作业题

    题目描述 输入 输出 有M行,每个询问一行,输出结果mod 1,000,000,007的值. 样例输入 10 3 3 5 1 2 3 1 3 5 2 1 7 9 3 9 2 3 样例输出 10 19 ...