CSS笔记（二）

五、CSS框架模型（盒子模型Box Model）

1. 概述

提示：背景应用于由内容和内边距、边框组成的区域。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表（浏览器默认的样式）设置外边距和内边距。最好通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。
这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {
  margin: 0;
  padding: 0;
}

2. 内边距

2.1. 内边距属性（padding）

CSS padding 属性定义元素边框与元素内容之间的空白区域。
包括上、右、下、左四个方向的内边距。顺时针

• 如果是四个值：依次是上、右、下、左。

h1 {padding:10px 5px 15px 20px;}

• 如果是三个值：依次是上、（右、左）、下。

h1 {padding:10px 5px 20px;}

• 如果是两个值：依次是（上、下）、（右、左）。

h1 {padding:10px 5px;}

• 如果是一个值：（上、下、左、右一样）。

h1 {padding:10px;}

CSS中所有对内边距、边框、外边距的设置都遵从该规则。

2.2. 单边内边距属性（padding-）

padding-top
padding-right
padding-bottom
padding-left

2.3. 内边距的百分比数值

百分数值是相对于其父元素的 width计算的。
注意：上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

p {padding: 10%;}

3. 边框（border:solid 2px black）

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。每个边框有 3 个方面：宽度、样式、颜色。 设置属性值规则都和内边距一样。
这三方面可以一句话写：border:solid 2px black;简洁

3.1. 边框样式（border-style）

• border-style：
  
• 单边边框样式属性：
  border-top-style
  border-right-style
  border-bottom-style
  border-left-style

3.2. 边框宽度（border-width）

• 两种方法：
  指定长度值，比如 2px 或 0.1em；
  使用 3 个关键字之一： thin 、medium（默认值） 和 thick。
• 定义单边边框的宽度
  border-top-width
  border-right-width
  border-bottom-width
  border-left-width
• 去除边框
  border-style: none;

注意：由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式。

3.3. 边框颜色（border-color）

border-color 属性用于设置边框的颜色。可以单独单边边框的颜色。

3.4. 边框透明（border-color:transparent;）

从某种意义上说，利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。
比如：正常不显示，鼠标点击时才显示边框。

4. 外边距（margin）

margin 属性接受任何长度单位，可以是像素、英寸、毫米、 em、百分百（相对于父元素的width计算的）。
margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。

5. 外边距的合并（仅是垂直方向。项目中的一些bug可能与合并有关）

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

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

如果里面div页边距加高度超过外面div的高度，外面div不会变大，可以使用min-height。

六、定位

1. 块级元素和行内元素（转换display）

• 块级元素 ： div、h1、p
• 行内元素 ： span a
  width、height只对块级元素起作用。

<!--块级元素变行内元素-->
<div id="div1">111</div>
<div id="div2">222</div>
<div id="div3">333</div>
		
<!--行内元素 变块级元素-->
<div id="line2div">
	<a href="#"> 超链接1</a>
	<a href="#"> 超链接2</a>
	<a href="#"> 超链接3</a>
</div>

#div1,#div2{
	width: 200px;
	height: 200px;
	border: solid 1px black;
	background-color: green;
	margin: 50px;
	display: inline;  /*块级元素转换为行内元素*/
}
			
#div3{
	display: none; /*不显示*/
}
a{
	display: block;  /*行内元素 变块级元素*/
	width:100px;
	height: 60px;
	background: red;	
}

2. 定位（position，默认：普通流定位）

CSS 有三种基本的定位机制：普通流（从上往下排）、浮动和绝对定位。
position 属性值的含义：

• static：块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
• relative：相对定位。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
• absolute：绝对定位。原来位置不存在了。元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
• fixed：绝对定位。元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。窗口滑动时，这个块是固定不动的。

2.1. 普通流定位

块级框从上到下一个接一个地排列。
行内框在一行中水平布置。

2.2. 相对定位（relative 相对于它本来应该在的位置偏移，并且原本的位置还在）

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

2.3. 绝对定位（absolute 相对于祖先定位,原本应该在的位置被删除）

绝对定位的元素框从文档流完全删除，并相对于其包含块定位。
相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过z-index 属性来控制这些框的堆放次序。正常时框2在上面，可以对div2设置 z-index=-1，使得框2在下面。

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

• z-index
  

2.4. fixed：绝对定位。(相对祖先定位，且不会滚动)

元素框的表现类似于将 position 设置为 absolute，不过他不会随窗口滚动而上移，固定不动的效果。

3. 浮动（float 响应式布局的原理就是浮动机制）

3.1. CSS float属性

• 当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
  
• 当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。浮动和绝对定位一样都不在文档流中（没有它的位置），所以框2会上移，且被框1覆盖。但里面的内容被挤到下面。

<div id="div1">框1</div>
<div id="div2">框2</div>
<div id="div3">框3</div>

div{
	width: 200px;
	height: 100px;
	border: solid 1px black;
	background-color: pink;
}
#div1{
	float: left;
}
#div2{
	text-align: center;
	color: red;
}

• 把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
  
• 如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”
  

3.2. 行框和清理（clear）

• 图像是左浮动，下面的文本流将环绕在它右边
  
• 可以通过clear清除掉浮动效果

p{
	clear: left;  /*左边有浮动,不让它起作用,清除掉*/
}

坑：当一个div里的内容左右浮动，给此div加背景色会不显示，div会在上面一点点空间看不到，需要清除浮动。

• 例子：
  
  

清除浮动

方法一、clear: both;（一个div就在内部加，下面div被覆盖就在下面的div里加）

方法二：外面的div也加上float（都放在一个平面上，不建议此方法，不要改容器）

#clearFloat {
	background-color: pink;
	border: solid 4px black;
	float: left;
}