html盒子模型

2021-05-10 22:37:38发布

盒子的组成部分

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;
}
TAG标签:

登录 后发表评论
0条评论
还没有人评论过~