html盒子模型

盒子的组成部分

html ，边框，外边距，内边距，和实际的内容

border边框 content 内容 padding 内边距 外边距 margin

不想撑开盒子

box-sizing: border-box;

/*默认的是撑开盒子*/
box-sizing: content-box;

1.边框的样式

/*实线*/
border-style: solid;

/*虚线*/
border-style: dashed;

/*点线*/
border-style: dotted;

/*没有样式*/
border-style: none;

2.盒子边框的样式

/*边框的粗细*/
border-width: 5px;

/*边框的颜色*/
border-color: #;

/*边框复合写法（没有先后顺序）*/
border: 1px solid red;

/*上边框的样式*/
border-top: 1px solid #000;

3.合并边框

table,
td {
border: 1px solid red;
border-collapse: collapse;
border-width: 1px;
text-align: center;
}