CSS世界

最新推荐文章于 2023-05-11 08:23:54 发布

Joe Kittinger 。

最新推荐文章于 2023-05-11 08:23:54 发布

阅读量288

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_45601687/article/details/125771477

版权

width:auto

一般而言，除非width有明确的设置，子容器都不会主动超过父级容器的宽度。但是如果内容很长的连续英文和数字或者内联元素设置了“white-space:nowrap”’，父级容器的宽度就限制不了子元素了

首选最小宽度

当inline-block宽度为0时，当其中存在文字和图片时

1.东亚文字（如中文）最小宽度为每个汉字的宽度
2.西方文字最小宽度由特定的连续的英文字符单元决定
3.类似图片这样的替换元素的最小宽度就是该元素内容本身的宽度

宽度分离原则

由于padding、border属性容易影响最后的宽度，导致后期优化维护时导致页面布局崩塌，所以使用分离原则，让width独占一层标签，但是不可出现通篇的width，尽量控制width的数量，最优解是只出现一次（最外层限制网页内容的width）

.father { 
 width: 180px; 
} 
.son { 
 margin: 0 20px; 
 padding: 20px; 
 border: 1px solid; 
}

vertical-align

vertical-align 属性只能作用在display计算值为 inline、inline-block，inline-table或 table-cell 的元素上默认情况下，<span>、<strong>、<em>等内联元素，<img>、<button>、<input>等替换元素，非 HTML 规范的自定义标签元素，以及<td>单元格，都是支持 vertical-align 属性的。可以参考该文章

BFC（结界：块级格式化上下文）

触发条件：

• html根元素；
• float 的值不为 none；
• overflow 的值为 auto、scroll 或 hidden；
• display 的值为 table-cell、table-caption 和 inline-block 中的任何一个；
• position 的值不为 relative 和 static。

position:absolute

1.虽说与float血缘上是兄弟，却从不承认其‘魔族’血脉，于是他俩水火不容，不会同时出现

.brother { 
 position: absolute; 
 float: left; // 无效
}

2.absolute 是非常独立的 CSS 属性值，其样式和行为表现不依赖其他任何 CSS 属性就可以完成（魔族之子的手段：强者不需要父亲，只需自身与 margin 属性进行定位配合，即可精准定位百发百中）

错误理解：
.father { 
 position: relative; 
} 
.shape { 
 position: absolute; 
 top: 0; left: 0; 
}

魔族之子的手段（干净利落）：
.shape { 
 position: absolute; 
}

层叠上下文

出现以下情况就会产生层叠上下文：（可以参考这里）

（1）天生派：页面根元素天生具有层叠上下文，称为根层叠上下文。
（2）正统派：z-index 值为数值的定位元素的传统“层叠上下文”。
（3）扩招派：

（1）元素为 flex 布局元素（父元素 display:flex|inline-flex），同时 z-index值不是 auto。      
（2）元素的 opacity 值不是 1。 
（3）元素的 transform 值不是 none。 
（4）元素 mix-blend-mode 值不是 normal。 
（5）元素的 filter 值不是 none。 
（6）元素的 isolation 值是 isolate。
（7）元素的 will-change 属性值为上面 2～6 的任意一个（如 will-change:opacity、will-chang:transform 等）。
（8）元素的-webkit-overflow-scrolling 设为 touch。

引用文章最后一个问题加深一下自己的理解

<style>
  .parent {
    width: 100px;
    height: 200px;
    background: #168bf5;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
  .child1 {
    width: 100px;
    height: 200px;
    background: transparent;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
  }
  .child2 {
    width: 100px;
    height: 200px;
    background: #e4c950;
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: -1;
  }
  .child2-1 {
    width: 100px;
    height: 200px;
    background: #e45050;
    position: absolute;
    top: 60px;
    left: 60px;
    z-index: 9999;
  }
  .child2-2 {
    width: 100px;
    height: 200px;
    background: #db68a7;
    position: absolute;
    top: 80px;
    left: 40px;
    z-index: -9999;
  }
</style>
</head>
<body>
  <div class="parent">//【1】
    parent
    <div class="child1">child1</div>
    <div class="child2">//【2】
      child2
      <div class="child2-1">child2-1</div>//【3】
      <div class="child2-2">child2-2</div>
    </div>
  </div>
</body>

【1】position: absolute;z-index: 0;开启层叠上下文，所以parent、child1、child2处于该层叠结界，又因为child1的z-index为1，所以会覆盖parent；而child2的z-index为-1，所以按照正常理解应该被parent覆盖，但是为什么显示在parent之上？因为在层叠顺序中，z-index<0的层叠顺序在background、border之上，所以child2应该处于parent层叠顺序的倒数第二层，所以z-index为-1的child2应该在parent的背景之上
child1覆盖了parent![在这里插入图片描述](https://img-blog.csdnimg.cn/e1dc4c65701e4913acbffeb5d4148f64.png

1.child1覆盖parent、child1 在这里插入图片描述
2.child2被parent、child1覆盖，但child2在parent背景之上

【2】child2也开启了层叠上下文，所以child2、child2-1、child2-2处于一个层叠结界，因为child2-1的z-index=9999，所以child2-1会覆盖child2；而child2-2的z-index为-9999，所以按照正常理解也应该被child2覆盖，但是为什么显示在child2之上？因为在层叠顺序中，z-index<0的层叠顺序在background、border之上，所以z-index为-9999的child2-2应该在child2的背景之上

1.child2-1覆盖了child2、child2-2
在这里插入图片描述
2.child2-2被child2、child2-1覆盖，但child2-2却在child2的背景之上