topcss/my-notes

css 布局实用篇

Opened this issue · 0 comments

/* 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>
  1. CSS :befor :after 伪元素的妙用
  2. css flex弹性布局学习总结