盒状模型

---

• width
• max-width
• overflow
• clip
• clip-path
• box-sizing
• object-fit

---

width

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

max-width

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

overflow

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

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

clip

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

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

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

• 第一个参数：剪切后的顶边距离容器的顶边的距离
• 第二个参数：剪切后的右边界距离容器的左边界的距离
• 第三个参数：剪切后的底边距离容器的顶边的距离
• 第四个参数：剪切后的左边界距离容器的左边界的距离

clip: rect(auto 100px auto auto);

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

clip-path

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

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

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

.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

*, *: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