1、 元素类型的转换（display属性）
Display属性
属性值：
Block
Inline
None
大部分块状元素默认的display的值为block，其中li默认的值 list-item（列表元素）
大部分内联元素默认的display值为inline，其中input默认的值为：inline-block;（行内块元素）；
内联元素里面特殊的一个：行内块元素（内联块元素）
特点：
1：可以设置宽高
2：在一行内逐个显示
3：当前元素的display的值为inline-block能支持vertical-align 属性。

2、 vertical-align属性
vertical-align:;垂直对齐。
Top
Bottom
Middle
Baseline
让一个元素在父元素里面左右上下居中：

1. 给父元素添加text-align:center;(左右居中)

2. 给当前元素添加：
   Display:inline-bolck;
   Vertical-align:middle;

3. 在当前元素后面（不要回车），添加一个空的span标签。
   给span设置样式：
   Display:inline-block;
   Width:0;
   Height:100%;
   Vertical-align:middle;

3、 css元素类型的分类总结
分类：块状元素、内联元素、可变元素
元素类型的转换：
Display属性：
属性值：
Block
Inline
Inline-book
None
List-item

行内块元素：input display为inline-blcok1

Img标签：浏览器默认解析的display值为inline

标签的嵌套规则：

1. 尽量让块状元素作为父元素存在；

2. 内联元素的子元素尽量也是内联元素；

3. P标签中不能出现h1-h6；

4. P标签和h1-h6不能互相嵌套。
   4、 图片默认的display属性值为inline，为什么图片能添加宽高？？？
   从另一个角度对所有的标签进行分类。
   分为：置换元素与非置换元素

置换元素：
典型的置换元素：img/input 依赖标签的属性或者元素自身的类型；‘
因为img是置换元素，所以能添加大小。因为置换元素在页面显示的过程中，生成一个框（框架），这个框能添加大小。
非置换元素：
不是置换元素的都是非置换元素。

5、 定位
定位：让元素的位置发生改变。
定位属性：
Position属性：设置或者检索元素定位方式。
（如果元素有了position属性，元素就知道自己要做位置移动了）
Position的属性值：（属性值是告诉元素参照物是谁）
制定坐标：left/right/top/bottom

Position的属性值：
1：position:static 【静态定位】 （position的默认值）
2：position:absolute 【绝对定位】
a. 绝对定位的参照物：
已经有定位的父元素为参照物
如果父元素都没有定位或者没有父元素，以文档为参照物
b. 绝对定位的特点：
不占据空间，脱离布局流。

1、 元素类型的转换（display属性）
Display属性
属性值：
Block
Inline
None
大部分块状元素默认的display的值为block，其中li默认的值 list-item（列表元素）
大部分内联元素默认的display值为inline，其中input默认的值为：inline-block;（行内块元素）；
内联元素里面特殊的一个：行内块元素（内联块元素）
特点：
1：可以设置宽高
2：在一行内逐个显示
3：当前元素的display的值为inline-block能支持vertical-align 属性。

2、 vertical-align属性
vertical-align:;垂直对齐。
Top
Bottom
Middle
Baseline
让一个元素在父元素里面左右上下居中：

1. 给父元素添加text-align:center;(左右居中)

2. 给当前元素添加：
   Display:inline-bolck;
   Vertical-align:middle;

3. 在当前元素后面（不要回车），添加一个空的span标签。
   给span设置样式：
   Display:inline-block;
   Width:0;
   Height:100%;
   Vertical-align:middle;

3、 css元素类型的分类总结
分类：块状元素、内联元素、可变元素
元素类型的转换：
Display属性：
属性值：
Block
Inline
Inline-book
None
List-item

行内块元素：input display为inline-blcok1

Img标签：浏览器默认解析的display值为inline

标签的嵌套规则：

1. 尽量让块状元素作为父元素存在；

2. 内联元素的子元素尽量也是内联元素；

3. P标签中不能出现h1-h6；

4. P标签和h1-h6不能互相嵌套。
   4、 图片默认的display属性值为inline，为什么图片能添加宽高？？？
   从另一个角度对所有的标签进行分类。
   分为：置换元素与非置换元素

置换元素：
典型的置换元素：img/input 依赖标签的属性或者元素自身的类型；‘
因为img是置换元素，所以能添加大小。因为置换元素在页面显示的过程中，生成一个框（框架），这个框能添加大小。
非置换元素：
不是置换元素的都是非置换元素。

5、 定位
定位：让元素的位置发生改变。
定位属性：
Position属性：设置或者检索元素定位方式。
（如果元素有了position属性，元素就知道自己要做位置移动了）
Position的属性值：（属性值是告诉元素参照物是谁）
制定坐标：left/right/top/bottom

Position的属性值：
1：position:static 【静态定位】 （position的默认值）
2：position:absolute 【绝对定位】
a. 绝对定位的参照物：
已经有定位的父元素为参照物
如果父元素都没有定位或者没有父元素，以文档为参照物
b. 绝对定位的特点：
不占据空间，脱离布局流。

display属性
inline-block 转换

　　默认情况下元素类型每个类型特点： 块状元素特点：

 1：在页面中以矩形区域显示。 

2：自上而下排列，独占一行 

3：可以直接添加宽高 

4：一般情况下，作为其他元素或内容的容器 内联元素特点：

 1：在页面中最小单位也是矩形。

 2：在一行内逐个排列。 

3：不可以直接添加宽高，大小是由内容撑开的。 

4：内联元素也符合盒模型的规则，但是个别属性会出现问题 (比如：padding-top/bottom margin-top/bottom) 

5: 内联元素在一行内排列的时候，之间有间距 怎么消除间距： 

a:添加浮动 

b:把所有的内联元素都放在一行不用回车键(不推荐使用)。

 可变元素(了解)： 根据上下文的显示，来确定这个元素是块状元素还是内联元素按按钮按钮按钮钮 哪些标签属于块 

哪些标签属于内联： 块状元素： div -最常用的块级元素 dl - 和dt-dd 搭配使用的块级元素 form - 交互表单 h1 -h6- 大标题 hr - 水平分隔线 ol – 有序列表 p - 段落 ul - 无序列表 li fieldset - 表单字段集 colgroup-col - 表单列分组元素 table-tr-td 表格及行-单元格 内联元素： a –超链接(锚点) b - 粗体(不推荐) br - 换行 i - 斜体 em - 强调 img - 图片 input - 输入框 label - 表单标签 span - 常用内联容器，定义文本内区块 strong - 粗体强调 sub - 下标 sup - 上标 textarea - 多行文本输入框 u - 下划线 select - 项目选择 

元素类型的转换： display属性： 作用：检索或者设置元素生成的盒模型类型。 常用属性值： a: display:block; 作用：将元素转成块状元素，拥有块状元素特点。 补充：大部分块状元素，默认的display的值都是block; b: display:inline; 作用：将元素转成内联元素，拥有内联元素的特点。 补充：大部分内联元素，默认的display的值inline; c: display:none; 作用：将当前标签隐藏，并不占据空间。(只作用于标签) d：display:inline-block; 大部分块状元素默认的display的值block,其中li默认的值 list-item (列表元素) 大部分内联元素默认的display的值inline,其中input默认的值 inline-block(行内块元素) 内联元素里面特殊的一个：行内块元素(内联块元素)(input是典型) 特点： 1: 可以设置宽高 2：在一行内逐个显示 3：当前元素的display的值为inlin-block 能支持vertical-align属性 vertical-align(垂直对齐)属性： top bottom middle (中线对齐) baseline (基线对齐)

通过样式转换行块级元素：
display:none; 隐藏对象
display:block; 变为块级元素/也有显示的意思
display:inline; 变为行内元素
display:inline-block; 以行内元素形式排列以块级元素样式显示

块级元素： 块级元素会占据一行的位置,它后面的元素内容会换行显示 块级元素里面可以放任何内容,主要用来布局。 
常见的块级元素：div h1-h6 ul li ol li p table form

行内元素：内联元素也叫行级元素它只占据他内容所占的位置,其它的内容在他后面显示，但是行级元素里面不能放块级元素 
常见的行内元素：a b span i del

元素类型的转换
通过样式转换行块级元素： 
display:none; 隐藏对象 
display:block; 变为块级元素/也有显示的意思
display:inline; 变为行内元素 
display:inline-block; 以行内元素形式排列以块级元素样式显示