005 Python前端之元素类型

元素的分类

1. 块状元素
2. 内联元素
3. 可变元素

块级元素特点

1. 块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，

2. 默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。

3. 块状元素都可以定义自己的宽度和高度。

4. 块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。

内联元素（inline element）（或是行内元素）

内联元素三大特点：

1. 内联元素的表现形式是始终以行内逐个进行显示；

2. 内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度和宽度来确定，它的只能根据所包含内容的高度最小内容单元也会呈现矩形形状；

3. 内联元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但个别属性不能正确显示;(padding-top:;margin-top/bottom:;)

常见的块级元素、内联元素

块级元素:     div -最常用的块级元素     dl - 和dt-dd 搭配使用的块级元素     form - 交互表单     h1 -h6- 大标题     hr - 水平分隔线     ol – 有序列表     p - 段落     ul - 无序列表内联元素：     a –超链接（锚点）                                   br - 换行                                 i - 斜体     em - 强调                                            label - 表单标签                      span - 常用内联容器，定义文本内区块     strong - 粗体强调     textarea - 多行文本输入框     select - 项目选择   --行内块元素--       img - 图片                             input - 输入框   display-inline-block

元素的转变

元素类型的转换

1. 需要根据上下文关系确定该元素是块元素或者内联元素

2. 盒子模型可通过display属性来改变默认的显示类型

display属性和属性值(18个属性值)

属性值：block/inline/inline-block/none作用：该属性设置或检索对象元素应该生成的盒模型的类型各属性值的作用：1)block块状、显示：类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。(将元素转为块状元素，使该元素拥有块状元素的特点；)2)inline内联、显示：在元素后面删除换行符，多个元素可以在一行内并列显示。（元素转换为内联元素）3)inline-block行内块元素显示：元素的内容以块状显示，行内的其他元素显示在同一行。img,input(行内块元素)。4)none 此元素不会被显示。

基本类型

1. 大部分块元素display属性值默认为block2. 大部分内联元素的display属性值默认为inline,其中img,input，默认为inline-block（行内块元素）