CSS案例CSS案例实现三栏布局实现三角形实现文字省略实现隐藏元素111111111111111111

实现三栏布局

实现一个三栏布局，左右宽度200px，中间自适应

1. flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三栏布局</title>
    <style>
        .parent {
            display: flex;
            height: 600px;
        }
        .left, .right {
            width: 200px;
            background-color: skyblue;
        }
        .mid {
            flex: 1;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left"></div>
        <div class="mid"></div>
        <div class="right"></div>
    </div>
</body>
</html>

2. 浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三栏布局</title>
    <style>
        .left, .right {
            width: 200px;
            height: 600px;
            background-color: skyblue;
        }
        .right {
            float: right;
        }
        .left {
            float: left;
        }
        
        .mid {
            height: 600px;
            background-color: blue;
            margin-left: 200px;
            margin-right: 200px;
        }
        
    </style>
</head>
<body>
    <div class="parent">
        <div class="left"></div>
        <div class="right"></div>
        <div class="mid">注意，这里的mid放在最后面</div>
    </div>
</body>
</html>

3. 定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三栏布局</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .parent {
            position: relative;
        }
        .left, .right {
            width: 200px;
            height: 600px;
            background-color: skyblue;
            position: absolute;
        }
        .right {
            left: calc(100vw - 200px);
        }
        .mid {
            height: 600px;
            background-color: blue;
            margin-left: 200px;
            margin-right: 200px;
        }
        
    </style>
</head>
<body>
    <div class="parent">
        <div class="left"></div>
        <div class="right"></div>
        <div class="mid">注意，这里的mid放在最后面</div>
    </div>
</body>
</html>

实现元素水平垂直居中

行内元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      .parent {
        width: 300px;
        border: 1px solid #ccc;
        text-align: center;
      }
      .child {
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <span class="child">这是一个行内元素</span>
    </div>
  </body>
</html>

块级元素

1. 定位+transform

.father {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

2. 定位+margin

.father {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

3. flex

.father {
  display: flex;
  justify-content: center;
  align-items: center;
}

4. grid

.father {
  display: grid;
  justify-content: center;
  align-items: center;
}

实现三角形

实现文字省略

实现隐藏元素

待完成