第六章 元素类型

1.css元素类型的分类：
　　块状元素、内联元素（行内元素）、可变元素（行内块元素）
2.元素类型特点
　　块状元素：
　　　　1）在页面中以矩形区域显示
　　　　2）自上而下排列，独占一行
　　　　3）可以直接添加宽高
　　　　4）一般情况下，作为其他元素或内容的容器
　　内联元素：
　　　　1）在页面中最小单位也是矩形。
　　　　2）在一行内逐个排列
　　　　3）不可以直接添加宽高，大小由内容撑开。
　　　　4）内联元素符合盒模型规则，但是个别属性会出现问题（padding-top/bottom和margin-top/bottom)
　　　　5)内联元素在一行内排列时有间距。
　　　　　　（消除方法：
　　　　　　　　　　a.添加浮动
　　　　　　　　　　b.把所有的内联元素都放在一行不用回车键）
　　可变元素：
　　　　根据上下文显示，来确定这个元素是块状元素。

3.元素类型分类
　　1)块状元素：
　　　　div
　　　　dl 和dt dd搭配使用的块级元素
　　　　form-交互表单
　　　　h1-h6-大标题
　　　　hr-水平分割线
　　　　ol-有序列表
　　　　p-段落
　　　　ul-无序列表
　　　　li
　　　　fieldest-表单字段集
　　　　colgroup-col-表单列分组元素
　　　　table-tr-td-表格及行-单元素
　　2)内联元素：
　　　　a-超链接（锚点）
　　　　b-粗体
　　　　br-换行
　　　　i-斜体
　　　　em-强调
　　　　img-图片
　　　　input-输入框
　　　　label-表单标签
　　　　span-常用内联容器，定义文本内区块
　　　　strong-粗体强调
　　　　sub-下标
　　　　sup-上标
　　　　textarea-多行文本输入框
　　　　u-下划线
　　　　select-项目选择
　　3)内联块元素:
　　　　input-输入框
4.元素类型的转换
　　display属性：（检索或设置 元素生成盒模型类型）
　　　　1）display:block; 将元素转成块状元素，拥有块状元素的特点
　　　　　　注：大部分块状元素，默认的display值为block
　　　　2）display:inline; 将元素转为内联元素，拥有内联元素的特点。
　　　　　　注：大部分内联元素，默认的display值为inline.
　　　　3）display:none; 将当前元素隐藏并不占据空间
　　注：导航项的宽高尽量放在a上
　　　　大部分块状元素默认的display的值为block，其中li默认的值为list-item（列表元素）
　　　　大部分内联元素默认的display的值inline,其中input默认的值为inline-block(行内块元素）

内联元素中特殊的一个：行内块元素（内联块元素）
　　特点:
　　　　1.可以设置宽高
　　　　2.在一行内逐个显示，默认情况下有间距
　　　　3.只有当前元素的display值为inline-block时能支持
　　　　vertical-align属性
　　　　vertical-align: ;垂直对齐
　　　　　　top
　　　　　　bottom
　　　　　　middle
　　　　　　baseline
让一个元素在父元素里左右上下居中：
　　1.给父元素添加text-align:center（保证元素左右居中）
　　2.给当前元素添加
　　　　display:inline-block;
　　　　vertical-align:middel;
　　3.在当前元素后（不回车）添加一个空的span。
　　　　给span设置样式：
　　　　　　display:inline-block;
　　　　　　width:0;
　　　　　　height:100%; (需要与父元素同高才能确定中线）
　　　　　　vertical-align:middle;
行内块（内联块）元素代表标签：
　　input
　　image
注：img标签：
　　img当做行内块使用，特殊的存在：拥有行内块的特点
　　浏览器默认解析的display值为inline.

标签的嵌套规则：
　　1.尽量让块状元素作为父元素（容器）存在
　　2.内联元素的子元素尽量也是内联元素
　　3.p标签中不能出现h1-h6
　　4.p标签，h1-h6不能互相嵌套

从另一个角度对所有标签进行分类
　　1.置换元素：
　　　　典型的置换元素：img/imput 依赖标签的属性或元素自身类型，来决定当前元素在页面中显示的状态。
　　　　因为是置换元素所以能添加大小。因为置换元素在显示过程中。生成一个框架，这个框可添加大小。
　　2.非置换元素：
　　　　不是置换元素的都是非置换元素。