CSS基础 20230222

嗷嗷是是是是
41 阅读1分钟

margin设置负值后会怎样？有何应用？

margin负值有什么效果

  1. margin-left 负值，元素自身向左移动
  2. margin-right 负值，右边的元素向左移动
  3. margin-top 负值，元素自身向上移动
  4. marign-bottom 负值，下边的元素向上移动

margin负值的应用

  1. 增加宽度
  2. 圣杯布局
  3. 双飞翼布局

演示代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@说人话的前端 - bilibili</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        margin: 50px;
        border: 5px solid red;
      }
      .div1 {
        width: 200px;
        height: 200px;
        background: green;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="div1"></div>
    </div>
  </body>
</html>

如何实现圣杯布局

什么是圣杯布局

  1. 两边固定宽度，中间自适应宽度

难点

  1. margi-left：-100px；100%是父级宽度的100%
  2. margin-right：150px 其他圆度当他宽度少了150px

演示代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@说人话的前端 - bilibili</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      overflow: hidden;
      padding-left: 200px;
      padding-right: 150px;
      background-color: #ccc;
    }
    .item {
      float: left;
      color: #fff;
      font-size: 20px;
    }
    .content {
      width: 100%;
      height: 200px;
      background-color: green;
    }
    .left-item {
      width: 200px;
      margin-left: -100%;
      position: relative;
      right: 200px;
      background-color: red;
    }
    .right-item {
      width: 150px;
      margin-right: -150px;
      background-color: blue;
    }
  </style>
  <body>
    <div class="container">
      <div class="content item">@说人话的前端-bilibili</div>
      <div class="left-item item">left-item</div>
      <div class="right-item item">right-item</div>
    </div>
  </body>
</html>

如何实现双飞翼

什么是双飞翼

  1. 左右宽度固定，中间宽度自适应，中间的内容优先加载

演示代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@说人话的前端 - bilibili</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .item {
      float: left;
      color: #fff;
      font-size: 20px;
    }
    .container {
      width: 100%;
      background-color: #ccc;
    }
    .content {
      margin-left: 200px;
      margin-right: 150px;
      height: 200px;
      background-color: green;
    }
    .left-item {
      width: 200px;
      margin-left: -100%;
      background-color: red;
    }
    .right-item {
      width: 150px;
      margin-left: -150px;
      background-color: blue;
    }
  </style>
  <body>
    <div class="container item">
      <div class="content">@说人话的前端-bilibili</div>
    </div>

    <div class="left-item item">left-item</div>
    <div class="right-item item">right-item</div>
  </body>
</html>

如何清除浮动? 手写clearfix

清楚浮动的方法

  1. 父级加 overflow:hidden
  2. 父级设置 clearfix
  3. 父级也浮动

手写clearfix

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

演示代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@说人话的前端 - bilibili</title>
    <style>
      /* .clearfix:after {
        content: "";
        display: block;
        clear: both;
      } */
      .clear {
        clear: both;
      }
      .box {
        /* overflow: hidden; */
        /* float: left; */
        width: 500px;
        margin: 50px auto;
        border: 5px solid red;
      }
      .left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <div class="box clearfix">
      <div class="left">left</div>
      <div class="clear"></div>
    </div>
  </body>
</html>

手写垂直水平居中

常见的垂直水平居中方法

  1. position + marign负值的方法
  2. position + maring:auto
  3. display:table-cell + verticel-algin:middle
  4. position + transform
  5. flex

演示代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@说人话的前端 - bilibili</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        position: relative;
        width: 500px;
        height: 500px;
        border: 5px solid red;
      }
      .item {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -100px;
        margin-top: -150px;
        width: 200px;
        height: 300px;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item">@说人话的前端 - bilibili</div>
    </div>
  </body>
</html>
avatar
文章
阅读
粉丝