javascript - 使用rem后 元素間的間距很大怎么辦?
問(wèn)題描述
手機(jī)端頁(yè)面自適應(yīng)解決方案—rem布局
請(qǐng)問(wèn), p標(biāo)簽與input標(biāo)簽的間距為什么這么大?
PS. 去掉<!DOCTYPE html>就沒(méi)有問(wèn)題, 這是為什么?
<!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[Ss]+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>
問(wèn)題解答
回答1：因?yàn)閕nput元素是行內(nèi)塊元素，所以它所在的行會(huì)形成一個(gè)行框。然后行框的高度是和line-height屬性相關(guān)的，line-height的說(shuō)明如下：
On a block container element whose content is composed of inline-level elements, ’line-height’ specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element’s font and line height properties. We call that imaginary box a 'strut.'
line-height定義的是行的最小高度，當(dāng)行內(nèi)包含行內(nèi)元素的時(shí)候，每個(gè)行內(nèi)元素會(huì)生成一個(gè)行內(nèi)框，然后行內(nèi)元素根據(jù)vertical-align屬性對(duì)齊元素，然后取所有這些框的最高上邊界和最低下邊界，最高上邊界和最低下邊界之間的高度組成了實(shí)際的行高。
那么規(guī)范又是如何保證line-height定義的是行的最小高度的呢？其實(shí)，參與行框形成的元素，除了這些實(shí)際存在的行內(nèi)元素，還存在一個(gè)strut元素，這是一個(gè)假想的具有塊元素的字號(hào)和行高的零寬元素，這個(gè)元素會(huì)參與最后實(shí)際的行高。
現(xiàn)在，我們來(lái)看這個(gè)問(wèn)題：你這個(gè)頁(yè)面運(yùn)行之后，會(huì)在html元素上添加一個(gè)font-size屬性，沒(méi)有具體看這個(gè)大小和什么相關(guān)，我運(yùn)行代碼以后的結(jié)果是font-size: 50px;，下面以font-size: 50px;來(lái)進(jìn)行說(shuō)明。因?yàn)閒ont-size屬性是可以繼承的，所以你的p元素的font-size也是50px；因?yàn)閘ine-height的默認(rèn)值是normal，規(guī)范推薦的normal值是字體大小的1.0到1.2之間，和瀏覽器實(shí)現(xiàn)有關(guān)，我們這里假設(shè)用的1.0；第一個(gè)元素是p元素，是塊級(jí)元素，不會(huì)生成行框，和line-height沒(méi)有關(guān)系；第二個(gè)元素是input元素，input元素是行內(nèi)塊元素，行內(nèi)塊元素生成的行內(nèi)框是元素上外邊界到下外邊界（margin的上邊界到下邊界），然后strut這個(gè)假想元素生成了一個(gè)高為font-size * line-height = 50px * 1 = 50px的行內(nèi)框，這兩個(gè)行內(nèi)框按照基線對(duì)齊的方式進(jìn)行排列，然后取這兩個(gè)行內(nèi)框的最高上邊界和最低下邊界就是最后的行框。因?yàn)閕nput元素生成的行內(nèi)框遠(yuǎn)遠(yuǎn)沒(méi)有50px，所以最后取得應(yīng)該是strut的上邊界和下邊界，所以這個(gè)行框是50px，所以導(dǎo)致中間有'所謂'大段的空白。
綜上，你可以設(shè)置p的font-size: 0px;這樣假想的strut元素形成的行內(nèi)框就不會(huì)高于input元素生成的行內(nèi)框了。或者設(shè)置input元素display: block;，這樣input元素就是塊級(jí)元素了，塊級(jí)元素是不涉及行框的。
Update1：有<!DOCTYPE html>聲明表示文檔運(yùn)行在標(biāo)準(zhǔn)模式下，去掉以后是運(yùn)行在兼容模式下的，標(biāo)準(zhǔn)模式遵守標(biāo)準(zhǔn)規(guī)范，兼容模式就不一定了。
回答2：把根字體設(shè)置一下
回答3：p標(biāo)簽自帶上下margin
回答4：么有重置css吧 reset下試試
回答5：你的那個(gè)js有問(wèn)題吧
頁(yè)面解析出來(lái)根目錄font-size都是100px,一般都是16px
回答6：首先 p標(biāo)簽自帶margin input{vertical-align: top;}
回答7：確實(shí)和父元素font-size有關(guān)，表現(xiàn)為最小行高是父元素字體的大小，解決方法是設(shè)置合適父元素font-size或者設(shè)置display:block，高票回答很詳細(xì)
相關(guān)文章：
1. 淺談vue生命周期共有幾個(gè)階段？分別是什么？2. javascript - vue.js如何遞歸渲染組件.3. java - web端百度網(wǎng)盤(pán)的一個(gè)操作為什么要分兩次請(qǐng)求服務(wù)器, 有什么好處嗎4. macos - mac下docker如何設(shè)置代理5. css - 關(guān)于偽類背景問(wèn)題6. angular.js - angularjs中添加高德地圖API，地圖顯示不正常，控制臺(tái)報(bào)錯(cuò)，何解？7. css3 - 圖片等比例縮放8. html - JavaScript的Dom操作如何改變子元素的文本內(nèi)容9. linux - libpcap抓包結(jié)果不完整？10. python - 抓包只抓到j(luò)son，真實(shí)的地址卻找不到
網(wǎng)公網(wǎng)安備