盒子模型解释
元素在页面中显示成一个方块，类似一个盒子，盒子模型就是使用显示中盒子来做比喻，帮助我们设置元素对应的样式。把元素叫做盒子，设置对应的样式分别为：盒子的边框（border）、盒子内的内容和边框之间的间距（padding）、盒子与盒子之间的间距（margin）。
设置边框
设置一遍的边框，比如顶部边框，可以按如下设置
border-top:10px solid red;
设置内间距padding
设置盒子四边的内间距，可设置如下：
padding：20px 40px 50px 30px; /*
padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：
padding：20px 40px 50px; /*
设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/
padding：20px; /* 设置四边内边距为20px
设置外间距margin
外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法
网友评论