手机端页面自适应解决方案—rem布局
请问, p标签与input标签的间距为什么这么大?
PS. 去掉<!DOCTYPE html>就没有问题, 这是为什么?
<!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>
因为
input元素是行内块元素，所以它所在的行会形成一个行框。然后行框的高度是和line-height属性相关的，line-height的说明如下：line-height定义的是行的最小高度，当行内包含行内元素的时候，每个行内元素会生成一个行内框，然后行内元素根据vertical-align属性对齐元素，然后取所有这些框的最高上边界和最低下边界，最高上边界和最低下边界之间的高度组成了实际的行高。那么规范又是如何保证
line-height定义的是行的最小高度的呢？其实，参与行框形成的元素，除了这些
实际存在的行内元素，还存在一个strut元素，这是一个假想的具有块元素的字号和行高的零宽元素，这个元素会参与最后实际的行高。现在，我们来看这个问题：
第一个元素是p元素，是块级元素，不会生成行框，和line-height没有关系；🎜第二个元素是input元素，input元素是行内块元素，行内块元素生成的行内框是元素上外边界到下外边界（margin的上边界到下边界），然后你这个页面运行之后，会在html元素上添加一个
font-size属性，没有具体看这个大小和什么相关，我运行代码以后的结果是font-size: 50px;，下面以font-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因为font-size属性是可以继承的，所以你的p元素的font-size也是50px；因为line-height的默认值是normal，规范推荐的normal值是字体大小的1.0到1.2之间，和浏览器实现有关，我们这里假设用的1.0；strut这个假想元素生成了一个高为font-size * line-height = 50px * 1 = 50px的行内框，这两个行内框按照基线对齐的方式进行排列，然后取这两个行内框的最高上边界和最低下边界就是最后的行框。因为input元素生成的行内框远远没有50px，所以最后取得应该是strut的上边界和下边界，所以这个行框是50px，所以导致中间有"所谓"大段的空白。🎜综上，你可以设置
p的font-size: 0px;这样假想的strut元素形成的行内框就不会高于input元素生成的行内框了。或者设置input元素
display: block;，这样input元素就是块级元素了，块级元素是不涉及行框的。Update1：
有
<!DOCTYPE html>声明表示文档运行在标准模式下，去掉以后是运行在兼容模式下的，标准模式遵守标准规范，兼容模式就不一定了。把根字体设置一下
p标签自带上下margin
么有重置css吧 reset下试试
你的那个js有问题吧
页面解析出来根目录font-size都是100px,一般都是16px
首先 p标签自带margin input{vertical-align: top;}
确实和父元素font-size有关，表现为最小行高是父元素字体的大小，解决方法是设置合适父元素font-size或者设置display:block，高票回答很详细