inline-block:是将对象呈现为inline对象,但是对象的内容作为block呈现。 细节对比 display:block 1)block元素会独自占一行,多个block元素各自新起一行,默认情况下 ,block元素宽度自动填充其父元素宽度 2)block可以设置width,height属性,设置之后仍然独占一行 3)block元素可以设置margin和padding属性 display:inline 1) inli...
IE(低版本IE)本来是不支持inline-block的,所以在IE中对内联元素使用display:inline-block,理论上IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表象。
块级元素(block):独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽。 行内元素(inline):可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高。 行内块元素(inline-block):结合的行内和块级的优点,既可以设置长宽,可以让padding和margin生效,又可以和其他行内元...
块级元素(block):独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽。 行内元素(inline):可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高。 行内块元素(inline-block):结合的行内和块级的优点,既可以设置长宽,可以让padding和margin生效,又可以和其他行内元...
如下图:第一个inline-block元素没有行内子元素,它的基线为margin-bottom的下边界;第二个有行内元素(内容),基线以x字母正常基线。vertical-align默认以baseline基线对齐,出现下图效果。 而当两个inline-block都没有行内元素时,就会出现另外一种结果了,如下图所示: ...
1、当inline-block遇到同类时(inline、inline-block),谁的margin、padding和line-height的大,就按照谁的来显示,如下 .chicken{background-color: #9cb945;display: inline-block;width: 100px;height: 100px;margin-top: 50px;} .frog{background-color: #aa00aa;display: inline-block;} .cat{background...
二、display:[inline-block,block,inline]元素的区别 1、display:block 将元素显示为块级元素,从而可以更好地操控元素的宽高,以及内外边距,每一个块级元素都是从新的一行开始。 2、display : inline 将元素显示为行内元素,高度,行高以及底边距不可改变,高度就是内容文字或者图片的宽度,不可以改变。多个相邻的行...
(1)block:会独占一行,多个元素会另起一行,可以设置 width、height、margin 和 padding 属性; (2)inline:元素不会独占一行,设置 width、height 属性无效。但可以设置水平方向的 margin 和 padding 属性,不能设置垂直方向的 padding 和 margin; (3)inline-block:将对象设置为 inline 对象,但对象的内容作为 block ...
CSS里inline,block和inline-block的区别 工具/原料 IE sublime text 3 IE 11 方法/步骤 1 创建HTML文件，编写基本的HTML代码。这些标签各占一行。2 a和span标签并列在一起。3 block可以设置长和宽，inline不行。4 添加display: block改为块级元素。5 添加display: inline改为行内元素。6 inline-block可以并列...