DAY2

CSS重要基础知识

一. CSS盒模型

盒模型概述：

– 盒模型规定了元素框处理元素内容、内边距（padding）、边框（border）、外边距（margin）的方式 。
– 背景应用于由内容、内边距、边框组成的区域。
– 内边距、边框、外边距都是可选的，默认值为零，可应用与元素的所有边或者单独的一个边。内边距不可以取负值，外边距可以取负值。
– 在CSS样式中，width、height指的是元素内容的宽和高。增加内边距、边框、外边距不会影响内容的尺寸但是会影响元素框的总尺寸。
– 标准盒模型 宽度=2 *(margin+ padding)+content(大小有width、height属性设置) 。
– 替代盒模型 宽度（大小由width、height属性设置）=2 *(margin+ padding)+content。设置替代盒模型：{ box-sizing:border-box;}

内边距（padding）

CSS padding 属性定义元素边框与元素内容之间的空白区域。

1. 三种不同的设置方式
   (1)设置元素的各个边都有10px的内边距

   	h1 { padding:10px; }
   

   (2)按照上、右、下、左顺时针的顺序设置各边的内边距，可以使用不同的单位。百分数值是按照元素的父级元素的width来计算。注：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

    h1 { padding:10px 0.25em 2ex 10%; }
   

   (3) 使用单边内边距属性

   	h1 {
   		padding-top:10px;
   		padding-ringht:0.25em;
   		padding-bottom:2ex;
   		padding-left:10%;
   		}
   

边框（border）

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

1. 宽度
   -通过border-width为边框设置宽度
   -通过单边宽度属性border-top/right/bottom/left-width分别设置元素各个边框的宽度
   -宽度值为指定长度(px)或者使用关键字thin、medium（默认值） 和 thick。
   即使指定了边框宽度，在边框样式为none时，元素依然是没有边框的，如果希望边框出现，必须指定边框样式
2. 样式
   -CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。也可以为一个元素设置多种边框，还可以使用单边边框样式属性为元素的某个边设置边框样式。
3. 颜色
   CSS 使用一个简单的 border-color 属性为边框设置颜色，它一次可以接受最多 4 个颜色值。
   -可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值
   -单边边框颜色属性:border-top/left/bottom/left-color
   -透明边框   CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。

外边距（margin）

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

1. 设置外边距
   (1). 使用margin属性设置外边距

h1 { margin : 0.25in; }
h1 { margin : 10px 0px 15px 5px; }
p { margin : 10%; }

(2). 使用单边外边距属性

	h2 {
	  margin-top: 20px;
	  margin-right: 30px;
	  margin-bottom: 30px;
	  margin-left: 20px;
	  }

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