浏览器的默认样式，内联元素，修改元素的性质，文档流，浮动

浏览器的默认样式

我们浏览器默认的样式的有8个外边距和内边距，我们可以通过以下的代码 清除浏览器的默认样式

		*{
			margin: 0;
			padding: 0;
		}

内联元素的盒模型

常见的内联元素有 ：span、a、img、iframe
内联元素不能设置width和height
设置水平内边距,内联元素可以设置水平方向的内边距
水平外边距，内联元素支持水平方向的外边距
为右边的元素设置一个左外边距
水平方向的相邻外边距不会重叠，而是求和
内联元素不支持垂直外边距

修改元素的性质

display：可以修改是块元素、内联元素、行内块元素
我们不能为行内元素设置width、height、 margin-top和margin-bottom。
我们可以通过修改display来修改元素的性质。
可选值：

• block：设置元素为块元素
• inline：设置元素为行内元素
• inline-block：设置元素为行内块元素
• none：隐藏元素（元素将在页面中完全消失）

visibility

visibility属性主要用于元素是否可见
和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖
可选值：

• visible：可见的
• hidden：隐藏的

overflow

属性规定当内容溢出元素框时发生的事情
可以通过overflow来控制内容溢出的情况。

可选值：

• visible：默认值
• scroll：添加滚动条
• auto：根据需要添加滚动条（智能添加）
• hidden：隐藏超出盒子的内容，直接切掉超出的部分

文档流（网页）

特点：
块元素：

• 1、独占一行，自上向下排列
• 2、宽度默认占父的100%（auto）
• 3、高度默认被内容撑开，内容有多高它就有多高

内联元素：

• 1、只占自身大小，从左向右排列，自动换行，继续从左向右排列
• 2、宽高默认都被内容撑开

浮动

float:使元素脱离原本的文档流，在父元素中浮动起来
可选值：

• none：不浮动
• left： 向左浮动
• right：向右浮动

块级元素和行内元素都可以浮动，

• 当一个行内元素浮动以后将会自动变成一个块级元素
• 当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元素时我们会为其设置一个宽度
• 当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕 在元素的周围。
  浮动会使元素完全脱离文本流，也就是不再在文档中在占用位置。
• 元素设置浮动以后，会一直向上漂浮直到遇到父元素的边界或者其他 浮动元素。
• 元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度。也 就是浮动元素不会撑开父元素。
• 浮动元素默认会变为块元素，即使设置display:inline以后其依然是个 块元素。