元素类型及转换

一.元素类型

1.块级元素：div、h1-h6、p、列表、form

特点：①占父元素宽度的一整行，若是设置死宽度，那多余的位置会用margin填充。

②可以设置宽高

③块级元素可以包含部分块级元素及所有的行内元素

应用：若想子元素（块级元素）在父元素水平居中，对子元素设置margin：0 auto。

2.行内元素：span/a/加粗/倾斜/input/select/textarea/label

特点：①宽高由内容决定，不能设置宽高

②一行显示多个

③行内元素遵循盒模型，不能设置上下的padding，margin

补充：若想行内元素在容器中居中，则给容器加text-align：center即可

3.元素类型的转换display

①.block转换成块级元素

②.inline 转换成行内元素

③.inline-block 转换成行内块级元素：

特点：一行显示多个，可设置宽高

当元素设置成一个行内块级元素进行布局时，之间的换行会形成一个空格：

解决办法：（一）不要换行，（二）给他们设置一个父元素{font-size：0；}

④list-item转换成列表项

⑤.none 隐藏元素，不占位置

4.大部分块级元素display属性值默认为block，其中列表li的默认值为list-item

大部分行内元素display属性值默认为inline，其中img input textarea的默认值为inline-block

5.当元素设置成行内块级元素进行布局，之间换行会被当作一个空格。

第一种解决方式：不要换行

第二种解决方式：给他们设置一个父元素{font-size：0；}

6.行内元素垂直方向都存在基线对齐的问题，通过{vertical-align}解决

7.若父元素与子元素都浮动了，父元素如果不设置宽度，会由子元素撑开

8.实现在父元素中垂直居中的方式

①。将子元素设置成inline-block：给他一个同级元素（尺子）{display：inline-block；width：0；height：父元素高度；}

最后给两个子元素都设置{vertical-align：middle；}