ホームページ >ウェブフロントエンド >htmlチュートリアル >li element_html/css_WEB-ITnose に同じパディングを設定するときに、padding-bottom と padding-right が余分になる理由を教えてください。
li element_html/css_WEB-ITnose に同じパディングを設定するときに、padding-bottom と padding-right が余分になる理由を教えてください。
- WBOYオリジナル
- 2016-06-24 11:40:271303ブラウズ
コードは次のとおりです
<!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}); 这儿是为了实现一个滑动效果，和padding没关系吧，何况最终的高度并没有改变
但是如果 出现了滚动条，页面就会变成这个样子
我分别在 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> 是的，我不用offsetHeight就可以了 可以用
function getStyle(obj,attr){ if(obj.currentStyle) return obj.currentStyle[attr]; else return getComputedStyle(obj,false)[attr]; }这个函数来获取li的高度就不会包括padding 谢谢，问题解决了！