• [CSS]常见布局技巧

    前言

    文章目录

    1. margin负值的运用

    多个盒子进行浮动，同时为每个盒子设置边框，会导致相邻盒子相接触的位置边框变粗。

    在这里插入图片描述

    此时可以使用margin将其值设置为负数，对上一个的边框进行覆盖，使得相邻位置的边框没有那么粗。

    代码示例：

    <style>
  div {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -2px;
    background-color: aquamarine;
    border: 2px solid black;
  }
style>
<body>
  <div>div>
  <div>div>
  <div>div>
  <div>div>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

    实现鼠标经过，盒子的边框颜色改变：

    <style>
  div {
    position: relative;
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -2px;
    background-color: aquamarine;
    border: 2px solid black;
  }
  div:hover {
    /* 由于后面的盒子覆盖了前面的盒子，所以要将前面的盒子层级提高 */
    /* 如果没有有定位，则加相对定位（保留位置） */
    /* position: relative; */
    border: 2px solid red;
    /* 如果有定位，则加z-index */
    z-index: 1;
  }
style>
<body>
  <div>div>
  <div>div>
  <div>div>
  <div>div>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    在这里插入图片描述

    2. 文字围绕浮动元素

    实现下图效果，是利用浮动元素不会压住文字。

    在这里插入图片描述

    <style>
  .box {
    width: 300px;
    height: 70px;
    background-color: aquamarine;
  }
  .inner {
    /* 盒子进行浮动 */
    /* 由于浮动不会压住文字，可以实现文字在盒子右边环绕显示 */
    float: left;
    width: 120px;
    height: 70px;
    margin-right: 5px;
    background-color: cadetblue;
  }
style>
<body>
  <div class="box">
    <div class="inner">div>
    <span>hello world! hello world! hello world! hello world! span>
  div>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    在这里插入图片描述

    3. 行内块的巧妙运用

    使用行内块元素实现下图效果：

    在这里插入图片描述

      <style>
    a {
      /* 取消 a 标签的默认样式 */
      color: #000;
      text-decoration: none;
    }
    .box {
      /* 行内块元素页面水平居中 */
      text-align: center;
    }
    .box a {
      display: inline-block;
      /* width: 36px; */
      height: 36px;
      /* 内边距 内容与左右边框的距离 */
      padding: 0 14px;
      background-color: #f7f7f7;
      border: 1px solid #ccc;
      font-size: 14px;
      /* 水平居中 */
      /* 继承父元素 */
      /* text-align: center; */
      /* 垂直居中 */
      line-height: 36px;
    }
    .box a:hover,
    .box .elp {
      background-color: #fff;
      border: none;
    }
    /* 输入框 */
    .box input {
      width: 45px;
      height: 36px;
      border: 1px solid #ccc;
      /* 取消获取焦点时的边框样式 */
      outline: none;
    }
    /* 确定按钮 */
    .box button {
      width: 60px;
      height: 36px;
      background-color: #f7f7f7;
      border: 1px solid #ccc;
    }
  style>
  <body>
    <div class="box">
      <a href="#"><<上一页a>
      <a href="#">1a>
      <a href="#">2a>
      <a href="#">3a>
      <a href="#">4a>
      <a href="#">5a>
      <a href="#" class="elp">...a>
      <a href="#">>>下一页a>
      到第
      <input type="text">
      页
      <button>确定button>
    div>
  body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62

    在这里插入图片描述

    4. CSS三角强化

    实现下图效果：
    在这里插入图片描述

    三角形实现：

    <style>
  .box1 {
    width: 40px;
    height: 80px;
    padding: 40px;
    background-color: aquamarine;
  }
  .box1 .inner {
    width: 0;
    height: 0;
    /* 顶部的边框可以撑开三角形的高度 */
    /* 上边框宽度调大 */
    border-top: 80px solid red;
    border-right: 40px solid black;
    /* 底部边框为0 可以不让三角形为等腰 */
    /* 底部和左边边框宽度为0 */
    border-bottom: 0px solid transparent;
    border-left: 0px solid transparent;
  }
style>
<body>
  <div class="box1">
    <div class="inner">div>
  div>

body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    在这里插入图片描述

    案例效果实现：

    <style>
  .box {
    width: 160px;
    height: 24px;
    border: 1px solid red;
    /* 文字居中 */
    text-align: center;
  }
  .left {
    /* 自绝父相 */
    position: relative;
    /* 浮动会覆盖盒子，但是不覆盖文字 */
    float: left;
    width: 90px;
    height: 100%;
    background-color: red;
  }
  .box i {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    /* 边框的颜色  只有右边框有颜色 白色*/
    border-color: transparent #fff transparent transparent;
    border-style: solid;
    /* 上右边框有宽度 */
    border-width: 24px 12px 0 0;
  }
style>
<body>
  <div class="box">
    <span class="left">￥1650<i>i>span>
    <span class="right">￥5650span>
  div>

body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    在这里插入图片描述

  • 相关阅读:
    java正则校验金额
    酒店解决方案近呗科技
    mfc入门基础（七）向导对话框的创建与显示
    Java入门 集合框架、泛型和Collection(一)(第二十三天)
    【双指针+简化去重操作】【int运算溢出】Leetcode 18 四数之和
    佳能Canon打印机G3800出现5B00错误代码提示
    ELK搭建（十二）：搭建Nginx访问、错误日志监控平台
    CentOS to 浪潮信息 KeyarchOS 迁移体验与优化建议
    Fiddler之Replay功能详解
    记一次由于google新版本限制升级导致的跨域问题
  • 原文地址：https://blog.csdn.net/m0_53022813/article/details/127668592