元素的类型分类

在css2中元素类型分类有三种： 块级/块元素 ，行内/内联元素 ，可变元素

1.块级元素

常用的块级元素有div，p，h1~h6，ul>li

块级元素通常都是以一个盒子的样式在浏览器中显示的

块级元素是可以直接设置宽高大小的

块级元素默认独占一行的（显示只有当前设置的宽高大小）

块级元素默认是从上到下排列的

作用：块级元素用来嵌套其他元素或者是行内元素作为一个盒子用来布局的

2.行内元素

常用的行内元素有a,span,i

行内元素是无法直接设置宽高大小的，宽高大小由自身的内容决定

行内元素默认在一行内逐个显示的（即从左到右排列）

常见的bug：在行内元素中设置margin-top/bottom会失效，依然是遵循盒模型的布局规则的

3.可变元素

button

行内块元素

可以设置宽高大小 （input属于块级元素）

input标签在一行内逐个显示（行内元素）

总结：同时拥有块级元素和行内元素的特点

块级：直接设置宽高

行内：在一行内逐个显示

常见的额行内块元素：input img textarea select

常见的那些标签自带边框：input，textarea select hr

textarea：多行文本域（网站的意见建议）

select：（选择出生日期，省份）

行内块的一些注意点：所有的行内块对齐方式都是以基线对其的（页面布局问题）

解决行内块元素对齐的问题：vertical-align：top bottom middle

置换元素

如果没有设置宽高大小的时候有自己的初始样式

可以根据元素中的属性的改变，从而在浏览器上显示的样式也发生改变

总结：

常见的元素类型：块级元素，行内元素（行内块元素），可变元素

常见的行内块元素：img，textarea,input,select,基线对齐（vertical-align）

常见的自带边框的标签：input，textarea，select，hr

常见的置换元素：img，input，textarea，select

元素类型的转换

元素类型转换的属性display 转换/变换（官方属性值有19个）

常见的属性值：5个

block块：将其他的元素类型转换为块级元素，使其具有块级元素的特点

inline行内： 将其他元素类型转换为行内元素 使其具有行内元素的特点（行内类型标签i，em）

inline-block行内块： 将其他元素类型转换为行内块元素，使其具有行内块元素的特点

list-item列表项目： 将其他元素类型转换为块元素（了解）

重要的属性值 none无，清除，删除样式

清除默认的列表样式 list-style

清除默认的下划线 text-decoration

清除边框 border

清除背景 background

浮动 float

禁止用户拖动多行文本域 resize

表单控件点击时候显示边框 outline

重点

none 可以表示隐藏，删除

block 可以表示转换为块级元素 显示

需要注意的点：浮动

浮动的作用是可以让元素脱离文档流，在一行内显示

如果给元素添加了浮动 就相当于给元素转换成了行内块元素

总结：

常见的块级专属默认的类型都是block

常见的行内元素默认的类型都是inline

常见的行内块元素默认的类型都是 inline-block

常见的列表默认类型都是list-item

使用浮动不仅可以让元素脱离文档流，会让元素转换为行内元素

使用block和none之间的应用 控制元素显示与隐藏的