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属性值默认为block

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