我已经实现了一些 css 规则来练习。好吧，但我遇到了绝对定位元素 left:5% 的百分比偏差问题。我观察到当我使用 figure 标签时它不能正常工作，而是与 div 元素一起工作。为了理解您必须调整大小的问题，以缩小页面。两个版本与视口(viewport)左侧的偏差不同。我想了解为什么以及如何解决这个问题(在图形版本中)。
我发布了两个版本的代码和 jsfiddle。
<html lang="it">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> Non si mette perchè non ho istruzioni reponsive precise come media query-->
<meta name="description" content="Sito con intestazione con sfondo. Esercizio si rifa al libro css master, esercizio finisched-example.html del capitolo 5">
<meta charset="UTF-8">
<title>Cat Page</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.sfondo-intro {
position: relative;
/*margin:0; servirebbe per h1 che ha un margine di default,non per header*/
height: 600px;
/*perche senza contenuto h1 non visualizza lo sfondo*/
background-image: url(https://imagizer.imageshack.com/img923/4457/MeXAJj.jpg);
background-position: 50% 30%;
/*per mantenere il gatto centrato quando ridimensiono la finestra*/
background-size: cover;
}
.profile-box {
width: 160px;
background-color: #FFF;
position: absolute;
left: 5%;
bottom: -60px;
-webkit-border-radius: .5em;
border-radius: .5em;
padding: .5em;
}
.profile-box img {
max-width: 100%;
/*max-width a differenza di width fa si che l'immagine sia larga al massimo quanto è larga l immagine. Prova a mettere width:400px ad esempio in .profile-box per vedere che succede (l immagine non si espande fino a 400px)*/
height: auto;
/*Altezza settata in modo da continuare a rispettare l aspect ratio dell immagine*/
}
.didascalia {
text-align: center;
font-size: 1.2em;
color: #555;
font-weight: 600;
}
</style>
</head>
<body>
<header class="sfondo-intro" role="banner">
<div class="profile-box">
<img src="https://imagizer.imageshack.com/img924/606/oMPbxW.jpg" alt="Charles The Cat" />
<figcaption class="didascalia">@CharlesTheCat</figcaption>
</div>
</header>
</body>
</html>
这里还有其他版本用 figure 元素代替 div 元素
<!DOCTYPE html>
<html lang="it">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> Non si mette perchè non ho istruzioni reponsive precise come media query-->
<meta name="description" content="Sito con intestazione con sfondo. Esercizio si rifa al libro css master, esercizio finisched-example.html del capitolo 5">
<meta charset="UTF-8">
<title>Cat Page</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.sfondo-intro {
position: relative;
/*margin:0; servirebbe per h1 che ha un margine di default,non per header*/
height: 600px;
/*perche senza contenuto h1 non visualizza lo sfondo*/
background-image: url(https://imagizer.imageshack.com/img923/4457/MeXAJj.jpg);
background-position: 50% 30%;
/*per mantenere il gatto centrato quando ridimensiono la finestra*/
background-size: cover;
}
.profile-box {
width: 160px;
background-color: #FFF;
position: absolute;
left: 5%;
bottom: -60px;
-webkit-border-radius: .5em;
border-radius: .5em;
padding: .5em;
}
.profile-box img {
max-width: 100%;
/*max-width a differenza di width fa si che l'immagine sia larga al massimo quanto è larga l immagine. Prova a mettere width:400px ad esempio in .profile-box per vedere che succede (l immagine non si espande fino a 400px)*/
height: auto;
/*Altezza settata in modo da continuare a rispettare l aspect ratio dell immagine*/
}
.didascalia {
text-align: center;
font-size: 1.2em;
color: #555;
font-weight: 600;
}
</style>
</head>
<body>
<header class="sfondo-intro" role="banner">
<figure class="profile-box">
<img src="https://imagizer.imageshack.com/img924/606/oMPbxW.jpg" alt="Charles The Cat" />
<figcaption class="didascalia">@CharlesTheCat</figcaption>
</figure>
</header>
</body>
</html>
最佳答案
一些标签带有来自 use-agent 的默认样式，并且 figure 元素有一些边距。您可以使用像谷歌开发者控制台这样的检查器(在 Chrome、Windows 或 Linux 上使用 ctrl+i)来检查元素应用了哪些样式并调试此类内容，但通常当相同的 css 对不同的标签有不同的工作方式时，通常是这种情况。
在您的图形中添加 margin: 0 可以解决这种情况。
关于html - figure 和 div 标签之间绝对定位的奇怪差异，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58436152/