CSS中的自闭标签及行业元素、块元素

自闭标签

<meta/>	头部元素
<base/>	标签为页面上的所有链接规定默认地址或默认目标。
<br/>	换行
<hr/>	分隔线
<area/>	标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像)。area 元素总是嵌套在
<img/>	图片
<input>	输入框
<link/>	链接
<param/>	插入 XHTML 文档的对象规定 run-time 设置
<col/>	表格中一个或多个列定义属性值
<frame/>	frameset中的一个特定的窗口
<object/>	或者标签提供参数
<embed/>	HTML5 中新增的,标签定义了一个容器，用来嵌入外部应用或者互动程序（插件）
<keygen>	该对象提供了一个安全的方式来验证用户。
<source>	标签为媒体元素（比如 和 ）定义媒体资源。

---

块元素

块元素的特性

独霸一行，总是在新行上开始
宽度缺省是它父级元素的100%，除非设定一个宽度
高度、行高、外边距、内边距都可以设置
可以容纳其他内联元素或者其他块元素

缺点：1.相邻元素垂直。相邻外边距会重叠。margin-bottom和margin-top重叠（重叠之后的值是两个值中的最大值）
第一种解决方案：原理bfc相关
2.父子的相邻，父元素的margin-top和子元素的margin-top发生重叠 （重叠之后的值是两个值中的最大值）
关于父子相邻的解决方案：
第一种解决方案.取消相邻，给父元素设置border或者padding-top 让相邻之间有间隔。
第二种解决方案，父元素加overflow:hidden属性 – 原理bfc相关

---

行内元素

块元素的特性

和其他元素都在一行上，遇到父级元素边界会自动换行
高、行高以及内外边距都不可以改变
宽度与内容一样宽，且不可改变
行内元素只能容纳文本或者其他行内元素
对于行内元素，需要注意的是：设置宽度width无效，设置高度无效，可以通过设置line-height来设置，设置margin只有左右有效，上下无效，设置padding只有左右有效，上下无效

下面是我们常用的一些行内元素

<a>	锚点
<b>	字体加粗
<big>	大号字体
<small>	小号字体
<br>	换行
<i>	斜体
<img>	图标
<label>	input元素标注
<select>	单选或多选菜单
<input>	输入框
<textarea>	多行文本输入框
<span>	组合文档行内元素
<strong>	强调内容
<em>	定义为强调内容
<sub>	定义上标
<sup>	定义下标

这里要强调一点，我们必须要记住这些行内元素，这里写下几句便于记忆行内元素的语句。

字体大小要加粗，
组合图像输入框，
锚准斜体的菜单，
强调换行上下标

两个行内元素在一起，会出现一定的间距，即使将border、padding、margin都设置为零也无济于事，那么怎么才能去除这些间距呢？
1.重设字体 将行内元素的直接父级设置font-size=0px;再给行内元素设置字体大小就可以解决。 2.借助HTML注释 在两个行内元素之间加入HTML注释，告诉浏览器这中间不是换行也不是空格，而是连接在一起的，这样也可以解决。

---

行内块元素

行内块元素的特性

元素排列在一行
宽度默认由内容决定
元素间默认有间距
支持宽高、外边距、内边距的所有样式的设置