css的宽度与高度

作者: 小7丁 | 来源:发表于2018-05-19 10:58 被阅读25次

div的高度问题

1. div里面没有内容的时候,高度是多少?

  • 是0

2. 若div里面有文字,且css设置font-size:20px,浏览器显示div的高度是28,为什么?

  • 第一种错误回答:行高的默认值就是1.4(28/20=1.4)

3. 若换了字体,div的高度又变了,为什么?

  • 默认的行高是由字体设计师自己设计的。所以不同的字体有着不同的行高

4. 一个中文对应几个空格,是由字体设计师所设计的。

总结:

  • div的高度=字体*它建议的行高
  • 如果div里面只有内敛元素,则div的高度就是这一行的行高。如果有多行内敛元素,则就是行高的叠加,若有一个单词特别长,则要看是否加了word-break: break-all;,再判断高度。
  • div的高度就是由它内部文档流高度总和确定,若有脱离文档流的则不计算它的高度。
    2018-05-19

相关文章

  • CSS之宽度与高度

    使用CSS进行布局与定位,就必须了解CSS中的宽度与高度。在CSS中:1.内联元素的宽度由行高决定,宽度由内容、p...

  • CSS 高度与宽度

    文字的对齐 word-break: break-all 发现文字超出了div的宽度,因为浏览器不会自动打断,可以添...

  • css 宽度与高度

    文档流(normal flow)div竖着排,内联元素横着排 块级元素div的宽高:未设置宽高时 宽:div的宽度...

  • CSS 宽度与高度

    前言:如果你写的 CSS 中经常出现 width 与 height,说明你写的 CSS 是有问题的 一、文档流(N...

  • css的宽度与高度

    div的高度问题 1. div里面没有内容的时候,高度是多少? 是0 2. 若div里面有文字,且css设置fon...

  • css_高度与宽度

    以下是css深入浅出视频截图 个人觉得非常实用且涨知识

  • css-宽度与高度

    文档流 文档内元素的流动方向。内联元素:从左到右;块级元素:从上到下,每块占一行。 块级元素高度由其内部文档流高度...

  • [CSS] box-sizing

    content-box:这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之...

  • CSS阶段第一小节第二天

    1.CSS语法 ①CSS的格式 ②CSS的属性 *width:设置宽度,单位px(像素) *height:设置高度...

  • CSS边框、图片alt、input标签placeholder、f

    CSS边框属性CSS 边框的属性有style(样式)、color(颜色)、width(宽度)、height(高度)...

网友评论

    本文标题:css的宽度与高度

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