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

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

  2. AudioToolbox.framework框架学习

    http://quding0308.iteye.com/blog/1596710 AudioFile AudioFileStream类 提供了一个接口,用来解析一个流音频文件. //创建一个new s ...

  3. phpcms 按价格、按销量、按时间等排序实现思路

    大体思路是在链接中加入指定排序的参数,例如我们使用get中的order作为排序参数: order=views 人气:order=sells 效率:order=pirce 按价格: 那么这三个排序按钮的 ...

  4. 苹果建议开发者在iOS 7正式发布之前把应用提交至App Store

    今早在给开发者的邮件中,苹果建议开发者在下周9月18日正式发布iOS 7之前把应用提交至App Store.邮件特别提到了iOS 7的新功能,还提到了充分利用iPhone 5S功能的新API,比如M7 ...

  5. 总结 ESP8266 RTOS 开发环境搭建

    总结 ESP8266 RTOS 开发环境搭建 仔细看官方文档. 必须一步一步操作. 不要想当然,以为 make 就可以. 忽略编译警告,除非是错误. 工具链必须使用官方提供的. 多看看 Issues ...

  6. [ 浙江大学 数据库系统原理 ] [ MiniSQL ]课程设计

    工作流程图如下.代码详见https://github.com/gstggsstt/minisql. 注:课程设计时间紧迫,编码基本没有性能考虑,仅限于实现功能,索引未使用B+tree.

  7. OpenJudge_1936:All in All

    描述 You have devised a new encryption technique which encodes a message by inserting between its char ...

  8. CSS Specificity

    CSS的specificity特性或称非凡性,它是一个衡量CSS值优先级的一个标准. 其实就是解决冲突,当同一个元素被CSS选择符选中,按照优先权取舍不同的CSS规则. specificity用一个四 ...

  9. inflate用一个XML源填充view. LayoutInflater

    java.lang.Object     android.view.LayoutInflater This class is used to instantiate layout XML file i ...

  10. 微信小程序记录

    1.vs code 可以安装 Vetur-wepy 对代码高亮的提示. 2.取消swiper组件的手动滑动效果 在 swiper-item 中添加 catchtouchmove='catchTouch ...