媒体查询

从大屏开始适配，以下为核心代码：

<body>
    <button class="btn small">按钮1</button>
    <button class="btn middle">按钮2</button>
    <button class="btn large">按钮3</button>
    <style>
      /* 按钮样式 */
      .btn {
        background-color: seagreen;
        color: white;
        border: none;
        outline: none;
      }
      .btn.small {
        font-size: 1.2rem;
      }
      .btn.middle {
        font-size: 1.6rem;
      }
      .btn.large {
        font-size: 1.8rem;
      }
      /* PC优先：从最大的屏幕开始进行适配 */
      @media only screen and (min-width: 414px) {
        html {
          font-size: 100px;
        }
      }
      /* 375px - 413px */
      @media only screen and (min-width: 375px) and (max-width: 413px) {
        html {
          font-size: 50px;
        }
      }
      /*  小于374px */
      @media only screen and (max-width: 374px) {
        html {
          font-size: 30px;
        }
      }
    </style>
  </body>

固定定位

相对定位：

相对自己原来的位置进行偏移，元素仍然在文档流中，所占空间不释放

<body>
    <div class="box parent">
      <div class="box child first">Child 1</div>
      <div class="box child">Child 2</div>
    </div>
    <style>
      body {
        border: 1px solid #000;
      }
      .box {
        border: 1px solid #000;
      }
      .parent {
        width: 300px;
        height: 400px;
        background-color: lightcyan;
      }
      .box.child {
        width: 150px;
        height: 150px;
        background-color: yellow;
      }
      .box.child.first {
        background-color: lightgreen;
        position: relative;
        top: 30px;
        left: 30px;
      }
    </style>
  </body>

绝对定位

不在文档流中，相对于元素的包含块（父级），此包含块必须是“定位元素” ，即包含块的position不能是static，如果此绝对元素一直往上没有找到可定位的父级元素，那就相对于body，核心代码如下：

 .box.child.first {
     background-color: lightgreen;
     position: absolute;
     top: 30px;
     left: 30px;
 }

也可以将父级设置为该元素的包含块，核心代码如下：

.box.parent {
    position: relative;
}

固定定位应用—登陆模态框

<body>
      <header>
        <h2 class="title">某某的博客</h2>
        <button
          onclick="document.querySelector('.modal').style.display='block'"
        >
          登录
        </button>
      </header>
      <!-- 模态框 -->
      <div class="modal">
        <!-- 1. 点击遮罩,关闭表单 -->
        <div
          class="modal-bg"
          onclick="this.parentNode.style.display='none'"
        ></div>
        <!-- 2. 弹层表单 -->
        <form action="" class="modal-form">
          <fieldset style="display: grid; gap: 1em">
            <legend>用户登录</legend>
            <input type="email" name="email" placeholder="user@email.com" />
            <input type="password" name="password" placeholder="不少于6位" />
            <button>登录</button>
          </fieldset>
        </form>
      </div>
      <style>
        * {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
        }
        /* 顶部样式 */
        header {
          background-color: seagreen;
          display: flex;
          padding: 0.5em 1em;
        }
        header .title {
          font-weight: lighter;
          font-style: italic;
          color: white;
          text-shadow: 1px 1px 1px #444;
          letter-spacing: 1px;
        }
        header button {
          margin-left: auto;
          width: 5em;
          border: none;
          border-radius: 0.5em;
        }
        header button:hover {
          cursor: pointer;
          background-color: coral;
          color: white;
          box-shadow: 0 0 0.5em #fff;
          transition: 0.3s;
        }
        /* 模态框样式 */
        .modal .modal-form fieldset legend {
          padding: 5px 1em;
          background-color: rebeccapurple;
          color: white;
        }
        /* 表单：固定定位 */
        .modal .modal-form {
          position: fixed;
          top: 10em;
          left: 20em;
          right: 20em;
        }
        /* 遮罩：固定定位 */
        .modal .modal-bg {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(255, 0, 0, 0.3);
        }
        .modal {
          display: none;
        }
      </style>
  </body>

Flex常用属性

基础页面

<body>
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      .container {
        /* flex容器 */
        display: flex;
        height: 20em;
        border: 1px solid #000;
      }
      .container > .item {
        width: 10em;
        height: 10em;
        padding: 1em;
        background-color: lightcoral;
        border: 1px solid #000;
      }
      }
    </style>
  </body>

1. 属性1：flex-flow

控制主轴方向项目的分布方式及控制项目是否换行：

.container {
    /* 主轴横向排布+自动换行 */
    flex-flow: row wrap;
}

2. 属性2：place-content

项目在主轴上的排列与空间分配

 .container {
    /* 两端对齐 */
    /* place-content: space-between; */
    /* 分散对齐：每个项目2边空间相等 */
    /* place-content: space-around; */
    /* 平均对齐 */
    place-content: space-evenly;
}

3. 属性3：place-items

项目在交叉轴上的对齐方式

.container {
    /* place-items: stretch; */
    /* place-items: start; */
    /* place-items: end; */
    place-items: center;
}

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

VSCode、Chrome安装及HTML页面结构了解

2021-12-21 22:59:40