Question

我想知道浏览器如何计算文本元素的宽度和高度，例如在下面的代码片段中，浏览器如何计算h3元素大小以及在调整视口大小时它如何调整此元素的大小？ / p>

.container-4photo {
  width: 100%;
  position: relative;
  text-align: center;
  margin-left: -4%;
}

.container-4photo-text {
  position: absolute;
  top: 66%;
  left: 50%;
  transform: translate(-50%, -66%);
  white-space: pre-wrap;
}

<div class="container-4photo">
  <img style="width:100%" src="https://s19.postimg.org/yt5glzp37/Diaporama4photo-1024px-379px.jpg" />

  <div class="container-4photo-text">
    <h3>La coiffure à domicile permet de gagner du temps en vous évitant le déplacementet l’attente dans le salon</h3>
  </div>
</div>

Answer 1

每个浏览器都有自己的默认样式表，它们指定每个元素的默认属性。 HTML5的W3C规范有一组默认样式，您可以找到here。但是，并不能保证每个浏览器都会遵守它们。

根据规范的Sections and Headings部分，标题的默认样式如下：

article, aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section {
  display: block;
}

h1 { margin-block-start: 0.67em; margin-block-end: 0.67em; font-size: 2.00em; font-weight: bold; }
h2 { margin-block-start: 0.83em; margin-block-end: 0.83em; font-size: 1.50em; font-weight: bold; }
h3 { margin-block-start: 1.00em; margin-block-end: 1.00em; font-size: 1.17em; font-weight: bold; }
h4 { margin-block-start: 1.33em; margin-block-end: 1.33em; font-size: 1.00em; font-weight: bold; }
h5 { margin-block-start: 1.67em; margin-block-end: 1.67em; font-size: 0.83em; font-weight: bold; }
h6 { margin-block-start: 2.33em; margin-block-end: 2.33em; font-size: 0.67em; font-weight: bold; }

如您所见，每个标题都有自己的字体大小和边距块大小。标题默认为块（如第二行所示），因此margin-block-start和margin-block-end属性对应的边距取决于它们的方向。

HTML4规范中的内容更简单，找到here，其中标题样式如下：

h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }

这里有简单的硬编码边距。

Answer 2

h1 {
    font-size: 2em;
    in pixel (32px);
    margin-block-start: 0.67em;
    in pixel(10.72px);
    margin-block-end: 0.67em;
    in pixel(10.72px);
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    color: black;
    font-family: times new roman;
    display: block;
}

for UI designing we need to remove default features of heading tags(h1-h6) use css2 universal selector* {}

. * {
    margin: 0px;
}

浏览器如何计算文本元素的大小？

2 个答案: