CSS中使用盒模型

1.margin 分块嵌套的边框边距

控制盒子与盒子之间的间距

四个方向的生效显示

margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;

或者
margin:10px,20px,30px,40px;

2.border 盒模型边框设置

border设置的三要素

1.盒子边框宽度：20px;
2.盒子形状：soild(实线)，dashed(虚线)
3.盒子颜色：green，gray等
例如 : border:10px soild red
设置单条边框：

border-top:            //上
border-right:          //右
border-bottom:         //下
border-left:            //左

用css控制边框来画三角形

内嵌控制到最低，同时将边框加大到最大，其余边框变成透明色

  #trip{
        width:0px;
        height: 0px;
        border-top:  80px solid white; 
        border-right:  80px solid white; 
        border-bottom:  80px solid blue; 
        border-left:  80px solid white; 
    }

其中用CSS控制div透明：

使用opacity属性，其数值从0.0-1.0代表透明度
0.0表示完全透明
1.0表示完全不透明
例如：
div{ opacity:0.5 } //表示半透明

3.padding 控制盒模型的内边距

** 主要用于控制div内文字与边框的距离**
与margin类似，可分别控制四个边框的内边距
设置单条边框：

padding-top:            //上
padding-right:          //右
padding-bottom:         //下
padding-left:            //左