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

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

(1)
块级元素会单独占一行,默认情况下,其宽度会填满其父元素的宽度;
行内元素不会单独占一行,排在一行,排不下了,才会换行;
行内块元素排在一行,根据宽度,排不下了才会换行。
(2)
块级元素可以设置width、height属性,块级元素设置了宽度仍然独占一行,同一行不允许存在别的元素;
行内元素设置width、height属性无效,它的宽高由内容决定,可以通过display:block;或者display:inline-block转化为块元素再设置宽高;
行内块元素可以设置宽和高。
(3)
块级元素和行内块元素可以设置padding和margin 属性值,
(注:可以通过margin:auto方式实现水平居中;Margin:auto; 和margin:0 auto;是一样的,无论父盒子有没有高度,在垂直方向外边距都是0);
行内元素的margin和padding 属性,水平方向的padding-left ,padding-right,margin-left,margin-right都会产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果
(4)
行内块元素(如:img、input、td)排在一行,可以设置宽高,margin、padding属性,块之间有缝隙;
浮动和定位也可以将元素隐性转化为行内块元素,可以设置宽和高,并且元素之间没有缝隙

发布了5 篇原创文章 · 获赞 6 · 访问量 288

猜你喜欢

转载自blog.csdn.net/MY1942966637/article/details/102624155