跳至主要內容

08.其他元素属性

12a2024/10/3大约 6 分钟HTML5前端

08.其他元素属性

8.1 通用

8.1.1 object-fit和object-position

  • object-fit指定可置换元素(例：img或video)的内容应该如何适应到其使用高度和宽度确定的框，默认为fill

    • contain：被置换的内容将被缩放，以在填充元素的内容框时保持其宽高比

    • cover：被置换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框

    • fill：被置换的内容正好填充元素的内容框

    • none：被置换的内容将保持其原有的尺寸

    • scale-down：内容的尺寸与none或contain中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些

      object-fit示例
      object-fit示例
  • 如果被置换元素比内容框小时，object-position指定如何控制置换元素的对齐方式，支持使用各种位置值

8.1.2 z-index

  • z-index设置定位元素及其后代元素的z轴顺序。z-index较大的重叠元素会覆盖数值较小的元素，只有能创建层叠上下文的元素才能修改此属性，默认是auto

  • 层叠上下文是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在z轴上的排列的先后顺序

    • 常见能够创建层叠上下文的元素有
      • html元素(根元素)
      • absolute绝对定位和relative相对定位，且设置了z-index且值非auto数值的定位元素
      • fixed固定定位和sticky粘性定位元素
      • flex容器的子元素，且设置了z-index且值不为auto
      • grid容器的子元素，且设置了z-index且值不为auto
      • 设置了transform变化、filter滤镜、opacity透明度、background-filter背景滤镜、perspective三维透视效果、clip-path裁剪形状等属性的元素
      • 规定了必须创建层叠上下文isolation: isolate;的元素
      • contain属性为layout、paint、strict或content
      • 更多可创建上下文的元素详见层叠上下文
    • 堆叠上下文中的堆叠顺序从后往前依次是
      • 创建堆叠上下文的元素的背景和边框
      • z-index负值的堆叠上下文
      • 常规流(非浮动)非定位的块元素
      • 非定位的浮动元素
      • 常规流非定位行元素
      • 任何z-index是auto的定位子元素，以及z-index是0的堆叠上下文，二者差别在于，z-index:0所在的元素是层叠上下文元素，而z-index:auto所在的元素是一个普通的元素
      • 堆叠级别为正值的堆叠上下文
    • 在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。重要的是，其子级层叠上下文的z-index值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元
    • 每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素
    • 如果在不同的层叠上下文中堆叠，层叠上下文本身z-index较大的元素和子元素将完全置于较小的元素和子元素之上
    不同层叠上下文堆叠示例
    <div class="info-container">虽然文字container1的z-index更小，但它在有更大z-index的上下文中</div>
<div>container1在<strong>z-index：10</strong>的上下文中,自身z-index: 1</div>
<div>container2在<strong>z-index： 9</strong>的上下文中,自身z-index: 1000</div>
<div class="container1">
    <div class="a">container1</div>
</div>
<div class="container2">
    <div class="b">container2</div>
</div>
<div style="height: 200px"></div>
    .info-container {
  width: 100%;
}
.container1 {
    position: relative;
    
    z-index: 10; /* 设置层级 */
}

.container1 .a {
    position: absolute;
    z-index: 1; /* 设置层级 */
    width: 300px;
    height: 200px;
    background-color: violet;
    border: violet 1px solid;
}

/* container2 */
.container2 {
    position: relative;
    z-index: 9; /* 设置层级 */
}

.container2 .b {
    position: absolute;
    left: 150px;
    z-index: 1000; /* 设置层级 */
    width: 300px;
    height: 200px;
    background-color: lightblue;
    border: lightblue 1px solid;
}

8.1.3 aspect-ratio

  • aspect-ratio属性可以限制除了行内、表格元素外所有元素的高宽比(纵向/横向)，格式为w/h，如果省略/h，默认h为1

    .container {
  aspect-ratio: 16/9;
  width: 160px;
  /* height: 90px; */
}

8.1.4 visibility

  • visibility属性控制元素是否可见，默认为visible，可选值有visible、hidden、collapse
    • visible：元素可见
    • hidden：元素不可见，但是占位
    • collapse：元素不可见，不占位。应该用于表格元素，用在普通元素上效果和hidden一样
  • 相比display属性，visibility属性可以让元素占位保留，同时也不会触发事件

8.1.5 contain

  • contain属性指示元素及其内容尽可能独立于文档树的其余部分。包含可以隔离DOM的子部分，通过将布局、样式、绘制、大小或任何组合的计算限制为DOM子树而不是整个页面来提供性能优势
  • none：元素按正常方式渲染，不应用任何尺寸控制规则
  • strict：对元素应用所有尺寸控制规则。这等价于：contain: size layout paint style
  • content：对元素应用除size之外的所有尺寸控制规则。这等价于：contain: layout paint style
  • size：在行内方向（inline）和块方向（block）上应用尺寸控制。元素的尺寸可以单独计算，忽略其子元素。该值不能与inline-size组合使用
  • inline-size：应用行内尺寸控制。元素的行内尺寸可以单独计算，忽略其子元素。该值不能与size组合使用
  • layout：元素的内部布局与页面其他部分隔离。这意味着元素外部的内容不会影响其内部布局，反之亦然
  • style：对于可能影响元素及其子孙以外的属性，其效果不会超出该元素范围。counters和quotes被限制在元素及其内容内
  • paint：元素的子元素不会显示在其边界之外。如果包含块（containing box）位于屏幕之外，浏览器无需绘制其包含的子元素——因为它们也完全被包含在该盒子内而在屏幕之外。如果子元素溢出包含元素的边界，则该子元素会被裁剪到包含元素的border-box内

8.2 文本输入框

8.2.1 caret-color

  • caret-color可以定义网页中可编辑区域插入光标(caret)的颜色，默认颜色是auto，即使用currentcolor作为插入光标颜色，可以使用颜色值设置
最近更新