前端基础之块级元素和行内元素

[jyzwf]

引用MDN上的解释：

块级元素占据其父元素（容器）的整个空间，因此创建了一个 “块“
行内元素只占据它对应标签的边框所包含的空间

块级元素和行内元素的区别：

1. 块级元素会独占一行，默认情况下，其宽度自动填满父元素的宽度 ；行内元素不会独占一行，相邻的行内元素会排列在同一行，直到排不下才会换行，其宽度随内容的增加而增加
2. 块级元素可以设置 width/height。行内元素设置宽高无效
3. 块级元素可以设置 margin/padding；行内元素起边距作用的只有 margin-left/margin-right/padding-left/padding-right，其他的不起边距效果
4. 块级元素能包含行内元素，行内元素不能包含块级元素

块级元素和行内元素的转换

1. display
   display : none 不显示该元素，且不保留该元素原来占有的文档流位置
   display : block 转换为块级元素
   display : inline 转换为行内元素
   display : inline-block 转换为行内块级元素，拥有块级元素的性质

2. float
   当把行内元素设置为 float:left/right时，该行内元素的 display 属性会变为 block，且有浮动特性

3. position
   当为行内元素进行定位时，position:absolute/fixed 都会使得行内元素变为块级元素