為什么盒子1不在紅框中間
<!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;
? ? border:1px solid red;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
</body>
</html>
按照這個(gè)代碼寫，四面填充相同為什么 ?“盒子一” 這幾個(gè)字不在紅框正中間？
2016-08-02
因?yàn)檫@里面設(shè)置的width以及height是內(nèi)容的邊界，以這個(gè)例子來(lái)說(shuō)，盒子這倆個(gè)字的外面是有一個(gè)100x100px的無(wú)形邊界的，所以你只寫盒子這倆個(gè)字只能看出來(lái)它是在這個(gè)無(wú)形邊界的左上角，在多寫幾個(gè)字就會(huì)發(fā)現(xiàn)居中了
2016-03-01
按照你這個(gè)寫法，文本“盒子1”是內(nèi)聯(lián)元素，內(nèi)聯(lián)元素是在行內(nèi)從左到右排布，“盒子1”的寬度并沒(méi)有達(dá)到100-20 = 80px，要想讓“盒子1”居中顯示，加text-align:center;
2016-03-01
?<!DOCTYPE HTML>
? ?<html>
? ?<head>
? ? ? ?<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
? ? ? ?<title>填充</title>
? ? ? ?<style type="text/css">
? ? ? ? ? ?*{
? ? ? ? ? ? ? ?margin: 0;
? ? ? ? ? ? ? ?padding: 0;
? ? ? ? ? ?}
? ? ? ? ? ?#box1{
? ? ? ? ? ? ? ?width:100px;
? ? ? ? ? ? ? ?height:100px;
? ? ? ? ? ? ? ?padding:10px;
? ? ? ? ? ? ? ?border:1px solid red;
? ? ? ? ? ? ? ?display: block;
? ? ? ? ? ? ? ?position: relative;
? ? ? ? ? ?}
? ? ? ? ? ?p{
? ? ? ? ? ? ? ?width: 40px;
? ? ? ? ? ? ? ?height: 40px;
? ? ? ? ? ? ? ?border: 1px solid red;
? ? ? ? ? ? ? ?position: absolute;
? ? ? ? ? ? ? ?top: 30px;
? ? ? ? ? ? ? ?left:30px;
? ? ? ? ? ?}
? ? ? ?</style>
? ?</head>
<body>
<div id="box1"><p>盒子1</p></div>
</body>
</html>
</head>
<body>
</body>
2016-03-01
盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一拷貝進(jìn)去
多打幾個(gè)字看看效果：）
2016-03-01
因?yàn)槟阍O(shè)置的是盒子模型，沒(méi)有對(duì)立面的文本進(jìn)行設(shè)置