Solution adaptative de page mobile – mise en page rem
Excusez-moi, pourquoi la distance entre la balise p et la balise input est-elle si grande ?
PS. Il n'y aura aucun problème si vous supprimez <!DOCTYPE html>Pourquoi ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello</title>
<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]); flex(100, 1);</script>
<style type="text/css">
.p{
background: #FFF;
padding:0.2rem;
}
.p p{
font-size: 0.26rem;
color:#24b5f1;
border: 1px red solid;
}
</style>
</head>
<body style="background:#eeeeee;">
<p class="p">
<p>Hello</p>
<input type="text">
</p>
</body>
</html>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Parce que la description de
.input元素是行内块元素，所以它所在的行会形成一个行框。然后行框的高度是和line-height属性相关的，line-heightest la suivante :line-height定义的是行的最小高度，当行内包含行内元素的时候，每个行内元素会生成一个行内框，然后行内元素根据vertical-alignAttributez les éléments d'alignement, puis prenez la bordure supérieure la plus haute et la bordure inférieure la plus basse de toutes ces cases. La hauteur entre la bordure supérieure la plus haute et la bordure inférieure la plus basse constitue la hauteur réelle de la ligne.Alors, comment la spécification garantit-elle que l'élément
line-height定义的是行的最小高度的呢？其实，参与行框形成的元素，除了这些
实际存在的行内元素，还存在一个strut, qui est un élément imaginaire de largeur nulle avec la taille de police et la hauteur de ligne de l'élément de bloc, participera à la hauteur de ligne réelle finale.Maintenant, regardons ce problème :
Le deuxième élément est l'élément d'entrée, et l'élément d'entrée est un élément de bloc en ligne. La boîte en ligne générée par l'élément en ligne. L'élément block va de la limite extérieure supérieure à la limite extérieure inférieure de l'élément (marge de la bordure supérieure à la bordure inférieure), puis l'élément imaginaireAprès avoir exécuté votre page, un attribut
font-sizesera ajouté à l'élément html. Je n'ai pas vu à quoi cette taille est liée. Le résultat après. J'exécute le code. Il s'agit defont-size: 50px;. Ce qui suit est expliqué avecfont-size: 50px;.font-size属性，没有具体看这个大小和什么相关，我运行代码以后的结果是font-size: 50px;，下面以font-size: 50px;来进行说明。因为
font-size属性是可以继承的，所以你的p元素的font-size也是50px；因为line-height的默认值是normal，规范推荐的normal值是字体大小的1.0到1.2之间，和浏览器实现有关，我们这里假设用的1.0；第一个元素是p元素，是块级元素，不会生成行框，和line-height没有关系；
第二个元素是input元素，input元素是行内块元素，行内块元素生成的行内框是元素上外边界到下外边界（margin的上边界到下边界），然后
strut这个假想元素生成了一个高为font-size * line-height = 50px * 1 = 50px的行内框，这两个行内框按照基线对齐的方式进行排列，然后取这两个行内框的最高上边界和最低下边界就是最后的行框。因为input元素生成的行内框远远没有50px，所以最后取得应该是strutÉtant donné que l'attributfont-sizeest héritable, lefont-sizede votre élémentpest également de 50 px carline- Le la valeur par défaut de heightest normale. La valeur normale recommandée par la spécification est comprise entre 1,0 et 1,2 de la taille de la police. Nous supposons que 1,0 est utilisé ici ; L'élément p, qui est un bloc Les éléments de niveau ne généreront pas de boîtes de ligne et n'ont rien à voir avec la hauteur de ligne ;strutgénère une boîte en ligne d'une hauteur de font-size * line-height = 50px * 1 = 50px. Ceci Les deux zones en ligne sont disposées en fonction de l'alignement de la ligne de base, puis la limite supérieure la plus élevée et la limite inférieure la plus basse des deux zones en ligne sont. considéré comme la boîte de ligne finale. Étant donné que la boîte en ligne générée par l'élément d'entrée fait bien moins de 50 px, le résultat final doit être les limites supérieure et inférieure destrut, donc la boîte de ligne fait 50 px, ce qui donne un "soi-disant" grande section d'espace blanc au milieu. 🎜En résumé, vous pouvez définir
p的font-size: 0px;这样假想的strut元素形成的行内框就不会高于input元素生成的行内框了。或者设置input元素
display: block;pour que l'élément d'entrée soit un élément de niveau bloc et que les éléments de niveau bloc n'impliquent pas de zones de ligne.Mise à jour 1 :
Il y a une déclaration
<!DOCTYPE html>indiquant que le document s'exécute en mode standard. Après l'avoir supprimé, il s'exécute en mode de compatibilité. Le mode standard respecte les spécifications standard, mais le mode de compatibilité n'est pas nécessairement le cas.Définissez la police racine
la balise p est livrée avec une marge supérieure et inférieure
Existe-t-il un moyen de réinitialiser le CSS ? Essayez de réinitialiser
Y a-t-il quelque chose qui ne va pas avec votre js
La page analysée montre que la taille de la police du répertoire racine est de 100 px, généralement 16 px
Tout d'abord, la balise p est livrée avec une entrée de marge{vertical-align: top;}
Cela est en effet lié à la taille de police de l'élément parent. La hauteur de ligne minimale est la taille de police de l'élément parent. La solution consiste à définir la taille de police appropriée de l'élément parent ou à définir display:block. la réponse est très détaillée