二维码

盒状模型

盒状模型

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-pathclip规则的继承者,用来剪切元素的大小。它对所有定位方式都适用。

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:展示效果会选择nonecontain之中,对象尺寸较小的一个
  • inherit:使用父元素的值
  • initial:使用浏览器的默认值
  • unset:这个属性是inheritinitial的结合,如果该元素继承父元素,就采用inherit,否则采用initial

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