登录 主页

block,inline和inline-block的区别

2023-03-06 11:40AM

块级元素

会占领页面的一行,其后多个block元素自动换行、 可以设置width,height,设置了width后同样也占领一行、同样也可以设置 margin与padding属性。

ps:常见的块级元素:div,img,ul,form,p等

行级元素

与其他元素在同一行上,高度,行高以及底边距不可改变,高度就是内容文字或者图片的宽度,不可以改变。

ps:em,strong,br,input等

display:inline-block,block,inline元素的区别

1、display:block将元素显示为块级元素,从而可以更好地操控元素的宽高,以及内外边距,每一个块级元素都是从新的一行开始。

2、display : inline将元素显示为行内元素,高度,行高以及底边距不可改变,高度就是内容文字或者图片的宽度,不可以改变。多个相邻的行内元素排在同一行里,知道页面一行排列不下,才会换新的一行。

3、display:inline-block看上去值名inline-block是一个混合产物,实际上确是如此,将元素显示为行内块状元素,设置该属性后,其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block,使其既有block的宽度高度特性,又有inline的同行特性,在同一行内有不同高度内容的元素时,通常要设置对齐方式如vertical-align: top;来使元素顶部对齐

1、blockhtml

block是块级元素,老是在新行上开始;高度、行高、底和底边距均可以控制; 若是不设置宽度的话,宽度默认值是它容器的100%。

<div><p><h1><form><ul><li>都是块级元素。

CSS:

2、inline:

inline元素和其他元素都在一行上;高、行高、顶和底边距不可改变;宽度是它內容的宽度,不可改变,设置宽度无效。现象

特色就是:blog

设置宽度、高度无效,继承

设置行高会增长顶部和底部的间距但內容区高度不变,it

设置padding有效

设置margin-left、margin-right有效

设置margin-top、margin-bottom无效

CSS:

3、inline-block

display:inline-block

inline-block简单来说就是将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行內,允许空格。

旁边的内联对象会被呈如今同一行,允许空格。

特色是:

能够设置宽度高度行高

能够设置padding

能够设置marign

CSS:

参考:https://blog.csdn.net/qq_42877959/article/details/123772636

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论