web前端学习（三）块级元素、行内元素特点及区别

1. 块级元素

作用：搭建网页结构

特点：
* 独占一行空间
* 默认宽度为100%
* 高度由子元素或内容决定
* 可以通过css指定其宽度高度
* 块级元素可以包含块级与行内。

元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、table、tr、th、td、hr、header、footer、nav、article、section、aside、address...

2.行内元素

作用：在结构中填充网页内容

特点：
* 与其他行内元素共享一行空间
* 宽高由自身决定
* 由于不用来搭建网页结构，所以也无需通过css指定其宽度
* 行内元素中不可以嵌套块元素，行内相对来说，行内只能包含行内
 

元素：span、a、img、br、strong、b、i、em、sub、sup...

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。（所以margin:0 auto会失效） 

3.块级行内的区别

    1.块级独占一行，行内共享一行
    2.块级可以直接设置宽高，而行内元素不行。(行内设置宽高，需要通过css的display属性，取值为inline-block/block，也可以通过float浮动或者定位position：absolute fixed使其脱离标准流)
    3.块级可以包含块级与行内，而行内只能包含行内

特殊： 

• <img>属于可替换元素

• <img>同时具有行内元素，行内块，和块级元素的特性

• 替换元素一般有内在尺寸，所以具有 width 和 height，可以设定

• <img>、<input>属于行内替换元素。height/width/padding/margin均可用。效果等于块元素