用diiv实现多个方块居中嵌套--margin

案例：用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>

图片：

转载于:https://www.cnblogs.com/sandraryan/p/11095824.html

用diiv实现多个方块居中嵌套--margin相关推荐

外边距设置居中HTML,margin水平居中关于margin的居中问题
margin 水平居中 CSS #sm { margin-left: auto; margin-right: auto;} #sm ul,#sm li { float首先新建一个HTML文件,命名为t ...
元素布局之排排坐、对齐齐
元素布局之排排坐.对齐齐 HTML页面布局中,经常会碰到需要将一些标签元素排列对齐的情况,本篇文章就简单整理了元素水平居中和垂直居中的一些方法. 1.水平居中 1.1 块状元素居中站 margin:0 ...
word标题文字居中浅谈
在Word排版时,要将标题在文档居中,是有区别的,如下图在回车键后,在选择标题居中,我们常认为标题就是在整个文档居中了,但是实际上只是在回车键到右边区域居中而已,如上图红色方块居中. 只有在标题文字 ...
div居中与div内容居中,不一样
1.div自身居中使用margin:0 auto 上下为0,左右自适应的css样式. 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div ...
前端基础7：a标签常用方法和元素居中方式，响应式@media
a标签 a标签作用锚点语法:href="#+指定位置" a标签href属性的属性值为相应要跳转到的元素id属性名前加# <a href="#top"& ...
intouch负值显示0_17、定位的盒子居中显示
盒子居中显示 margin: 0 auto; 只能让标准流的盒子居中对齐,脱标的盒子无法居中: 定位的盒子居中:先向右走父级盒子的一半50%,然后再向左走子盒子的一半(margin-left:负值): ...
【盒子居中常用的四种方法】
案例分析: 1.H5结构:两个盒子,大盒子包着小盒子, 2.CSS样式:大盒子pink,小盒子skyblue 3.实现方法:margin外边距法:table-cell布局法:弹性布局法:定位法,其中定 ...
html相对于父元素居中,浅谈css中一个元素如何在其父元素居中显示
css如何垂直居中一个元素的问题已经是一个老生常谈的问题了.不管对于一个新手或者老手,在面试过程中是经常被问到的.前两天在看一个flex的视频教程,当中提到了有关元素的居中问题,所以今天小编就来扒一扒 ...
html中div内容居中的方法
一.div内容居中的方法: 方法1:table-cell div中的内容居中:不改变盒子尺寸. <!DOCTYPE html> <html lang="en"& ...
html/css实现居中的几个常用方法
以下总结了html/css实现居中的几个常用方法 1. 文字垂直居中的方法line-height: 这个方法往往是将line-height和height属性设置为一样的值,可以达到文字上下居中的效果. ...

用diiv实现多个方块居中嵌套--margin

用diiv实现多个方块居中嵌套--margin相关推荐

最新文章

热门文章