前端学习第8天：元素类型

第八天

1.元素类型

1.1 块状元素（block element）

• 独占一行，显示为矩形区域，自上而下排列，可自定义宽高。
• 常见块状元素： div ,dl ,dt , dd, ol , ul , fieldset ,(h1-h6), p , for

1.2行内元素/ 内联元素（inline element）

• 没有固定的形状，不能自定义宽高，其宽度和高度由内容撑开，可水平逐个排列
• 常见行内元素：a , b , span , i , em , strong

1.3行内块元素

• 和其他元素同行显示，但是可以自定义宽高。
• 常见行内块元素：img , input , textarea 。

2.元素类型转换

​ 通过 display 属性来改变默认的显示类型。

2.1display属性与属性值（18个属性值）

• 常用属性值：block/inline/inline-block/list-item
  • block :将元素转化为块状元素，独占一行。
    • inline :将元素转化为行内元素，可水平相邻排列，但不能自定义宽高。
    • inline-block:将元素转化为行内块。
  • list-item:将元素转化为列表，li 的默认类型。

3.元素垂直居中

3.1 line-height

• 通过将行高设置为与容器高度相同，可实现垂直居中。

3.2position+margin

• 定位+外边距可实现垂直居中
  • 首先给父元素设置相对定位relative
    • 然后给子元素设置绝对定位absolute ，并给top：50%
    • 接着给子元素：margin-top：-value (value为子元素高度的一半)

3.3 元素转为为表格实现居中

• 首先将父元素转化为表格元素：display:table

• 然后将子元素转化为单元格元素：display:table-cell

• 对后对子元素设置表格中的垂直居中方式：vertical-align:center

  • IE8及以下无效。

4.置换元素、非置换元素

• 置换元素：自带宽高，自带display:inline-block样式。如：img ,input , select , textarea , button
• 非置换元素：html 的大多数元素是非置换元素，即其内容直接表现给用户端。