CSS 重叠居中多个 DIV 及自适应正方形

Overlay Center Multiple DIV and Responsive Web Design Square DIV with CSS
响应式设计让网站可以针对不同设备及不同尺寸萤幕浏览网页时，网页佈局会对应不同的解析度，而有不同的呈现方式、而控制 Relative 相对的位置及尺寸考量，以符合版面大小的样式来显示网页的内容。

将三个 <div> 重叠居中排列，一开始设置其尺寸大小及颜色。接下来减少版面宽度就省略 CSS 尺寸大小及颜色。

<div class="source-main">
  <div class="source-A"></div>
  <div class="source-B"></div>
  <div class="source-C"></div>
</div>

div.source-main div.source-A{width:200px;height:200px;background-color:#FFD700;}
div.source-main div.source-B{width:100px;height:100px;background-color:#9ACD32;}
div.source-main div.source-C{width:50px;height:50px;background-color:#128B44;}

DIV 子层关系 Descendant Typographic Design

使用 display:flex 伸缩盒、justify-content:center 横向左右对齐、align-items:center 上下的对齐方式。

<div class="descendant-main">
  <div class="descendant-A"><div class="descendant-B"><div class="descendant-C"></div></div></div>
</div>

div.descendant-main{display:flex; justify-content:center; align-items:center;}
div.descendant-main div.descendant-A{display:flex; justify-content:center; align-items:center;}
div.descendant-main div.descendant-B{display:flex; justify-content:center; align-items:center;}
div.descendant-main div.descendant-C{}

DIV 相邻关系 Sibling Typographic Design

绝对定位的元素可以用于与其他元素重叠，必要时可使用 z-index 属性，该属性确定元素的重叠堆栈顺序。

<div class="sibling-main">
  <div class="sibling-A"></div>
  <div class="sibling-B"></div>
  <div class="sibling-C"></div>
</div>

div.sibling-main{display:flex; justify-content:center; align-items:center;}
div.sibling-main div.sibling-A{position:absolute;}
div.sibling-main div.sibling-B{position:absolute;}
div.sibling-main div.sibling-C{position:absolute;}

相邻关系排版使用绝对定位 position:absolute 但在 IE 中无法正常显示。☹

使用 CSS 显示正方形、自适应正方形设定方法

以 CSS 容器内缘 padding-bottom 垂直方向撑开容器，RWD Square Container 自适应可以用百分比 %，内层呈现之正方形容器、百分比是根据父级元素的 width 宽度来计算，所以先把父级元素的 width 宽度做符合版面的规划设定，例如 max-width:900px 则正方形为 450 × 450。「两个容器之间」的 Html 语法不要换行，其中的 <span> 只是标示或内容并不影响容器。

<div class="square-two-container">
  <div
    class="square-A"><span>SQUARE A</span></div><div
    class="square-B"><span>SQUARE B</span></div>
</div>

div.square-two-container{width:100%;max-width:900px;display:flex;}
div.square-two-container div{width:50%;height:0;padding-bottom:50%;}
div.square-two-container div.square-A{background-color:#ffd700;}
div.square-two-container div.square-B{background-color:#9acd32;}
div.square-two-container div span{line-height:100px;background-color:rgba(0,0,0,0.2);display:block;}

两个正方形容器以 50% 左右呈现、当页面小于 600px 则以上下呈现。

@media (max-width:600px){
  div.square-two-container{flex-flow:row wrap;}
  div.square-two-container div{width:100%;padding-bottom:100%;}
}

使用四个正方形的情况。100% ÷ 4 = 25%

div.square-four-container{width:100%;max-width:900px;display:flex;}
div.square-four-container div{width:25%;height:0;padding-bottom:25%;}
div.square-four-container div.square-A{background-color:#ffd700;}
div.square-four-container div.square-B{background-color:#9acd32;}
div.square-four-container div.square-C{background-color:#ffd700;}
div.square-four-container div.square-D{background-color:#9acd32;}
div.square-four-container div span{line-height:100px;background-color:rgba(0,0,0,0.2);display:block;}

@media (max-width:600px){
  div.square-four-container{flex-flow:row wrap;}
  div.square-four-container div{width:50%;padding-bottom:50%;}
}