ウェブフロントエンド
htmlチュートリアル
li element_html/css_WEB-ITnose に同じパディングを設定するときに、padding-bottom と padding-right が余分になる理由を教えてください。
li element_html/css_WEB-ITnose に同じパディングを設定するときに、padding-bottom と padding-right が余分になる理由を教えてください。
コードは次のとおりです
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img {padding:0;margin:0;} #div1{ margin:10px; width:300px; height:200px; } #div1 textarea{ width:300px; height:180px; } #div2{ margin:10px auto; height:400px; width:400px; border:1px solid black; overflow:auto; } #div2 ul li{ border-bottom:1px dashed black; list-style:none; padding:10px 10px 10px 10px; }</style><script type="text/javascript"> window.onload=function(){ var adiv1=document.getElementById("div1"); var adiv2=document.getElementById("div2"); var obtn=adiv1.getElementsByTagName("input")[0]; var otxt=adiv1.getElementsByTagName("textarea")[0]; var oul=document.getElementById("ul1"); obtn.onclick=function(){ var oli=document.createElement("li"); oli.innerHTML=otxt.value; otxt.value=""; if(oul.children.length>0) oul.insertBefore(oli,oul.children[0]); else oul.appendChild(oli); //运动 var iheight=oli.offsetHeight; alert(iheight); oli.style.height="0"; move(oli,{height:iheight}); }; }; function getStyle(obj,attr){ if(obj.currentStyle) return obj.currentStyle[attr]; else return getComputedStyle(obj,false)[attr]; } function move(obj,json,fun){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var astop=true; for(var attr in json){ var cur=0; if(attr=="opacity") cur=Math.round(parseFloat(getStyle(obj,attr))*100); else cur=parseInt(getStyle(obj,attr)); var speed=(json[attr]-cur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur!=json[attr]) astop=false; if(attr=="opacity"){ if(obj.style.filter) obj.style.filter="alpha(opacity:"+(speed+cur)+")"; else obj.style.opacity=(speed+cur)/100; } else obj.style[attr]=speed+cur+"px"; } if(astop){ clearInterval(obj.timer); if(fun) fun(); } },30); }</script></head><body> <div id="div1"> <form> <textarea id="text1"></textarea> <input type="button" value="发布" id="btn"/> </form> </div> <div id="div2"> <ul id="ul1"> </ul> </div></body></html>
Reply Discussion (solution)
ずっと読んでいて何を求めているのか分かりませんでしたが、下のスペースは明らかにそうです。上部よりも大きいです
長い間読んでいて、質問の意味がわかりませんでした
UL の上下のパディングは同じですが、下のスペースは明らかに上部よりも大きいです
これは高さですoffsetHeight と li の box- の定義 サイズ変更は content-box の競合によって引き起こされます
offsetHeight プロパティは、パディング、ボーダー、スクロールバーを含む要素の表示可能な高さをピクセル単位で返します
つまり、offsetHeight にはコンテンツが含まれます。 padding-top、padding-bottom、border-top、border-bottom、およびスクロールバーの高さ
box-sizing: content-box で指定された要素の高さにはコンテンツのみが含まれ、他の要素は含まれません。 , li の高さは後でリセットされ、常に予想より高くなります。padding-top + padding-bottom の合計を追加します。
その後、padding-top と padding-bottom は両方とも指定した 10px になります。コンテンツの高さに余分な部分が追加されますが、コンテンツのフォントサイズは大きくなっておらず、テキストがコンテンツの縦方向中央に配置されるように処理されていないため、上下の余白が異なって見えます
CSS に従って、スクロールバーが存在しない場合は問題は解決します
li{ box-sizing: border-box;}W3C の box-sizing の定義への参照
3.1. box-sizing プロパティ
名前: box-sizing
値: content-box | border-box
初期値: content-box
content-box
これは、CSS2.1 で指定された幅と高さ (およびそれぞれの min/max プロパティ) が幅と高さに適用されます。要素のパディングとボーダーは、指定された幅と高さの外側に配置され、描画されます。
幅と高さの長さとパーセンテージの値 (およびそれぞれの最小値/最大値)。つまり、要素に指定されたパディングまたはボーダーは、この指定された幅と高さの内側に配置され、描画されます。コンテンツの幅と高さは、ボーダーとパディングの幅を減算することによって計算されます。指定された幅と高さのプロパティから関連する辺の高さを負にすることはできません ([CSS21]、セクション 10.2)、この計算は 0 で下限されます。たとえば getComputedStyle() を通じて公開されるように、使用される値は境界ボックスも参照します。
この定義は、box-sizing のデフォルト値が content -box であることを示します。box-sizing の値は、CSS の高さの定義に影響します (垂直方向のパディングとボーダーが高さに含まれるかどうか)。
W3C 上のボックスサイジングの定義参照
3.1. box-sizing プロパティ
名前: box-sizing
値: content-box | border-box
初期値: content-box
content-box
これは、CSS2.1 で指定されている幅と高さの動作です。 指定された幅と高さ（およびそれぞれの最小/最大プロパティ）は、要素のコンテンツ ボックスの幅と高さにそれぞれ適用されます。 要素のパディングと境界線は、指定された幅と高さの外側にレイアウトされて描画されます。
ボーダーボックス
この要素の長さと幅と高さのパーセンテージ値（およびそれぞれの最小/最大プロパティ）により、要素の境界ボックスが決定されます。 つまり、要素に指定されたパディングや境界線は、この指定された幅と高さの内側にレイアウトされて描画されます。 コンテンツの幅と高さは、指定された幅と高さのプロパティからそれぞれの辺の境界線とパディング幅を減算することによって計算されます。 コンテンツの幅と高さは負の値にはできないため ([CSS21]、セクション 10.2)、この計算は 0 で下敷きされます。使用される値は、たとえば getComputedStyle() を通じて公開されるため、境界ボックスも参照します。
この定義は、ボックス サイズの決定がコンテンツ ボックスであることを示します。 box-sizing 的值将影响 css 中 高さの定义--垂直方向上のパディング 和ボーダー 究竟会不会包含高さ中に含まれる
W3C 上 box-sizing の定規参照
3.1. box-sizing プロパティ
名前: box-sizing
値: content-box | border-box
初期値: content-box
content-box
これは、CSS2.1 で指定されている幅と高さの動作です。 指定された幅と高さ（およびそれぞれの最小/最大プロパティ）は、要素のコンテンツ ボックスの幅と高さにそれぞれ適用されます。 要素のパディングと境界線は、指定された幅と高さの外側にレイアウトされて描画されます。
ボーダーボックス
この要素の長さと幅と高さのパーセンテージ値（およびそれぞれの最小/最大プロパティ）により、要素の境界ボックスが決定されます。 つまり、要素に指定されたパディングや境界線は、この指定された幅と高さの内側にレイアウトされて描画されます。 コンテンツの幅と高さは、指定された幅と高さのプロパティからそれぞれの辺の境界線とパディング幅を減算することによって計算されます。 コンテンツの幅と高さは負の値にはできないため ([CSS21]、セクション 10.2)、この計算は 0 で下敷きされます。使用される値は、たとえば getComputedStyle() を通じて公開されるため、境界ボックスも参照します。
ただし如果 出现了滚动条、页面就会变成この个样子
半天不見懂你问的は何ですか
ul上下のパディング一样、ただし、下の空白明显は上面より大きいです
你这里又给他加了高度//运动 var iheight=oli.offsetHeight; alert(iheight); oli.style.height="0"; move(oli,{height:iheight});
但是如果 出现了滚动条，页面就会变成这个样子
我分别在 Chrome 42, IE8, Firefox 39.0 测试, 只发现 Firefox 存在这个问题
下面多余的部分不全是padding，还有一部分是li的高。
oli.offsetHeight获取的值是包括padding在内的，但是oli.style.height这样赋值的高是不包括padding的。
最简单的解决方法就是减掉padding，即var iheight=oli.offsetHeight-20;
但这样解决效果不太好，因为oli.style.height=“0”;时其实padding部分还是看的见的。
要效果好，也要简单就用jquery吧，修改如下
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><!--+++++++++++++加载jquery++++++++++++++--><script type="text/javascript"> window.onload=function(){ var adiv1=document.getElementById("div1"); var adiv2=document.getElementById("div2"); var obtn=adiv1.getElementsByTagName("input")[0]; var otxt=adiv1.getElementsByTagName("textarea")[0]; var oul=document.getElementById("ul1"); obtn.onclick=function(){ var oli=document.createElement("li"); oli.style.display="none";//+++++++++++++++++++++先隐藏++++++++++++++++++++ oli.innerHTML=otxt.value; otxt.value=""; if(oul.children.length>0) oul.insertBefore(oli,oul.children[0]); else oul.appendChild(oli); $(oli).slideDown(800);//++++++++++++++++用jquery方法展开li++++++++++++++++++++ /*-------------------------------这段不需要了------------------------------------------ //运动 var iheight=oli.offsetHeight-20; alert(iheight); oli.style.height="0"; move(oli,{height:iheight}); */ }; };</script>
但是如果 出现了滚动条，页面就会变成这个样子
仅在 Firefox 中发现这个问题
原因已经证实:
当 div2 出现垂直滚动条时, 将压缩 ul 和 li 的宽度, 而每一个 li 内容没有发生变化, 当宽度减小时, 其中文字占用的行数就有可能增加, 这样就需要更大的 height 才能容纳, 此时 Chrome, IE 都忽略了 height 被设成的固定的值, 而是将它重新计算并调整;
但 Firefox 的处理方式却不一样, 它没有忽略 height 那个已被设定的固定的值, 而是维持那个值, 不做重新计算并调整, 所以就造成最后文本超出边界的问题. 而最新插入的 li 是在插入的时候(无论有(已有/将有)无滚动条)自动计算出的 height, 所以唯一最新的 li 不会存在文本超出边界的问题.
解决方案:
在 每一次插入新的 li 之前, 将上一个 li 的 height 恢复为浏览器自动计算
经测试, Chrome 42, IE8, Firefox 39.0 都没有问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img {padding:0;margin:0;} #div1{ margin:10px; width:300px; height:200px; } #div1 textarea{ width:300px; height:180px; } #div2{ margin:10px auto; height:400px; width:400px; border:1px solid black; overflow:auto; } #div2 ul li{ border-bottom:1px dashed black; list-style:none; padding:10px 10px 10px 10px; box-sizing: border-box; }</style><script type="text/javascript"> window.onload=function(){ var adiv1=document.getElementById("div1"); var adiv2=document.getElementById("div2"); var obtn=adiv1.getElementsByTagName("input")[0]; var otxt=adiv1.getElementsByTagName("textarea")[0]; var oul=document.getElementById("ul1"); obtn.onclick=function(){ var oli=document.createElement("li"); oli.innerHTML=otxt.value; otxt.value=""; if(oul.children.length>0) { oul.children[0].style.height = 'auto'; // 将上一个 li 的 height 恢复为浏览器自动计算 oul.insertBefore(oli,oul.children[0]); } else oul.appendChild(oli); //运动 var iheight=oli.offsetHeight; alert(iheight); oli.style.height="0"; move(oli,{height:iheight}); }; }; function getStyle(obj,attr){ if(obj.currentStyle) return obj.currentStyle[attr]; else return getComputedStyle(obj,false)[attr]; } function move(obj,json,fun){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var astop=true; for(var attr in json){ var cur=0; if(attr=="opacity") cur=Math.round(parseFloat(getStyle(obj,attr))*100); else cur=parseInt(getStyle(obj,attr)); var speed=(json[attr]-cur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur!=json[attr]) astop=false; if(attr=="opacity"){ if(obj.style.filter) obj.style.filter="alpha(opacity:"+(speed+cur)+")"; else obj.style.opacity=(speed+cur)/100; } else obj.style[attr]=speed+cur+"px"; } if(astop){ clearInterval(obj.timer); if(fun) fun(); } },30); }</script></head><body> <div id="div1"> <form> <textarea id="text1"></textarea> <input type="button" value="发布" id="btn"/> </form> </div> <div id="div2"> <ul id="ul1"> </ul> </div></body></html>
看了半天没看懂你问的是什么
ul上下的padding一样，但是下面的空白明显大于上面 你这里又给他加了高度
//运动 var iheight=oli.offsetHeight; alert(iheight); oli.style.height="0"; move(oli,{height:iheight});
但是如果 出现了滚动条，页面就会变成这个样子
我分别在 Chrome 42, IE8, Firefox 39.0 测试, 只发现 Firefox 存在这个问题
chrome43，IE11也存在问题
下面多余的部分不全是padding，还有一部分是li的高。
oli.offsetHeight获取的值是包括padding在内的，但是oli.style.height这样赋值的高是不包括padding的。
最简单的解决方法就是减掉padding，即var iheight=oli.offsetHeight-20;
但这样解决效果不太好，因为oli.style.height=“0”;时其实padding部分还是看的见的。
要效果好，也要简单就用jquery吧，修改如下
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><!--+++++++++++++加载jquery++++++++++++++--><script type="text/javascript"> window.onload=function(){ var adiv1=document.getElementById("div1"); var adiv2=document.getElementById("div2"); var obtn=adiv1.getElementsByTagName("input")[0]; var otxt=adiv1.getElementsByTagName("textarea")[0]; var oul=document.getElementById("ul1"); obtn.onclick=function(){ var oli=document.createElement("li"); oli.style.display="none";//+++++++++++++++++++++先隐藏++++++++++++++++++++ oli.innerHTML=otxt.value; otxt.value=""; if(oul.children.length>0) oul.insertBefore(oli,oul.children[0]); else oul.appendChild(oli); $(oli).slideDown(800);//++++++++++++++++用jquery方法展开li++++++++++++++++++++ /*-------------------------------这段不需要了------------------------------------------ //运动 var iheight=oli.offsetHeight-20; alert(iheight); oli.style.height="0"; move(oli,{height:iheight}); */ }; };</script>可以用
function getStyle(obj,attr){ if(obj.currentStyle) return obj.currentStyle[attr]; else return getComputedStyle(obj,false)[attr]; }谢谢，问题解决了！
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1662
14
1418
52
1311
25
1261
29
1234
24
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTML、CSS、およびJavaScript：Web開発者に不可欠なツール
Apr 09, 2025 am 12:12 AM
HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
HTML：構造、CSS：スタイル、JavaScript：動作
Apr 18, 2025 am 12:09 AM
Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
HTMLの未来：ウェブデザインの進化とトレンド
Apr 17, 2025 am 12:12 AM
HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。
HTML対CSS対JavaScript：比較概要
Apr 16, 2025 am 12:04 AM
Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。
HTML、CSS、およびJavaScriptの未来：Web開発動向
Apr 19, 2025 am 12:02 AM
HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。
