CSS小盒子

1.边框border（三种形式）：

border-width      定义边框粗细

border-style       边框的样式

border-color      边框颜色

简写：border：1px solied red;

solid表示实线

dashed表示虚线

sotted表示点线

2.内边框padding

padding-left              左内边距

padding-right           右内边距

padding-top             上内边距

padding-bottom       下内边距

简写可以一到四个值

一个值代表上下左右        例如：padding：5px

两个值代表上下和左右    例如：padding：2px 5px;

三个值代表上、左右、下  例如：padding：2px 5px 4px

四个值代表上、右、下、左   例如：1px 2px 3px 4px

注意：一旦改变了内边框padding值的大小，盒子的大小也会跟着改变，所以我们会用到后边学的margin

3.外边距margin

margin-left     左外边距

margin-right  右外边距

margin-top   上外边距

margin-bottom 下外边距

如果想让盒子在页面保持居中状态，我们可以使用以下方式

margin：0 auto;  (块元素居中的方法）

行内块元素可用之前学到的text-align : center ; 

4.清除内外边距：网页元素很多都带有默认的内外边距，而且不同的浏览器的值不一样，所以当我们写代码时首先把边框值初始化

*  {

  margin : 0 ; 

  padding : 0 ; 

}

5.我们在练习制作网站时可能会用到别人的盒子的边距颜色等，这时候我们需要下载ps来测量边距及颜色