盒模型，填充
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>填充</title>
<style type="text/css">
#box1{
? ? width:100px;
? ? height:100px;
? ? padding:10px 10px 10px 10px;
? ? border:1px solid red;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
</body>
</html>
padding是元元素內(nèi)容與邊框的距離，為什么我設(shè)置了右邊和下邊是10px距離還是那么大
2018-04-15
我是這么理解的，你的weight和height設(shè)置的是元素內(nèi)容的寬，你可以假想創(chuàng)建了一個(gè)100*100的文本框在里面輸入文字盒子1，這時(shí)候盒子1是左對(duì)齊的，顯然一個(gè)100*100的文本框里左對(duì)齊會(huì)在右下方留下大量的空白。padding設(shè)置的是元素內(nèi)容與邊框之間的距離，在你的元素內(nèi)容框中，文字本來就在左上方，無論你怎么添加padding或者修改都不能達(dá)到文字居中的效果，但是實(shí)際上邊框與你創(chuàng)建的元素內(nèi)容框之間的距離上下左右都已經(jīng)是10了。我采用了兩種方法來驗(yàn)證，第一種是設(shè)置文字居中，然后來觀察文本框的位置，在#box1中添加了代碼
? text-align:center;?設(shè)置水平居中，
? line-height:100px;設(shè)置垂直居中
在其他參數(shù)不變的情況下我得到了如下的結(jié)果
之后我刪除了添加的居中語句，還原到原始的練習(xí)狀態(tài)，并在chrome中打開文件，查看了該文件的盒模型，效果如下
忽略亂碼的情況，左邊淡藍(lán)色的部分顯示了元素內(nèi)容的長寬，明顯可見是一個(gè)正方形，且與紅色邊框邊距均勻，再看右側(cè)的淡藍(lán)色盒子模型，其中數(shù)子100*100與代碼設(shè)置保持一致，與上面的結(jié)論一致。我已我覺得應(yīng)該是上述原因，其實(shí)你已經(jīng)設(shè)置好了，只是文本內(nèi)容還是左置頂，沒辦法直觀的看到。你可以自己按照上面的方法也試一下，如果有問題或者你發(fā)現(xiàn)我的解釋不對(duì)的話也希望你可以指出，共同進(jìn)步。謝謝
2018-04-05
跟字體有關(guān)吧