当前位置：首页 > article >正文

CSS 相关知识

article 2025/2/10 0:39:10

1、高度已知，三栏布局，左右宽度 200，中间自适应，如何实现？

  <body>
    <div class="box">
      <div class="box1">高度已知</div>
      <div class="box2">左右宽度 200，中间自适应</div>
      <div class="box3">三栏布局</div>
    </div>
  </body>
  <style>
    .box {
      display: flex;
      background-color: #ccc;
      height: 200px;
    }
    .box2 {
      flex: auto;
    }
    .box1,
    .box3 {
      width: 200px;
    }
  </style>

2、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？

  <body>  
    <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
  <style>
    * {
      margin: 0;
    }
    .box {
      background-color: #ccc;
    }
    .box1,
    .box2 {
      height: 200px;
      width: 200px;
      margin: 20px;
    }
    .box1 {
      background-color: red;
    }
    .box2 {
      background-color: blue;
    }
  </style>

外边距合并的场景

1、相邻兄弟元素：两个相邻的兄弟元素之间的上下外边距会合并。

2、父元素与第一个/最后一个子元素：父元素的上外边距与第一个子元素的上外边距，或父元素的下外边距与最后一个子元素的下外边距会合并。

3、空块级元素：如果一个块级元素没有内容、内边距、边框，其上下外边距会合并。

外边距合并的规则

1、取较大值：合并后的外边距取两个外边距中的较大值。

2、一正一负：如果一个外边距为正，另一个为负，合并后的外边距为两者之和。

3、同为负值：如果两个外边距都为负，合并后的外边距取绝对值较大的那个。

不让相邻元素外边距合并

1、添加边框或内边距：为父元素添加边框或内边距可以阻止外边距合并。

.parent {

padding: 1px; /* 或 border: 1px solid transparent; */

}

2、使用浮动或定位：浮动元素或绝对定位元素的外边距不会合并。

.child {

float: left; /* 或 position: absolute; */

}

3、使用overflow属性：将父元素的overflow设置为auto、hidden或scroll。

.parent {

overflow: hidden;

}

4、使用display: flex或display: grid：将父元素的display设置为flex或grid。

.parent {

display: flex;

}

5、使用::before或::after伪元素：在父元素中添加伪元素。

.parent::before {

content: '';

display: table;

}

3、移动端 1px 实现方案

在CSS中我们一般使用px作为单位，需要注意的是，CSS样式里面的px和物理像素并不是相等的。CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的物理像素是不同的。在PC端，CSS的1px一般对应着电脑屏幕的1个物理像素，但在移动端，CSS的1px等于几个物理像素。

1、使用 transform: scale() 缩放
把原先元素的 border去掉，利用伪元素实现 border ，并将 transform 的 scale
缩小一半，原先的元素相对定位，新的 border 绝对定位。
优点：兼容性好，适用于单边或多边边框。
缺点：需要额外使用伪元素，代码稍复杂。

<body>
    <div class="border-1px">1</div>
    <div class="border-2px">2</div>
    <div class="border-3px">3</div>
    <div class="border-4px">4</div>
    <div class="scale-1px">5</div>
  </body>
  <style>
    .border-1px {
      position: relative;
    }
    .border-1px::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background-color: #000;
      transform: scaleY(0.5); /* 缩放为原来的一半 */
      transform-origin: 0 0;
    }
    .border-2px {
      padding-top: 10px;
      border-bottom: 0.5px solid #000;
    }
    .border-3px {
      padding-top: 10px;
      border-bottom: 1px solid #000;
    }
    .border-4px {
      margin-top: 10px;
      height: 1px;
      background-color: #000;
      transform: scaleY(0.5); /* 会将盒子整体都缩放 */
    }
    .scale-1px {
      position: relative;
      margin-bottom: 20px;
      border: none;
    }
    .scale-1px:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid #000; 
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 200%;
      height: 200%;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: left top;
      transform-origin: left top;
    }
  </style>

查看全文

http://www.kler.cn/a/538560.html