css中把元素叫做盒子，设置对应的样式分别为：盒子的宽度（width）、盒子的高度（height）、盒子的边框（border）、盒子内的内容和边框之间的间距（padding）、盒子和盒子之间的间距（margin）。

 

设置宽高：

width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体的宽度 */

 

height:200px;  /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体的高度 */

 

 

 

设置边框border：

设置一边的边框，如：顶部边框

 

border-top-color:red;  /* 设置顶部边框颜色为红色 */

 

border-top-width:10px;  /* 设置顶部边框粗细为10px */

 

border-top-style:solid;  /* 设置顶部边框的线为实线 */

 

/* 边框常用的线：solid实线、bashed虚线、dotted点线 */

 

css 盒子模型上面三句可以简写为一句：

 

border-top:10px solid red;

 

 设置其他三个边的方法和上面一样，把上面的top换成left（左边）、right（右边）、bottom（底边）即可

 

 四个边如果设置一样，可以将四个边合并成一句：

 

border:10px solid red;

 

 设置内间距padding:

 设置盒子四边的内间距，如：

 

 padding-top:20px;  /* 设置顶部内间距 */

 

 padding-left:30px;  /* 设置左边内间距 */

 

 padding-right:40px;  /* 设置右边内间距 */

 

 padding-bottom:50px;  /* 设置底部内间距 */

 

上面的设置可以简写，如：

 

padding:20px 40px 50px 30px;  /* 四个值按照顺时针方向，分别设置的是上 右 下 左，四个方向的内边距值 */

 

padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

 

padding:20px 40px 50px;  /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */

 

paddinig:20px 40px;  /* 设置上下内边距为20px，左右内边距为40px */

 

padding:20px;  /* 设置四周内边距为20px */

 

设置外间距margin:

 

外边距的设置方法和padding的设置方法相同，将上面设置项中的’padding’换成’margin’就是外边距设置方法。

 

盒子模型的实际尺寸：

 

盒子的宽度：width + 左右border的值 + 左右padding的值

 

盒子的高度：height + 上下border的值 + 上下padding的值