前端学习（三、改变元素位置方法与浮动）

html元素分类

html元素分为两大类：
块元素：
1.独占一行，有宽高。如：div。
2.如果默认不设宽，宽度会是父元素的100%。

内联元素：
1.不独占一行，无宽高。如：span.
2.内联元素可以设置margin，padding，但只在水平方向有效。
3.宽高不可设。

元素一行排不开会自动换行。
元素默认不设高，高度为零，里面有子级的。高度由子级决定。

浮动：

div {float:left; 或 float:right;}

作用： 让块元素在一行上显示。
实现： 希望哪几个元素在一行显示，就要给哪几个元素加浮动。

<div style="background-color:red;height: 27px;width:27px;float:left;"></div>
<div style="background-color:blue;height: 27px;width:27px;float:left;"></div>

存在问题：

1. 浮动元素不占位置
造成元素重叠，加了浮动的元素会遮盖之后的元素

2. 浮动元素脱离文档流
在父元素没有设置高的情况下，子元素撑不起父元素的高度。（盒子塌陷问题）

解决方案：

1.引入清除浮动块

<div style="background-color:red;height: 27px;width:27px;float:left;"></div>
<div style="background-color:blue;height: 27px;width:27px;float:left;"></div>
<div style="clear:both;"></div>

清除浮动造成的影响，哪个元素浮动就在哪个元素后加一个div，添加样式clear:both;。注：只清并列元素的浮动。

例外：浮动的元素宽度默认不能继承父级，在不给定宽的情况下，宽度由子级决定。

改变元素位置方法：

1.margin(外边距)：

div {margin-left:10px;margin-right:10px;margin-top:10px;margin-bottom:10px;}

作用： 通过设置元素的上下左右外边距的大小来调整元素自身的位置。
简写：

1. margin： 10px 10px 10px 10px ;
   分别为上，右，下，左，顺时针方向。
2. margin： 20px 30px 40px;
   上边距20px,左右边距30px,下边距40px。
3. margin: 10px 20px;
   上下边距为10px,左右边距为20px。
4. margin: auto 0px auto 0px;
   上下居中。
5. margin:0px auto 0px auto;
   左右居中
6. margin:auto;
   居中

存在问题：
margin垂直方向会合并

1. 子父级margin-top会合并为一个，取其中较大值。
2. 同级相邻元素的margin-top与margin-bottom会合并，取双方较大的值的一方。

注：注意浮动元素或者有绝对定位的元素不会发生margin合并的行为。

2.padding(内边距)：

<div style="padding-top:10px;padding-bottom:10px;padding-left:10px;padding-right:10px;"></div>

作用： 通过调整padding可以改变子元素的位置。
简写： 与margin相同。
存在问题： 父级起作用，盒子会撑开。
解决方法： 需要主动减去对应的宽和高。

3.position(元素定位)：

position规定元素的定位分别为：

1. position:absolute (绝对定位)

实现： 想改变谁的定位给谁加。（不占位置，脱离文档流）
特点： 绝对定位的元素，默认参照物是离它最近的有定位的父元素如果父元素没有定位，则会逐级寻找有定位的元素，倘若没有定位元素则会以body为参照物。

2.position:relative (相对定位)

实现： 想以谁当参照物就给谁加相对定位。（占位置，不脱离文档流）

3.position:fixed (固定定位)
实现： 以浏览器为参照物。（不占位置，脱离文档流）

注：所有的定位元素都可以当参照物，在使用相对定位与绝对定位时可根据需求使用。如果不想改变元素位置就使用相对定位，如果想改变当前元素的位置则使用绝对定位。