36、盒子的居中属性

  • 水平居中属性：-webkit-box-pack、-moz-box-pack
  • 垂直居中属性： -webkit-box-align、-moz-box-align

值为：start、end、center、baseline、stretch

使用这2个属性时需要加上：
display: -moz-box;（适用浏览器Firefox ）
或 display: -webkit-box（ 适用浏览器Safari, Chrome, and Opera ）;

例：

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 350px;
  height: 100px;
  border: 1px solid black;

  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;

  /* Safari, Chrome, and Opera */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}
</style>
</head>
<body>
<div>
<p>我是居中对齐的。</p>
</div>
</body>
</html>

适用后盒子内的内容就会在水平上和垂直上都居中：
图片说明

37、CSS3 opacity 属性

Opacity 属性设置一个元素的透明度。

例：

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  background-color: yellow;
  opacity: 0.6;
}
</style>
</head>
<body>
<div>本元素的不透明度是 0.6。</div>
</body>
</html>

元素不透明度为0.6，文本和背景色都受到不透明级别的影响：
图片说明

38、剪裁 clip

clip 属性剪裁绝对定位元素。
这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

clip: rect (top, right, bottom, left)

例：

<html>
<head>
<style>
img {
  position:absolute;
  clip: rect(200px 600px 500px 100px)
}
</style>
</head>
<body>
<img src="images/1.png">
</body>
</html>

在这里插入图片描述