為什么盒子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>
按照這個代碼寫，四面填充相同為什么 ?“盒子一” 這幾個字不在紅框正中間？
2016-08-02
因為這里面設置的width以及height是內容的邊界，以這個例子來說，盒子這倆個字的外面是有一個100x100px的無形邊界的，所以你只寫盒子這倆個字只能看出來它是在這個無形邊界的左上角，在多寫幾個字就會發現居中了
2016-03-01
按照你這個寫法，文本“盒子1”是內聯元素，內聯元素是在行內從左到右排布，“盒子1”的寬度并沒有達到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
盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一拷貝進去
多打幾個字看看效果：）
2016-03-01
因為你設置的是盒子模型，沒有對立面的文本進行設置