盒子模型

任何一個網頁元素包含由這些屬性組成：
内容（content）、邊框（border）、内邊距（padding）、邊界（margin）。
​
這些屬性我們可以用日常生活中的常見事物——盒子作一個比喻來了解，是以叫它盒子模型。整個網頁由各種小盒子組成。
​
1_内容（content）就是盒子裡裝的東西。
​
2_内邊距（padding）就是怕盒子裡裝的東西（貴重的）損壞而添加的泡沫或者
​
其它抗震的輔料。
​
3_邊框（border）就是盒子本身了。
​
4_外邊距（margin）則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙
​
保持通風，同時也為了友善取出。
           

盒子模型的屬性

屬性     作用         
width   寬度         
height  高度         
margin  外邊距        
padding 内邊距        
border  邊框：粗細 線型 顔色
           

盒子模型邊框樣式

外邊距的寫法                    
margin:10px                     四邊相同             
margin:10px  20px;              上下 左右            
margin:10px  20px  30px;        上 左右 下           
margin:10px  20px  30px  40px;  上 右 下 左  （按順時針方向）
​
​
外邊距的寫法   
margin-top:10px;                上外邊距
margin-left:10px;               左外邊距
margin-bottom: 10px;            下外邊距
margin-right:10px;              右外邊距
​
内邊距的寫法
padding-top:10px;               上内邊距
padding-left:10px;              左内邊距
padding-bottom: 10px;           下内邊距
padding-right:10px;             右内邊距
           

練習

/*1. 設定所有元素樣式的内，外邊距為 0px，設定 box-sizing：border-box，*/
 /*即：邊框的寬和高就是盒子的寬和高，不會因為内邊距或内容的變大而撐大。*/
 *{
     padding: 0px;
     margin: 0px;
     box-sizing: border-box;
 }
 /*2.類名 rg_form，寬 986px，高 634px，背景色為1張圖檔，不重複鋪滿*/
 /*上下外邊距 24px，左右自動 auto，邊框為 8px，實線，顔色為#eee。*/
 .rg_form{
     width: 886px;
     height: 634px;
     background: aliceblue;
     margin: 24px auto;
     border: 8px solid #eee;
     background-image: url("img/my.jpg");
    background-repeat: no-repeat;
    background-size:100% 100% ;
 }
 /*3.類名為 rg_form_left，寬度為 256px，左浮動，上内邊距 20px，*/
 /*左内邊距 20px。*/
 .rg_form_left{
     width: 256px;
     float: left;
     padding-top: 20px;
     padding-left: 20px;
 }
 /*4. 使用 p 标簽第一個元素，*/
 /*使用僞類樣式，p:first-child，字型大小 20px，顔色：#ffcd26。*/
 p:first-child{
     font-size: 20px;
     color:#ffcd26 ;
 }
​
 /*5. 使用 p 标簽最後一個元素，*/
 /*使用僞類樣式，p:last-child，字型大小 20px，顔色：#a6a6a6。*/
 p:last-child{
     font-size: 20px;
     color:#a6a6a6 ;
 }
​
 /*6.類名 rg_form_center，寬 458px，左浮動，上内邊距 10px，*/
 /*字型大小 14px，加粗，顔色：#a6a6a6。*/
 .rg_form_center{
     width: 458px;
     float: left;
     padding-top: 10px;
     font-size: 14px;
     font-weight: bold;
     color: #a6a6a6;
 }
​
 /*7. 類名 rg_table，上外邊距 25px。*/
 .rg_table{
 margin-top: 25px;
 }
 /*8. 表格中某一行的文字所在第一個單元格，寬 65px，文本左對齊。*/
table tr td:first-child{
     width: 65px;
     text-align: left;
 }
 /*9. 表格中某一行的文字所在最後一個單元格，寬 293px，高 50px，*/
 table tr td:last-child{
     width: 293px;
     height: 50px;
 }
 /*10. 表格中的文本框，日期框，密碼框，寬 200px，高 32px，*/
 /*行高 line-height：32px，内邊距上下 6px，左右 12px，
  圓角 border-radius:4px，*/
 /*邊框：1px 實線 solid 顔色#a6a6a6，左浮動。*/
 table input[type="text"],table input[type="date"],table input[type="password"]{
     width: 200px;
     height: 32px;
     line-height: 32px;
     padding: 6px 12px;
     border-radius: 4px;
     border: 1px solid #a6a6a6 ;
     color: blue;
     float: left;
 }
​
 /*11. 表格中文字 p 标簽，右浮動，字大小 14px，内邊距，上 20px，右 12px，下 0px，左 0px。*/
 /*p 内部有個 a 标簽，顔色#fc8989。*/
 table p{
     float: right;
     font-size: 14px;
     padding: 20px 12px 0px 0px;
 }
 table p a{
     color: #fc8989;
 }