CSS笔记

8.14

1.背景属性（background）

背景其实大致可分为两大类，一种是颜色，一种是图片，相对于图片背景来说，颜色的可设属性较少，大部分的属性都是针对于图片背景来说

1.1.背景颜色（background-color）

元素背景范围 background-color 属性为元素设置⼀种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色，他有五种取值方式，分别是

1.transparent 默认，透明背景

2.color_name 颜色名称，比如red

3.hex_number 十六进制颜色，比如#ff000

4.rgb_number rgb色值，比如rgb(255,0,0)或者rgba(255,0,0,.2)

5.inherit 继承父元素背景色

1.2.背景图片（background-image）

background-image 属性设置元素的背景图片，元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。 默认，背景图像位于元素的左上角，并在水平和垂直方向上重复。他的属性值为 url('图片的路径地址')

1.2.1.背景平铺（background-repeat）

background-repeat 属性设置是否重复背景图像，他有四种取值，分别是

1.repeat 默认值，水平垂直方向上平铺

2.no-repeat 不平铺

3.repeat-x 水平方向平铺

4.repeat-y 垂直方向平铺

1.2.2.背景图片固定（background-attachment）

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。 他有两种取值，分别是：

1.scroll 默认值。背景图像会随着页面其余部分的滚动而移动

2.fixed 当页面的其余部分滚动时，背景图像不会滚动

1.2.3.背景定位（background-position）

background-position 属性设置背景图像的起始位置。 这个属性设置背景原图像的位置，背景图像如果要重复，将从这⼀点开始。他有两种取值方式，分别是

1.上下 左右 第一个位置定义上下的位置（top/center/bottom），第二个定义左右位置(left/center/right)，如果仅定义一个值，第二个值为 center

2.x y 第一个值为水平位置，第二个为垂直位置，可以是百分比或者px，如果仅定义一个值，第二个值为50%

1.2.4.背景图片尺寸（background-size）

background-size 属性规定背景图像的尺寸。四个取值：

1.length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

2.percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

3.cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

4.contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

1.2.5.背景图片显示区域（background-origin）

background-origin 属性规定 background-position 属性相对于什么位置来定位。 注意：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。三个取值：

1.padding-box 默认值，背景图像相对于内边距定位

2.border-box 背景图像相对于边框定位

3.content-box 背景图像相对于内容边框定位

1.2.6.背景显示区域（background-clip）

background-clip 属性规定背景的绘制区域。有三种取值：

1.border-box 默认值，背景填充全部

2.padding-box 背景填充不包括边框

3.content-box 背景只填充内容部分

 注意事项：当使用background-origin和background-clip属性时，background-origin应该大于background-clip，开始显示的地方应该大于结束显示的地方。

2.雪碧图（精灵图）

雪碧图就是将很多很多的小图标放在一张图片上,就称之为雪碧图 使用雪碧图的优势：

1.将多张图片合并到一张图片中，可以减小图片的总大小。

2.将多张图片合并成一张图片，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。

图片示例 

使用方法如下

HTML

<div class='box1'></div>
<div class='box2'></div>

CSS

div{
    width: 30px;
    height: 30px;
    border: 1px solid #f00;
    background: url('雪碧图路径') no-repeat;
}
.box1{
    background-position: 3px 3px;
}
.box2{
    /* 通过背景图片定位，调整图片的位置 */
    background-position: 3px -40px;
}

雪碧图图标定位推荐网址：Sprite Cow - Generate CSS for sprite sheetshttp://www.spritecow.com/1.使用方法：

2.点击open image

3.选择图片

4.选择selet spriet

5.使用鼠标选中需要使用的小图标

6.下面会自动显示 x y width height

7.在对应的css中填入需要的数值

3.外边距合并问题

外边距合并分为三种情况

3.1.在两种元素为同级关系时

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并

如下展示

HTML

<div class="one"></div>
<div class="two"></div>

CSS

.one {
  width:100px;
  height:100px;
  margin-bottom:20px;
  background-color:red;
}

.two {
  width:100px;
  height:100px;
  margin-top:10px;
  background-color:blue;
}

此时两个盒子之间的距离并不是30px，而是以one盒子较大的下外边距为准的20px，相反如果two盒子的上外边距较大，就生效two盒子上外边距，当两个值相同时，生效的仍然是一个值的距离

3.2.当两种元素为嵌套关系时

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并

如下展示

HTML

<div class="out">
  <div class="in"></div>
</div>

CSS

.out {
  width:300px;
  height:300px;
  background-color:red;
  margin-top:20px;
}

.in {
  width:50px;
  height:50px;
  background-color:blue;
  margin-top:10px;
}

3.3.当只有一种元素时

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起

如下展示

HTML

<div class="one"></div>

CSS

.one{
    margin-top:10px;
    margin-bottom:20px;
}

3.4.发生外边距合并时的解决方案

除了以下方法外还有其他方法，根据实际情况选择解决方案，我只会这多

 1.可以为父元素定义上边框。

2. 可以为父元素定义上内边距。

3.可以为父元素添加 overflow:hidden。

4.为元素添加浮动效果。

4.文本与图片的对齐方式

文本与图片的对齐方式是通过在img标签中添加vertical-align属性，他有三种属性值

1.text-top 文字对齐在图片的上面

2.middle 文字对齐在图片的中间

3.text-bottom 文字对齐在图片的下面

HTML

<p>
    这是一幅<img class="bottom" src="图片路径" />位于段落中的图像。
</p>

CSS

img.top {
    vertical-align:text-top;
}