CSS概述（二）

目录

• CSS背景属性
  • 设置背景颜色 background-color
  • 设置背景图像 background-image
  • 设置背景重复 background-repeat
  • 设置背景定位 background-position
  • 设置背景关联 background-attachment
  • 设置背景图片大小 background-size
• CSS三大特性
  • 继承性
  • 层叠性
  • 优先级
• CSS盒子模型/框模型
  • 内边距padding
  • 边框border
  • 外边距margin

CSS背景属性

设置背景颜色 background-color

background-color 不能继承，其默认值是 transparent。

设置背景图像 background-image

background-image 属性的默认值是 none，表示背景上没有放置任何图像。

如果需要设置一个背景图像，必须为这个属性设置一个URL值,例如

body {background-image::url(https://files.cnblogs.com/files/chinono/bg.bmp);}

设置背景重复 background-repeat

属性值repeat导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样，默认值为repeat,共有以下几种值:

• repeat 默认。背景图像将在垂直方向和水平方向重复
• repeat-x 背景图像将在水平方向重复
• repeat-y 背景图像将在垂直方向重复
• no-repeat 背景图像将仅显示一次
• inherit 从父元素继承background-repeat属性的设置

设置背景定位 background-position

利用background-position属性改变图像在背景中的位置。关键字既可以是具体长度值(xx px)，也可以是方位名词(center right left top botttom),也可以是百分比(xx%)。background-position 的默认值是 0% 0%，在功能上相当于 top left。而 50% 50%等价于图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐，即center center。

 background-position:66% 33%;
 background-position:50px 100px;
 background-position:top right;

设置背景关联 background-attachment

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。通过 background-attachment 属性防止这种滚动，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响。

backgournd-attachment:fixed;

设置背景图片大小 background-size

规定背景图像的尺寸。有以下值:

• 长度值 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
• 百分比 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
• cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
  
  背景图像的某些部分也许无法显示在背景定位区域中。
• contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。最终图像会被包含在父元素中。

CSS三大特性

继承性

子元素会继承父元素部分属性。可继承的属性比如有字体类属性（字体颜色、字体大小之类的）、文本类属性（行高之类的）、背景类属性（背景颜色之类的）（要注意子标签不会继承父标签的宽度、高度、边距属性。）

层叠性

层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。层叠性主要遵循的原则是就近原则，在不考虑优先级的情况下，在多个样式中最终生效的样式是离标签最近的样式。

优先级

当多个选择器选择同一个元素并设置相同属性时，会根据优先级来决定该元素的属性:

权重比较

选择器	权重值
一个标签选择器	0,0,0,1
一个类、伪类选择器	0,0,1,0
一个ID选择器	0,1,0,0
一个行内样式	1,0,0,0
!important	∞

• 权重之间无法进位，权重从左到右降低
• 继承的权值为0！
• 对于复合选择器，权值进行累加

选择器	权重值
div ul li	0,0,0,3
.nav ul li	0,0,1,2
a:hover	0,0,1,1
.nav a	0,0,1,1
#nav p	0,1,0,1

CSS盒子模型/框模型

CSS框模型(Box Model)规定了元素框处理元素内容、内边距、边框 和 外边距的方式。

经常使用以下声明来覆盖浏览器默认样式：

* {
  margin: 0;
  padding: 0;
}

内边距padding

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。注意在使用padding时若所在元素具有宽度，则会撑大盒子！

边框border

border属性允许你规定元素边框的样式、宽度和颜色。

• border 简写属性，用于把针对四个边的属性设置在一个声明。
• border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。常用键对值如下:
  1. none 定义无边框。
  2. hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
  3. solid 定义实线。
  4. inherit 规定应该从父元素继承边框样式。
• border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
• border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。

外边距margin

围绕在元素边框的空白区域是外边距，设置外边距会在元素外创建额外的“空白”。注意外边框合并的情况，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。





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