CSS盒子模型

1、边框

     border : 1px  solid pink;  没有顺序

      border top: 1px solid red;  /* 只设定上边框，其余同理 */

属性	作用
border-width	定义边框粗细，单位px
border-style	边框的样式，solid实线边框、dashed虚线边框、dotted点线边框
border-color	边框颜色

2、表格的细线边框

border-collapse: collapse;  /* 表示相邻边框合并在一起 */                                                        

3、内边距

值的个数	表达意思
padding: 5px;	1个值表示上下左右都有5像素内边距
padding:5px 10px;	2个值代表上下内边距是5像素，左右内边距是10像素
padding:5px 10px 20px;	3个值代表上内边距5像素，左右内边距是10像素，下内边距20像素
padding:5px 10px 20px 30px;	4个值代表上是5像素，右10像素，下20像素，左30像素

当盒子已有宽度和高度，再指定内边距会撑大盒子

 4、外边距

属性	作用
margin-left	左外边距（margin-left: auto;）
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

外边距可以让块级盒子水平居中，但须满足两个条件：盒子必须指定了宽度；盒子左右的外边距都设置为auto 。语法：.header{ width: 500px; margin: 0 auto;}

5、清除内外边距       

/* 行内元素为了照顾兼容性，尽量只设置左右外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了 */

        *{

            padding: 0;

            margin: 0;

        }

6、盒子阴影 、文字阴影

        盒子阴影：box-shadow:h-shadow v-shadow blur spread color inset;

         /*盒子阴影不占用空间，不会影响其他盒子排列  */

        文字阴影：text-shadow: h-shadow  v-shadow  blur color;

值	描述
h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
insert	可选，将外部阴影（outset）改为内部阴影。【默认外阴影，但不可以写outset，否则阴影无效】

6、其他 

去掉li前面的项目小圆点：list-style:none;

圆角边框：border-radius:length;

 /*100px 等价于50%，就是宽度和高度的一半  */

 border-radius: 100px;

若为正方形，设置为圆可把数值改为宽度和高度的一半（或50%）；

若为矩形设置为高度的一半即可；

该属性的简写，可以跟四个值分别代表：左上角、右上角、右下角、左下角