CSS学习总结（4）——盒模型/背景属性

CSS盒模型

CSS盒模型是网站的设计和布局。 由边距(margin)，边框(border)，填充(padding)和实际内容组成。属性以相同的顺序工作：顶部(top)，右侧(right)，底部(bottom)和左侧(left)。属性工作顺序为顺时针，以上右下左的顺序。

元素的总宽度

• 带有填充(padding)的盒的总宽度将是宽度加上填充左侧(padding-left)和填充右侧(padding-right)的总和。
• 使用CSS设置元素的宽度和高度属性时，可以设置内容区域的宽度和高度。
• 在盒模型中设置背景颜色时，将覆盖内容区域以及填充区域(padding)。

元素的总高度

元素的总高度的计算方式与宽度相同。

• 总元素高度 = 高度(height) + 顶部填充(padding-top) + 底部填充(padding-bottom) + 顶部边框(border-top) + 底部边框(border-bottom) + 顶部边距(margin-top) + 底部边距(margin-bottom)

border属性

CSS的border属性允许自定义HTML元素的边框。为了向元素添加边框，需要指定边框的大小，样式和颜色。

p{
    padding: 10px;
    border: 6px solid orange;
}

• border宽度
  border的属性可以单独设置。border-width属性指定边框的宽度。

p {
   padding: 10px;    
   border-style: dotted;
   border-width: 6px;
}

• border 颜色
  可以使用颜色名称关键字，RGB或十六进制值定义元素的边框颜色。
• border-style
• 默认值是none，它没有定义边界。边框样式属性支持各种样式：虚线(dotted)，虚线(dashed)，双精度(double)等。 在CSS中，可以使用以下属性为不同的边指定不同的边框：border-top-style，border-right-style，border-bottom-style 和 border-left-style。

CSS 宽度和高度

宽和高设定为100px

div {
   border: 5px dotted blue;    
   width: 90px;
   height: 90px;
}

• 要设置元素的最小和最大高度或者宽度，可以使用以下属性：
  min-width - 元素的最小宽度
  min-height - 元素的最小高度
  max-width - 元素的最大宽度
  max-height - 元素的最大高度

background-color属性

background-color属性用于指定元素的背景颜色。

• 颜色名称关键词：red、blue等；
• 十六进制值：#fff、#000、#6e6e6e等；
• RGB：rgb(255,255,255)、rgba(0,0,0,0.5)等（使用rgba可以实现透明背景色）；

background-image属性

background-image属性在元素中设置一个或多个背景图像。 默认情况下，背景图像放置在元素的左上角，并且垂直和水平重复以覆盖整个元素。 要指定多个图片，只需用逗号分隔设置多个url( )属性就可以了。

div {
    border: 5px dotted blue;    
    width: 90px;
    height: 90px;
    background-image: url(09a826a1ce5d0edba28cf3a459c516c0.jpg);
 }

background-repeat属性

background-repeat属性指定如何重复背景图像。 背景图像可以沿水平轴，垂直轴，两个轴重复，或者根本不重复。repeat-x只会水平重复背景图像。repeat-y只会垂直重复背景图像。如果你的背景图片只想使用一次，请使用no-repeat

• 当background-repeat属性设置为inherit时，它将采用与元素父级的属性相同的指定值。如果只在body上设置background-repeat:repeat-x;。同时设置段落的background-repeat为inherit，它们将采用与body元素相同的属性值。

background-attachment属性

background-attachment属性设置背景图像是固定的还是与页面的其余部分一起滚动。
background-attachment属性的参数：

• scroll：默认值。背景图像会随着页面其余部分的滚动而移动。
• fixed：当页面的其余部分滚动时，背景图像不会移动。 设置了fixed属性后，即使元素具有滚动机制，背景图像会固定在某个位置不会跟随页面元素滚动。
• inherit：规定应该从父元素继承 background-attachment 属性的设置。