元素类型
1.块级元素的特点
（1）独占一行；可设置宽高；
（2）块级元素可作为其他元素的容器（所有的内联元素也就是行内元素，和部分块级元素）
注意：p标签里面不能包含p标签，段落里面不能包含段落）,不能包含所有的块级元素
常用的块级元素：div，p , form , hr ,table ,tr , td， (h1-h6) ， dl，dt , dd , ol , ul ,fieldset , iframe , colgroup , 等。
2.行内元素的特点
(1)不独占一行（一行显示多个）
（2）不可设置宽高
（3）行内元素也遵循盒模型，但是padding-top padding-bottom margin-top ，margin-bottom不起作用。（要是起作用，行内元素就不会在一行了）（面试）
常用的行内元素：span ，a ，br ， i, em, b, strong , select ，input ，img，textarea
3. 置换元素:浏览器根据标签和属性来显示出来的内容，就称之为置换元素（在开发中基本不用）
(img 是根据src属性来显示内容的
input是根据value属性来显示内容)
常用的置换元素：img input textarea select
置换元素在其显示中生成了框，也就是有内联元（img，input）能够设置宽高的原因。
4.元素类型的转换
属性：display 它的属性值有18个
常用的属性值：
（1）block 将行内元素转换为块级元素，也是块级元素的默认属性
（2）inline 将块级元素转化为行类元素，也是行内元素的默认值
(3) inline-block 行内块级，（将块级元素或者行内元素转化为行内块级元素） 行内块级元素特点：不独占一行，可设置宽高。注意：列表要设置浮动，才横排列。不设置浮动，设置display：inline-block，也能使其横排列。但是两者有区别，给块级元素设置inline-block的时候，元素之间会有空格；标签换行的时候，会把那些换行当成一个空格（一个字符）。解决办法：（1）把所有标签放在一行。（2）给父元素设置字符大小为0。
（4）none；隐藏元素（当鼠标划过时，显示导航。比如淘宝）注意：如果对于隐藏的元素来说，后面显示出来的时候，display的取值怎么取，隐藏之前是块级元素，显示的时候display：block；如果隐藏之前是行内元素，显示的时候：display：inline。如果隐藏之前是inline-block，显示的时候就是display：inline-block。
隐藏元素区别：（隐藏元素的三种方式：display：none；隐藏之后不占据原来的位置。visibility：hidden隐藏元素，隐藏之后还占据原来的位置（用眼看不见）；opacity：0；）
（5）list-item 把行内元素或者块级元素转化为列表属性。但是不能给他设置list-style-type：disc/circle/square
（6）display：flex;(布局起来很方便。)