文章地址 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. 导入pymysql模块出错：No module named 'pymysql'

    前提: 使用的版本为:Python 3.6.4 pymysql已经被成功安装了,并通过命令行的方式验证已成功安装. 但在pycharm中运行工程时候时候报错:No module named 'pymy ...

  2. 杨柳絮-Info：菏泽多措并举治理杨柳絮 5年内实现“有絮不成灾”

    ylbtech-杨柳絮-Info:菏泽多措并举治理杨柳絮 5年内实现“有絮不成灾” 1.返回顶部 1. 菏泽多措并举治理杨柳絮 5年内实现“有絮不成灾” 2019年04月09日 11:44  来源:大 ...

  3. php 简单加密解密

    <?php namespace App\Service; /* * @link http://kodcloud.com/ * @author warlee | e-mail:kodcloud@q ...

  4. idea启动报错：Access denied for user 'root '@'192.168.100.XXX' (using password: YES)

    Caused by: org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean wit ...

  5. DirectX11笔记(九)--Direct3D渲染5--CONSTANT BUFFERS

    原文:DirectX11笔记(九)--Direct3D渲染5--CONSTANT BUFFERS 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u0 ...

  6. vue自定义全局公共函数

    单独零散的函数 在main.js里进行全局注册 Vue.prototype.ajax = function (){} 在所有组件里可调用 this.ajax() 多个函数定义在一个对象里 // xx. ...

  7. List分页

    listObj.Skip((pagecount-1)*pagesize).Take(pagesize) 假设你每页10条数据当前是第3页 跳到第4页则:listObj.Skip((4-1)*10).T ...

  8. js表格上下移动添加删除

    html部分 <div onclick='fn()'>加</div> <table width="250" border="1" ...

  9. Oracle使用——impdp导入数据时数据表已经存在

    背景 在做数据迁移时,需要将不同地方的dmp文件整合到一个数据库中,在导入时,目标表已经存在,该如何把数据追加进入目标表中 方法介绍 当使用IMPDP完成数据库导入时,如遇到表已存在时,Oracle提 ...

  10. 【JZOJ4848】【GDOI2017模拟11.3】永恒的契约

    题目描述 宅邸迅速的燃烧着,必须带贝蒂走出禁书库!凭着感觉,又一次直接找到禁书库的门. "你,是那个人嘛?"400年了,当初圣域建立结界时没有进入圣域,被伤了心的人工精灵贝蒂,与强 ...