美文网首页
行内元素的宽度和高度

行内元素的宽度和高度

作者: power17 | 来源:发表于2017-05-24 02:33 被阅读0次

行内元素是否没有宽高,宽高由字体多少和大小决定。但行内 元素可以设置边框和背景颜色,这让我感到新奇!设想一下如果行内元素嵌入块级元素,情况会怎么样呢。我对此做了一些测试。

代码和情况如下,让我比较困惑的是为何边框会跑到下面, 另外 上边框也看不见了。

后来经过测试发现,得出结论

1.行内元素区域包括边框大小和字体大小和 子元素(块级元素)决定的。

2.上边框不见是因为被菜单栏挡住了,在外层套一个div就不会有这种情况(在火狐上还可以看到一点);

另外还有一些知识点,比如块级元素不设置宽高的情况下,宽度与父级元素宽度相等,高度与盒子内容相等


相关文章

  • 行内元素

    行内元素特点 和其他行内元素都在一行显示; 元素的高度、宽度、行高及外边距顶部和外边距底部不可设置; 元素的宽度就...

  • 行内元素的宽度和高度

    行内元素是否没有宽高,宽高由字体多少和大小决定。但行内 元素可以设置边框和背景颜色,这让我感到新奇!设想一下如果行...

  • CSS-尺寸样式属性

    代码: 注意: 标签不能设置宽高,因为span是行内元素,不可以设置宽度和高度。块级元素才能设置宽度和高度。

  • 元素布局

    块元素 1.独自占一行,可以设置宽度高度等 行内元素 1.只占自己自身的大小。不可以设置宽度高度。 行内块元素 1...

  • inline和inline-block的区别

    inline 行内元素 inline-block 内联块级元素(可以设置宽度和高度地块元素) block 块级元素

  • 2018-09-27

    加了绝对定位,固定定位,浮动元素的行内元素,可以不用转换,直接给宽度和高度

  • css 字数超出显示省略号

    1、行内元素超出显示省略号 tips 适用于宽度固定的行内元素 2、块级元素超出显示省略号 -tip:行内元素高度...

  • 25、float(浮动)脱离文档流CSS

    脱离文档流的特点: 块元素: 块元素不占据页面的独立一行 块内容的宽度和高度被内容撑开 行内元素: 行内元素脱离文...

  • html内联元素和块级元素

    常见的内联元素: 常见块级元素: 行内元素: 设置宽度width无效 设置高度height无效,可以通过line-...

  • CSS居中

    水平居中 针对宽度不为100%的块级元素 针对行内元素和块级元素的内容。当父元素的宽度是100%时,子元素中的行内...

网友评论

      本文标题:行内元素的宽度和高度

      本文链接:https://www.haomeiwen.com/subject/pernxxtx.html