CSS内联--与块级元素区别

时间:2023-03-10 01:12:14
CSS内联--与块级元素区别

内联元素:
1、内联元素(inline)不会独占一行,相邻的内联元素会排在同一行。其宽度随内容的变化而变化。 
2、内联元素不可以设置宽高 
3、内联元素可以设置margin,padding,但只在水平方向有效。

块状元素:
1、块级元素会独占一行,默认情况下宽度自动填满其父元素宽度 
2、块级元素可以设置宽高 
3、块级元素可以设置margin,padding

内联块状元素inline-block:
简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现(可以设置宽高和margin值)。之后的内联对象会被排列在同一内联。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

4.互相之间的区别
区别主要是三个方面:一是排列方式,二是宽高边距设置,三是默认宽度。

(1)块级元素会独占一行,而内联元素和内联块元素则会在一行内显示。

(2)块级元素和内联块元素可以设置 width、height 属性,而内联元素设置无效。

(3)块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。
————————————————
版权声明:本文为CSDN博主「小奶狗」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/ycq521131/article/details/82590308