二维码
搜索 ×

盒状模型

  • 作者：网道
  • 更新时间：2023年12月01日
  • 阅读量：0
  • 收藏数：0

盒状模型

width

width: auto表示父元素提供的所有宽度（100%）。

max-width

max-width设为none，可以让元素占满父元素的整个宽度。

overflow

overflow属性指定如果元素的大小超出容器时的行为。

  • visible：默认值，表示溢出的部分可见
  • hidden：表示溢出的部分不可见
  • scroll：表示发生溢出时，会显示滚动条，用户可以拖动滚动条，看到溢出的部分

clip

clip规则指定元素超出容器大小时，具体显示哪个部分。它只对绝对定位（absolute）和固定定位（fixed）的元素有效。

1
clip: rect(0px, 100px, 100px, 0px);

react函数四个参数的含义如下。

  • 第一个参数：剪切后的顶边距离容器的顶边的距离
  • 第二个参数：剪切后的右边界距离容器的左边界的距离
  • 第三个参数：剪切后的底边距离容器的顶边的距离
  • 第四个参数：剪切后的左边界距离容器的左边界的距离
1
clip: rect(auto 100px auto auto);

该规则已经被废除，但是浏览器还是普遍支持。

clip-path

clip-path是clip规则的继承者，用来剪切元素的大小。它对所有定位方式都适用。

1
2
3
clip: rect(110px, 160px, 170px, 60px);
/* 等同于 */
clip-path: inset(10px 20px 30px 40px);

clip-path支持多种路径定义方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.clip-me {

  /* referencing path from an inline SVG <clipPath> */
  clip-path: url(#c1);

  /* referencing path from external SVG */
  clip-path: url(path.svg#c1);

  /* polygon */
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

  /* circle */
  clip-path: circle(30px at 35px 35px);

  /* ellipse */
  clip-path: ellipse(65px 30px at 125px 40px);

  /* inset-rectangle() may replace inset() ? */
  /* rectangle() coming in SVG 2 */

  /* rounded corners... not sure if a thing anymore */
  clip-path: inset(10% 10% 10% 10% round 20%, 20%);

}

box-sizing

box-sizing指定盒状模型的宽度范围。

  • border-box：宽度包括padding和border
  • content-box：默认值，只包括内容区的宽度，不包括padding和border
1
2
3
4
5
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

object-fit

object-fit命令指定一个元素的大小应该如何适应它的容器，主要用于图像。它可以取以下的值。

  • fill：容器的宽度和高度就是元素的宽度和高度，会截去溢出的部分。
  • contain：元素会填满容器，不会改变长宽比，可能会有溢出。
  • cover：元素会填满容器，可能会改变长宽比，但不会有溢出。
  • none：元素不会改变的大小，具体的展示效果由默认算法决定
  • scale-down：展示效果会选择none或contain之中，对象尺寸较小的一个
  • inherit：使用父元素的值
  • initial：使用浏览器的默认值
  • unset：这个属性是inherit和initial的结合，如果该元素继承父元素，就采用inherit，否则采用initial

本教程来自“网道项目”（wangdoc.com），采用知识共享 署名-相同方式共享 3.0协议。

推荐教程