[CSS]常见布局技巧

最新推荐文章于 2022-12-02 20:20:38 发布

小炜1128

最新推荐文章于 2022-12-02 20:20:38 发布

阅读量518

点赞数

分类专栏：前端学习笔记文章标签： css html 前端 css3

本文链接：https://blog.csdn.net/m0_53022813/article/details/127668592

版权

前端学习笔记专栏收录该内容

32 篇文章 4 订阅

订阅专栏

前言

系列文章目录：
[目录]HTML CSS JS

根据视频和PPT整理
视频及对应资料：
HTML CSS
老师笔记： https://gitee.com/xiaoqiang001/html_css_material.git
视频：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程
视频对应资源
链接：【https://pan.baidu.com/s/1k1dpC6iGA93c6gVsUvPqYw】
提取码：1234
【GitHub 仓库链接】

文章目录

前言
1. margin负值的运用
2. 文字围绕浮动元素
3. 行内块的巧妙运用
4. 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>

在这里插入图片描述

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

<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>

在这里插入图片描述

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>

在这里插入图片描述

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="#">&lt;&lt;上一页</a>
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
      <a href="#" class="elp">...</a>
      <a href="#">&gt;&gt;下一页</a>
      到第
      <input type="text">
      页
      <button>确定</button>
    </div>
  </body>

在这里插入图片描述

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>

在这里插入图片描述

案例效果实现：

<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">￥5650</span>
  </div>

</body>