行内元素与块级元素的特点及区别

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...

3.块级行内的区别

    1.块级独占一行,行内共享一行
    2.块级可以直接设置宽高,而行内元素不行。(通过css的display属性,取值为inline-block/block,这样可以给行内设置宽高)
    3.块级可以包含块级与行内,而行内只能包含行内

你可能感兴趣的:(前端htmlcss)