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

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

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

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

此处给div的父级加个border就好了

<!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: 600px;height: 600px;

        background-color: red;

        border: 1px dashed black;

    }

    .second {

        width: 500px;height: 500px;

        background-color: orange;

        margin: 50px;

        /* 使second box在first box上居中显示，first设置了边框所以margin不会合并*/

        border: 1px solid orange;

    }

    .third {

        width: 400px;height: 400px;

        background-color: yellow;

        /* 此时third和second如果设置margin-top会合并 */

        border: 1px solid yellow;

        margin: 48px;

        /* 加border就可以使margin-top恢复作用 */

        /* 垂直关系视图布局 直接父级元素提供位置的参考 */

    }

    .forth {

        width: 300px;height: 300px;

        background-color: green;

        border: 1px solid green;

        margin: 48px;

    }

    .fifth {

        width: 200px;height: 200px;

        background-color: lightblue;

        border: 1px solid lightblue;

        margin: 48px;

    }

    .center {

        width: 100px;height: 100px;

        background-color: purple;

        margin: 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实现多个方块居中嵌套--margin的更多相关文章

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

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

  2. word标题文字居中浅谈

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

  3. 正确的使用margin:0 auto与body{text-align:center;}实现元素居中（转）

    body{text-align:center}与margin:0 auto的异同? text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...

  4. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  5. 小 div在大 div中左右上下居中

    <!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content=& ...

  6. html+css--水平居中总结（不定宽块状元素方法）（一）

    来源:http://www.imooc.com/code/6363 在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度 ...

  7. 常用布局，div竖直居中

    常用两列布局,多列布局和div竖直居中 body { margin:; padding:; } .w200 { width: 200px; } .mar-left200 { margin-left: ...

  8. CSS中的各种居中方法总结

    CSS中的居中可分为水平居中和垂直居中.水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中.下面详细介绍这几种情况. 一.水平居中 1.行内元素居中 ...

  9. 设置div控件居中的方法

    margin是设置外边距的,它有四个值,margin:4px 5px 5px 5px;分别表示上边距,右边距,下边距,和左边距,是从上按顺时针设置的,如果单个设置,他又有margin-top:3px: ...

随机推荐

  1. 微信小程序之上拉加载更多

    loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流 ...

  2. mac pro 1.5T内存是如何实现的

    苹果发布全新Mac Pro:28核1.5T内存 预计售价10万+ 看到这样的新闻标题是不是很震撼,甚至怀疑人生,64位机怎么就可以1.5T内存了,自己的系统盘都没那么大 而且我们知道windows下的 ...

  3. PrintStream 类

    5.PrintStream类(重点) (1)基本概念 java.io.PrintStream类用于打印各种数据内容.   (2)常用的方法 PrintStream(OutputStream out) ...

  4. PHP生成短连接的方法

    PHP生成短连接的方法.md PHP生成短连接的方法 直接贴上方法,函数可以查看手册. <?php /** 生成短网址 * @param String $url 原网址 * @return St ...

  5. ubuntu下C操作Mysql数据库第一步

    学习于: http://armsword.com/2013/06/20/ubuntu-c-mysql.html

  6. C++:static类

    static自我理解 static使得数据成员或者函数生命周期为整个文件所在程序的生命周期, 在C中还可以用它避免被其它文件使用为外部成员 static类 明确:类的静态数据成员它被所有类对象共享,但 ...

  7. cocos2dX 之CCAnimation/CCAnimate

    我们今天来学习cocos2dX里面的动画的制作, 有人说, 不是前面CCAction已经学过了吗? 怎么还要学, CCAction是动作, 而我们今天要学的是动画哦, 是让一个东西动起来哦, 好了进入 ...

  8. Directx11教程(58) 鼠标控制摄像机

    原文:Directx11教程(58) 鼠标控制摄像机        本篇教程我们实现鼠标旋转摄像机的操作.主要就是按下鼠标左键的时候,根据鼠标的移动对摄像机进行pitch, raw的组合旋转.具体修改 ...

  9. Python学习之路15☞socket编程

    一 客户端/服务器架构 即C/S架构,包括 1.硬件C/S架构(打印机) 2.软件C/S架构(web服务) C/S架构与socket的关系: 我们学习socket就是为了完成C/S架构的开发 二 os ...

  10. Python学习之路1☞简介及入门代码

    在学习之前,首先了解一下python的前世今生 一.python简介与发展: python 是一种面向对象的解释性计算机程序设计语言. python由荷兰人Guido van Rossum 于1989 ...