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

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

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

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

思路：给减少每个元素的宽高，加给padding。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.      .first {
  10.          width: 500px;height: 500px;background-color: red;padding: 50px;
  11.      }
  12.      .second {
  13.          width: 400px;height: 400px;background-color: orange;padding: 50px;
  14.      }
  15.      .third {
  16.          width: 300px;height: 300px;background-color: yellow;padding: 50px;
  17.      }
  18.      .forth {
  19.          width: 200px;height: 200px;background-color: green;padding: 50px;
  20.      }
  21.      .fifth {
  22.          width: 100px;height: 100px;background-color: blue;padding: 50px;
  23.      }
  24.      .center {
  25.          width:;height:;background-color: purple;padding: 50px;
  26.      }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="first">
  31.         <div class="second">
  32.             <div class="third">
  33.                 <div class="forth">
  34.                     <div class="fifth">
  35.                         <div class="center"></div>
  36.                     </div>
  37.                 </div>
  38.             </div>
  39.         </div>
  40.     </div>
  41. </body>
  42. </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. django1.11启动错误

    错误信息: 复制代码 Unhandled exception in thread started by <function check_errors..wrapper at 0x10f03b8c ...

  2. python 切片索引

  3. oralce默认语言

    默认语言设置可以确定数据库如何支持与区域设置相关的信息,例如: 日和月份的名称及其缩写 A.M..P.M..A.D. 和 B.C. 的等价表示方法的符号 指定 ORDER BY SQL 子句时字符数据 ...

  4. css 不大常见的属性(不断更新中...)

    1 英语或数字强制换行 word-break:break-all; 2 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果 -webkit-overflow-scroll ...

  5. PHPCMS快速建站系列之网站迁移（本地到服务器，服务器迁移，更换域名等）

    可能出现的问题: 1.后台登录验证码显示不正常(修改/caches/configs/system.php文件) //网站路径'web_path' => '/', 2.phpsso修改 如果不修改 ...

  6. 【JZOJ4840】【NOIP2016提高A组集训第4场11.1】小W砍大树

    题目描述 数据范围 解法 模拟. 代码 #include<stdio.h> #include<algorithm> #include<string.h> #incl ...

  7. Python 3.x版本中的字符串

  8. OSS跨同城3AZ重磅发布，构造全面数据保护体系

    点击订阅新品发布会! 新产品.新版本.新技术.新功能.价格调整,评论在下方,下期更新!关注更多内容,了解更多 最新发布 OSS跨同城3AZ重磅发布 2019年7月3日15时,OSS跨同城3AZ重磅发布 ...

  9. aspcms安装所遇到的问题

     aspcms标签:http://biaoqian.iasp.com.cn/ 1.报错:An error occurred on the server when processing the URL. ...

  10. 上传图片如何对图片进行压缩canvas

    前言:哈喽,朋友们,最近一直在马不停蹄地赶项目,很久没有写博客了.今天我们来看一下前端上传图片地时候如何对图片进行压缩 1.图片上传 我近期写项目都是使用的VUE,这里上传图片使用了Element-u ...