ボディータグの周りを切り取ることなくボーダーを取得するには？

私は学習中に作成したHTMLやCSSの変更を視覚化したいので、追加したすべての要素の周りに境界線を配置したいと思う初心者です。ボディータグの周りを切り取ることなくボーダーを取得するには？

問題：html/body要素の周りの青い枠線が切り捨てられ、オーバーフローが非表示に設定されているときに枠線の下側と右側に完全に表示されません。

なぜ、幅と高さが100％に設定されていても、境界線がhtmlページをオーバーフローしていますか？

HTML

<!DOCTYPE html> 
    <html> 
    <head> 
     <title> Practice Webpage </title> 
     <link href="stylesrevised.css" rel="stylesheet" type="text/css" > 
    </head> 

    <body></body> 
    </html>

CSS

html,body{ 
    width: 100%; 
    height: 100%; 
    margin: 0; /* Space from this element (entire page) and others*/ 
    padding: 0; /*space from content and border*/ 
    border: solid blue; 
    border-width: thin; 
    overflow:hidden; 
    display:block; 
}

Here is the resulting webpage

出典

2017-04-13 Zach

[ボーダーは私が見ることができる理由もなく（片側のみ）HTML要素の幅に追加される]の可能な重複（http://stackoverflow.com/questions/33289089/a-border-of-a-html-elements-width-only-on-one-for-no-reason-i） – Rob

私は 'outline：1px solid blue;'を使用することをお勧めします「国境」。ボーダーは、ボックスモデルに影響を与えるだけでなく、以下の解答がマージンの崩壊を防ぐこともできます。 –

overflow: hidden;があなたのために物事をめちゃくちゃにされていただきました！あなた、国境のデフォルト設定は、どのコンテンツボックスでありますピクセルを追加するdivの幅が100pxで、1pxの境界線を追加すると、実際のサイズは102pxになります。

これを解決するには、box-sizing: border-box;を使用します。これにより、境界線が要素の内側に追加されます。

html,body{ 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; /* Space from this element (entire page) and others*/ 
 
    padding: 0; /*space from content and border*/ 
 
    border: solid blue; 
 
    border-width: thin; 
 
    display:block; 
 
    box-sizing: border-box; 
 
}

あなたのサイト全体を通して使用されているすべての境界は、あなたがこれを使用することができ、この効果を作りたい場合は、それをあなたが境界線を追加するたびに設定する必要がなくなります。

*, *:before, *:after { 
    box-sizing: border-box; 
}

出典

2017-04-13 00:43:46 Bosc

@Zach私はあなたの答えを更新しました*あなたがそのコードを追加し続ける必要はありませんので、あなたが追加するすべての将来のボーダーをキャッチします。あなたの周りに青色の境界線を設定したい場合は、境界線を追加する必要があります：1ピクセルの青色、コード – Bosc

コーディングの旅へようこそ！あなたのCSSで、以下を追加してください：box-sizing: border-box;

これは、あなたの要素が所定の幅と高さに収まるようにします。

html,body{ 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; /* Space from this element (entire page) and others*/ 
 
    padding: 0; /*space from content and border*/ 
 
    border: solid blue; 
 
    border-width: thin; 
 
    overflow:hidden; 
 
    display:block; 
 
    box-sizing: border-box; 
 
}

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <title> Practice Webpage </title> 
 
     <link href="stylesrevised.css" rel="stylesheet" type="text/css" > 
 
    </head> 
 

 
    <body></body> 
 
    </html>

出典

2017-04-13 00:43:50 wlh

ありがとうございました！それは働いた。私は可視化したいすべての要素にこれを追加する必要がありますか？（div、画像など）。 – Zach

@Zachその質問に対する答えは - それは依存しています。あなたの要素の大きさに影響を及ぼす詰め物や境界の太さを持たない要素を見たい場合は、yesとします。両方の方法でそれを試してください。開発環境では、幅と高さにパディング* 2、ボーダー幅* 2、マージン* 2を追加して要素のサイズを計算し、その位置とサイズを指定します。それでも、あなたが作成しようとしているものに依存します。要素を視覚化するだけであれば、毎回それを使用することに傷つきません。 '* {ボックスサイズ：border-box;}' – wlh

ボディータグの周りを切り取ることなくボーダーを取得するには？

答えて

関連する問題