css 布局实用篇 #37

topcss · 2019-07-30T01:19:20Z

/* CSS3 */
selector::before
/* CSS2 */
selector:before

CSS3引入了 ::（两个冒号）是用来区分伪类(:一个冒号)和伪元素(::两个冒号)。

伪类：操作元素本身，如 :hover、:first-child、:focus等等。
伪元素：操作元素的子元素，如 ::before、::after、::content等等。

居中对齐，上下固定，中间自适应的例子

<!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">
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      .flex-container {
        height: 100%;
        display: flex;
        flex-direction: column;
      }

      .flex-item {
        width: 100%;
        height: 100px;
        background-color: cadetblue;
      }
      .flex-item:nth-child(1),
      .flex-item:nth-child(3) {
        /* 即如果存在剩余空间，也不放大。 */
        flex-grow: 0;
      }

      .flex-item:nth-child(2) {
        /* 将等分剩余空间 */
        flex-grow: 1;
        background-color: bisque;

        display: flex;
      }
      .content {
        /* 在弹性子元素上设置margin: auto，可以使得该弹性子元素在两个轴方向上完全居中。 */
        margin: auto;
        height: 300px;
        width: 400px;
        background-color: burlywood;
      }

      /* 添加注释 */
      .flex-item:nth-child(1)::after,
      .flex-item:nth-child(3)::after {
        content: '高度 100 px';
      }
      .flex-item:nth-child(2)::after {
        content: '高度 自适应。又是另一个flex布局的容器';
      }
      .content::after{
        content: '居中对齐'
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item"></div>
      <div class="flex-item">
        <div class="content"></div>
      </div>
      <div class="flex-item"></div>
    </div>
  </body>
</html>

topcss added the CSS label Jul 30, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

css 布局实用篇 #37

css 布局实用篇 #37

topcss commented Jul 30, 2019

css 布局实用篇 #37

css 布局实用篇 #37

Comments

topcss commented Jul 30, 2019