CSS汇总【1】

1.opacity属性指定元素的不透明度/透明度，取值范围0.0 - 1.0 .值越低，越透明

div{

background-color：green；

opacity：0.3a

}

2.background-image属性指定元素背景的图像

body{

 background-image：url（“demo.gif”）/**  background-image：url（“demo.png”） **/

}

默认情况下，其在水平和垂直方向上都重复图像

仅在水平方向重复：background-repeat: repeat-x;

仅在垂直方向重复：background-repeat: repeat-y;

只显示一次背景图像：background-repeat：no-repeat；

3.background-attachment属性指定背景图像应该是滚动还是固定（不会随其他页面内容一起滚动）

body{

  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed; / ** 固定图像  **/
  background-attachment: scroll;/ ** 随页面其余部分一起滚动 **/

}

4.简写属性background

background：#ffffff url("demo.png") no-repeat right top;

顺序是：①background-color②background-image③background-repeat④background-attachment⑤background-position

5.border-style边框属性

• dotted - 定义点线边框
• dashed - 定义虚线边框
• solid - 定义实线边框
• double - 定义双边框
• groove - 定义 3D 坡口边框。效果取决于 border-color 值
• ridge - 定义 3D 脊线边框。效果取决于 border-color 值
• inset - 定义 3D inset 边框。效果取决于 border-color 值
• outset - 定义 3D outset 边框。效果取决于 border-color 值
• none - 定义无边框
• hidden - 定义隐藏边框

6.外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

7.内边距box-sizing：border-box属性

div{
 width：300px；
padding：25px；
}

实际宽度为350px，若保持300px不变，则加上border-box，会导致可用宽度减少

8.max-width元素最大宽度

它和普通width区别是，适配浏览器宽度，也就是说当浏览器窗口宽度小于宽度时候，普通width的会出现左右滑动滚轮，而max-width最大宽度不会。

9.outline轮廓

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

9.text-decoration用于设置或删除文本装饰

text-decoration：none取消删除下划线

10.text-transform指定文本中大小写

11.text-文本间距

text-indent第一行文本缩进

word-spacing单词间距

white-space空白，white-space: nowrap;禁止文本换行

text-overflow：指定应如何向用户示意未显示的溢出内容