文章地址 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. D2D画箭头的例子

    原文:D2D画箭头的例子 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/details/50830102 用处 ...

  2. Node环境变量 process.env 的那些事儿

    前言 这两天在和运维GG搞部署项目的事儿. 碰到一个问题就是,咱们的dev,uat,product环境的问题. 因为是前后端分离,所以在开发和部署的过程中会有对后端接口的域名的切换问题.折腾了一下午, ...

  3. vue移动端项目

    用vue mint-ui  jquery-weui写了一个移动端demo 技术栈 vue2.0 vue-router axios mint-ui jquery-weui webpack 页面截图 最后 ...

  4. SDUT-3402_数据结构实验之排序五：归并求逆序数

    数据结构实验之排序五:归并求逆序数 Time Limit: 50 ms Memory Limit: 65536 KiB Problem Description 对于数列a1,a2,a3-中的任意两个数 ...

  5. Leetcode905.Sort Array By Parity按奇偶排序数组

    给定一个非负整数数组 A,返回一个由 A 的所有偶数元素组成的数组,后面跟 A 的所有奇数元素. 你可以返回满足此条件的任何数组作为答案. 示例: 输入:[3,1,2,4] 输出:[2,4,3,1] ...

  6. 【水滴石穿】rnTest

    其实就是一个小的demo,不过代码分的挺精巧的 先放地址:https://github.com/linchengzzz/rnTest 来看看效果 确实没有什么可以说的,不过代码部分还行 先入口文件 / ...

  7. gitlab 添加本地项目

    1.安装git    https://git-scm.com/downloads 2.新建工程 3.创建密钥 a.桌面右键 b.cd ~/.ssh/ 如果提示 “ No such file or di ...

  8. 将centos 7 自带的 php 5.4升级为 5.6

    1.进入终端后查看php版本 php -v 输出可能如下: PHP 5.4.35 (cli) (built: Nov 14 2014 07:04:10) Copyright (c) 1997-2014 ...

  9. 【JZOJ4894】【NOIP2016提高A组集训第16场11.15】SJR的直线

    题目描述 数据范围 解法 考虑逐次加入每一条直线. 对于当前已加入的直线集合L,现在要新加入一条直线l. 那么它产生的贡献,与平行线有关. 对于任意三条直线,如果其中任意两条平行,那么将不做贡献. 所 ...

  10. Spring → 02：开发初步

    一.搭建开发环境 1.1.IDE的安装和配置 1.2.开发包的准备及开发包介绍 二.Hello World 2.1.Bean的编码 2.2.Spring配置文件编写 2.3.测试与运行 三.Sprin ...