盒子模型、浮动

1.盒子模型

html中所有的标签都是盒子。

盒子的宽度和高度：

内容的宽度和高度：
	通过width和height设置
元素的宽度和高度：
	边框+内边距+内容
元素空间的宽度和高度：
	边框+内边距+内容+外边距

盒子的box-sizing属性：

这个属性保证了我们在给盒子增加padding和border属性后，盒子元素的宽度
和高度不变。

取值：
	1.border-box：
	元素的宽高：内容+内边距+边框
	2.content-box：
	元素的宽高=width、height

可以用margin：0，auto；让里面的盒子在外面的盒子内水平居中。

盒子居中和内容居中

text-align：盒子中的内容居中；
margin：0，auto；：盒子自己水平居中。

清空默认边距方法：
通配符选择器：

格式：*{
			margin:0;
			padding:0;
			}

2.行高：一行内容的高度，与盒子的高不一样。

line-height  文字在行高中是默认垂直居中的。

排版：

标准流：
浮动流：float：left/right/none;

3.浮动元素的脱标：浮动元素脱离标准流

前面的元素浮动，就会把它从标准流中删除，然后把后面的元素搞上来，最后前面的元素再去浮动。

注意：
	1.相同方向上的元素，先浮动的在前面，后浮动的在后面。
	2.浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定。

4.浮动元素的贴靠现象

当父元素总够放下所有元素时，他就会正常排列，若放不下，就会往上一个贴靠。

5.浮动元素的字围现象

图文显示，前面的浮动元素会盖住后面的元素，但不会盖住后面元素里面的文字。

6.浮动元素的高度问题

标准流中的内容的高度可以撑起父元素的高度。
浮动流中浮动的元素是不能撑起父元素的高度。

7.清除浮动

方式一：给前面的父元素设置高度，这样父元素才不会消失，会占空间。

方式二：给后面的元素增加clear属性。
	clear属性的值：
		none：默认取值，按照浮动的排序规则排列
		left:不要找前面的左浮动元素
		right：不要找前面的右浮动元素
		both：不要找前面的左右浮动元素
	注意：margin遇到clear属性会失效

方式三：隔墙法（不常用）：
	外墙法：
		给两个盒子中间加一个额外的块级元素
		这个块级元素设置两个class属性，一个用于控制高度。
		另一个用于添加一个clear：both；属性
		
		注意点：外墙法可以让下面的盒子使用margin-top属性
				但是不可以让上面的盒子使用margin-bottom属性
	内墙法：
		在第一个盒子中所有子元素之后增加一个额外的块级元素
		给这个块级元素添加一个clear：both；属性

		注意点：外墙法可以让下面的盒子使用margin-top属性
				也可以让上面的盒子使用margin-bottom属性

	内外墙法的区别：
		内墙法可以撑起第一个盒子的高度，外墙法不行。


方式四（ie6中无效）：通过伪元素选择器在第一个盒子中所有子元素之后增加一个额外的
		块级元素并且内容为空。

方法五（ie6中无效）：给第一个盒子设置overflow：hidden；属性

overflow：hidden；的作用：
	1.可以将超出标签范围的内容裁减掉
	2.清除浮动
	3.可是给外面的盒子设置overflow：hidden；使得就算给里面的盒子设置
	margin-top外面的盒子也不会被顶下来

8.伪元素选择器

作用：在指定标签的内容前面后者后面添加子元素。

格式：

标签名称：：before{
			属性名称：值；
			}

标签名称：：after{
			属性名称：值；
			}

隐藏添加的子元素：visibility：hidden；