css学习总结（二）

一，背景

1，背景颜色

background-color：颜色值

一般情况下，元素背景颜色默认值是transparent（透明），我们也可以手动指定背景为透明色。

2，背景图片

background-image：none/url

none 无背景图（默认的）

url  使用绝对或相对地址指定背景图像。

3，背景平铺

background-repeat：repeat（背景图像在纵向和横向上平铺）/no-repeat/（背景图像不平铺）repeat-x（背景图像在横向上平铺）/repeat-y（背景图像在纵向平铺）

4，背景图片位置

background-position： x y；

参数代表：x坐标和y坐标。可以使用方位名词或者精确单位。

1，参数是方位名词。

如果指定的两个值都是方位名词，则两个值前后顺序无关。比如left top和top left效果一致。如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

2，参数是精确单位。

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个y坐标。如果只指定一个数值，该数一定是x坐标，另一个默认垂直居中。

3，参数是混合单位。

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。

5，背景图像固定

background-attachment： scroll （背景图像是随对象内容滚动） |  fixed（背景图像固定）

6，背景复合写法

background：transparent   url  （image.jpg）repeat-y  fixed  top  ；

background：背景颜色，背景图片地址，背景平铺，背景图像滚动，背景图片位置。

7，背景色半透明

background：rgba（0， 0， 0.3）；

最后一个参数是alpha透明度，取值范围在0~1之间。我们习惯把0.3的零省略掉，写为background：（0 ，0， 0，.3）。注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

二，css三大特性

1，层叠性

层叠性原则：样式冲突，遵循的原则是就近原则，哪个样式离结构近就执行哪个样式。样式不冲突，不会层叠。

2，继承性

Css中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。

恰当的使用继承可以简化代码，降低css样式的复杂性，子元素可以继承父元素的样式。

行高的继承性：

body {

     font:12px /1.5  Microsoft Yahei ;

}

行高可以跟单位，也可以不跟单位。如果子元素没有设置行高，则会继承父元素的行高为1.5。此时子元素的行高是当前子元素的文字大小乘以1.5。body行高1.5，这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高。

3，优先级

当同一个元素指定多个选择器，就会有优先级的产生。选择器相同则执行层叠性，选择器不同则根据选择器权重执行。

权重由四组数字组成，但是不会有进位。类选择器永远大于元素选择器，ID选择器永远大于类选择。ID选择器大于类选择器。行内样式style大于ID选择器。!important 重要的,等于无穷大。

简单记忆为通配符和继承权重为0,标签选择器为1,类选择器为10,ID选择器100,行内样式表为1000,!important为无穷大。

继承权重为0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

三，盒子模型

1，边框

border：border-width  ||border-style ||border-color

复合写法：border（border-top）：1px solid red；没有顺序

2，细线边框

border-collapse：collapse；表示相邻边框合并

3，内边距

padding属性用于设置内边距，即边框与内容之间的距离。

padding：5px;一个值代表上下左右都有五像素内边距。

padding:5px 10px;两个值代表上下内边距是5像素，左右内边距是十像素。

padding:5px 10px 20px;三个值代表上内边距五像素，左右内边距十像素，下内边距20像素。

padding:5px 10px 20px 30px;四个值上是5像素，右十像素，下20像素。左30像素。顺时针。

4，外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

外边距可以让块级盒子水平居中，但必须满足两个条件。

1，盒子必须指定了宽度。

2，盒子左右的外边距都设置为auto。

行内元素或者行内块元素水平居中，给其父元素添加text-align：center即可。