javascript - rem を使用した後、要素間の間隔が非常に広い場合はどうすればよいですか?-PHP中国語ネットワークQ&A

記事特集学ぶダウンロードに質問プログラミング辞典ゲーム最近の更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

javascript - rem を使用した後、要素間の間隔が非常に広い場合はどうすればよいですか?

给我你的怀抱 2017-06-30 09:59:24

958

モバイルページアダプティブソリューション - レムレイアウト

すみません、なぜ p タグと input タグの間の距離がこれほど離れているのですか?

PS.を削除しても問題ありません。これはなぜですか?

リーリー

给我你的怀抱

全員に返信 (7)

阿神2017-06-30 10:01:24 7棟

の説明は次のとおりです:input元素是行内块元素，所以它所在的行会形成一个行框。然后行框的高度是和line-height属性相关的，line-height

コンテンツがインラインレベルの要素で構成されるブロックコンテナ要素では、「line-height」は要素内のラインボックスの最小の高さを指定します。最小の高さは、ベースライン上の最小の高さとその下の最小の深さで構成されます。、各行ボックスが要素のフォントと行の高さのプロパティを持つ幅ゼロのインラインボックスで始まるのとまったく同じです。私たちはその想像上のボックスを「ストラット」と呼びます
。

要素を整列させ、これらすべてのボックスの最も高い上境界線と最も低い下境界線の間の高さが実際の行の高さを構成します。line-height定义的是行的最小高度，当行内包含行内元素的时候，每个行内元素会生成一个行内框，然后行内元素根据vertical-align

では、ブロック要素のフォントサイズと行の高さを持つ仮想のゼロ幅要素である

要素が、最終的な実際の行の高さに関与することを仕様はどのように保証するのでしょうか。line-height定义的是行的最小高度的呢？
其实，参与行框形成的元素，除了这些实际存在的行内元素，还存在一个strut

それでは、この問題を見てみましょう:

ページが実行されると、font-size属性が HTML 要素に追加されます。このサイズが何に関係しているのかわかりませんでした。コードを実行するとfont-size: 50px;になります。以下はfont-size: 50px;で説明します。
font-size属性は継承可能であるため、p要素のfont-sizeも 50 ピクセルです。 height のデフォルト値は標準です。仕様で推奨されている通常の値は、ブラウザの実装に関連しています。ここでは 1.0 が使用されていると仮定します。 p 要素はブロックです。 Level 要素はラインボックスを生成せず、line-height とは関係ありません。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，所以最后取得应该是strut2 番目の要素は input 要素で、inline によって生成されるインラインブロック要素です。ブロック要素は、要素の上部の外側境界から下部の外側境界まで (上部の境界から下部の境界までのマージン)、仮想要素strutによって高さ font-size * line-height = 50px * 1 = 50px これは、2 つのインラインボックスがベースラインの配置に従って配置され、2 つのインラインボックスの最も高い上限と最も低い下限が次のようになります。最終ラインボックスとみなされます。 input 要素によって生成されるインラインボックスは 50 ピクセルよりはるかに小さいため、最終結果はstrutの上下の境界になるはずです。そのため、ラインボックスは 50 ピクセルとなり、「いわゆる「真ん中に大きな空白があります。」