边框
border-color 颜色
border-width 宽度
border-style 样式
| 属性 | 说明 | 显示 |
|---|---|---|
| border-top-color | 上边框颜色 | border-top-color:#369 |
| border-right-color | 右边框颜色 | border-right-color:#369 |
| border-bottom-color | 下边框颜色 | border-bottom-color:#369 |
| border-left-color | 左边框颜色 | border-left-color:#369 |
四个边框同一个颜色:
border-color:#369
上下，边框颜色：#369 左右边框颜色：#000
border-color:#369 #000;
上边框颜色：#369 左右边框颜色：#000 下边框颜色#f00
border-color:#369 #000 #f00;
上，右，下，左边框颜色：#369 #000 #f00 #00f
border-colr:#369 #000 #f00 #00f
边框粗细
border-width
thin 定义细的边框
thick 定义粗的边框
medium 定义中等边框
inherit 规定应该从父元素继承边框宽度
像素值：px
使用方法：
border-top-width:5px; 上
border-right-width:10px; 右
border-bottom-width:8px; 下
border-left-width:22px; 左
border-width:5px ;
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px; 上，右，下，左
边框样式 border-style
none 没有边框
hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
border简写
同时设置边框的颜色，粗细和样式
border:1px solid #3a6587;
boouder:1px dashed red;
外边距
margin-top 上
margin-right 右
margin-bottom 下
margin-left 左
用法
margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px; 上右下左
margin :3px 5px; 上下 左右
margin :3px 5px 7px; 上左右下
margin :8px;
网页剧中对齐
margin : 0px auto;
上下为0像素，左右自适应
内边距
padding-left 左
padding-right 右
padding-top 上
passing-bottom 下
用法
padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding:10px;
盒子模型的尺寸
盒子模型总尺寸=border+padding+margin+内容宽度
border 边框
padding 内边距
margin 外边距
box-sizing
box-sizing：content-box (默认值盒子的总尺寸) | border-box （盒子的宽度或高度等于元素内容的宽度或者高度） | inherit;