定位相关内容

1.块级标签总结：本身具有display：block;属性, 具有盒模型特征（默认可以设置宽度、高度、padding、margin、border）可以设置上下左右的内边距和外边距

  常见的块级标签：div p h1-h6 ul li ol dl dt dd hr

  块级标签共有的特点：

  特点：

  1.在没有设置宽度和高度的情况下，宽度跟父元素的宽度一样，高度由内容撑开

  2.垂直布局，独立成行（一个标签占一行）

  3.可以设置宽高、内间距、外间距、边框

2.行级标签总结：本身具有display：inline;属性称为行级标签

  常见的行级标签：span a b strong em i del sup sub

  行级标签共有的特点：

  特点：

  1.宽度和高度由内容撑开

  2.水平布局，在一行显示，一行放不下会自动折行

  3.可以设置 边框、内间距

  4.不能设置宽高  5.不能设置上下外间距，只能设置左右的外间距

  6.行内元素只能容纳文本或者其他行级元素（此处请注意，不要在行级元素中嵌套块级和行内块元素)

3.行内块标签：

  本身具有display：inline-block;属性称为行内块标签

  常见的行级标签：img  input(表单)

  行内块标签共有的特点：

  特点：

  1.可以设置宽高的

  2.水平布局，在一行显示，一行放不下会自动折行

  3.具有盒模型特征（默认可以设置宽度、高度、padding、margin、border）可以设置上下左右的内边距和外边距。可以设置 边框、内间距、外间距

  4.换行和空格会被解析

4.浮动的特点：

 1.元素浮动后不占位，脱离正常标准流，不脱离文本流

 2.元素浮动后不占位,导致父元素高度塌陷(高度为0)，影响后续布局

 3.如果浮动元素的宽度之和大于父元素，则浮动盒会被挤到下一行

 4.使行级标签支持宽高

 5.提升层级

5.图片居中的方法：

1.给图片的父元素设置水平居中，text-align: center;这时图片充当文本

2.转成块级标签 设置  margin: 0 auto;

  因为必须是块级标签才能实现水平居中