盒子模型基礎（一）
阿新 • • 發佈：2018-04-01
參考 不一定 eight 顏色 ctype -a title 空間 矩形
盒子模型基礎（一）
參考書籍：基於web標準的網頁設計與制作（第二版）
網頁就是由多個盒子通過不同的排列方式（上下排列、左右排列、嵌套排列）。（p118）
如圖：
.div{
background:#9cf;
margin:20px;
border:10px solid #039;
padding:40px;
width:200px;
height:88px;
}
<div class="div">
盒子模型
</div>則該像素占據的網頁總寬度為：20+10+40+200+40+10+20=340px。其中元素內容寬度為200px,高度為88px。
默認情況下盒子邊框為0，背景是透明的，所以不設置css樣式下元素盒子不可見，但是依然占據網頁空間。
通過css重新定義元素樣式，可以分別設置元素盒子的margin、padding、border的寬度值，還可以設置盒子邊框和背景的顏色，巧妙設置可以美化網頁元素。（p120、121）
這是兩種div居中的方法：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>div居中問題</title> <style type="text/css"> .in{ text-align: center; /*讓div內部文字水平居中*/ line-height:300px; /*讓div內部文字垂直居中，與div的高度對應，適當微調*/ background-color: red; /*背景為紅色*/ border-radius: 20px; /*矩形的圓角*/ width: 300px; height: 350px; margin: auto; /* 設置margin:auto;並設置top、left、right、bottom的值相等即可，不一定要都是0。 */ position: absolute; top: 0; left: 0; right:0; bottom: 0; } /* 讓left和top都是50%， 這在水平方向上讓div的最左與屏幕的最左相距50%， 垂直方向上一樣， 所以再用transform向左（上）平移它自己寬度（高度）的50%， 也就達到居中效果了。 */ .main{ text-align: center; line-height:300px; background-color: red; border-radius: 20px; width: 300px; height: 350px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } </style> </head> <body> <!-- <div class="in" > --> <div class="main"> <h1>居中對齊</h1> </div> </body> </html>
盒子模型基礎（一）