资讯专栏INFORMATION COLUMN

CSS:元素高度与宽度的讨论 系列文章(四)

hqman / 1559人阅读

摘要:总结置换元素的高宽度计算规律都一样。非置换元素块级非置换元素如,具体计算见前面的文章非置换元素如,宽度与高度的设置对他不起作用非置换元素元素不设宽度,则元素宽度等于内容宽度

前言

在之前的文章主要讨论了下面几种元素宽度与高度的计算:

块级非置换元素(例:div)

Inline,非置换元素(例:span)

Inline,置换元素(例:表单元素)
这篇文章将继续讨论下列几种元素的宽度与高度的在不同情况下的高度与宽度的计算

Inline-block,非置换元素在文档流中(例:div设置为inline-block)

Inline-block,置换元素在文档流中

Inline-block,非置换元素在文档流中

如果元素不设置宽度,则元素宽度等于内容宽度。

Inline-block,置换元素

与Inline,置换元素的规律一样。

总结

置换元素的高宽度计算规律都一样。

非置换元素:

块级非置换元素:

,具体计算见前面的文章

Inline,非置换元素:如,宽度与高度的设置对他不起作用

Inline-block,非置换元素:元素不设宽度,则元素宽度等于内容宽度

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/115165.html

相关文章

  • CSS:关于元素高度宽度讨论 系列文章(二)

    前言:在上一篇文章中讨论了关于块级非置换元素宽度与高度在不同情况下的表现,在这篇文章中将详细的阐述来自w3c定义的视觉化格式模型中对于各种元素的定义,以及行内级非置换元素与行内级置换元素宽度与高度的讨论 元素的各种定义 块级元素与块元素 块级元素(block-level elements) 那些视觉上会被格式化成块状的元素,通俗一点来说就是那些会换新行的元素。display 属性值为:block,...

    曹金海 评论0 收藏0
  • CSS:关于元素宽度高度讨论 系列文章(一)

    摘要:元素宽度为第一种情况元素为文档流中元素结论将上面结论中的例子元素宽度换为,表现与结论例子的表现一样,因此若元素为文档流中元素,则子元素宽度为父元素宽度的的。 约定:以下所讨论元素均为,display:block的非置换元素。关于什么是置换元素,什么是非置换元素元素,以及在w3c标准中定义的各种视觉化格式的框将在一篇博文中作出详细阐述。 1.元素不设宽度 第一种情况:元素为文档流中元素 ...

    izhuhaodev 评论0 收藏0
  • CSS:关于元素高度宽度讨论 系列文章(三)

    摘要:元素不在文档流中结论如文章一中的结论一样元素宽度等于其内容所占空间同样的在文章一中也得出了元素不设高度元素的高度为其内容所占据空间若没有内容则高度为。 前言 在CSS:关于元素高度与宽度的讨论 系列文章(一)中讨论了display为display:block的置换元素的宽度与高度在不同情况下的表现,但是有些地方并不严谨,因此在这里做一个补充,在补充前先简单介绍一下css盒模型以及其在可...

    syoya 评论0 收藏0
  • CSS:Margin布局

    摘要:参考线示意图如图所示按箭头所指方向使参考线变化的值都为正值。栗子没在上加前效果如图发生了堆叠。因此效果上来看便符合了预期如图此布局便利用了原理,通过元素对相邻元素位置的控制来达到预期的效果。 Margin与宽高度的关系 博客同步地址Margin与布局 在讲此之前,必须知道什么是containing-box以及一些宽高度的一些关系,关于containing-box的概念以及与宽高度的关系...

    ivan_qhz 评论0 收藏0
  • [译] 关于两种视口(viewport)故事:其一

    摘要:它能给予一个关于你使用何种设备的正式结论,并且能通过获得。宽度两倍,高度两倍,总体四倍。视口的作用是限制元素,元素是所有网页块元素中最高一级的元素。视口并非一个结构,其不受控制。重点是上诉结论是在缩放的条件下成立的。 原文地址:http://quirksmode.org/mobile/... 这篇小短文中,我将会介绍关于viewport与诸如html元素,window 对象,scree...

    rose 评论0 收藏0

发表评论

0条评论

hqman

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<