前端css基础知识点之box-model——盒子模型

前端css基础知识点之box-model——盒子模型

• 盒子模型 width/height/padding/border/margin

属性	含义
width	宽度 指的是内容宽度 不是盒子真实宽
height	高度 指的是内容高度 不是盒子真实高
padding	内边距 指的是内容到边框的距离
border	边框
margin	元素与元素之间的间距

• width，height

width: 200px;
height: 200px;

• padding

/* 一个值 相当于四个方向是相同值*/
padding: 10px; 
/* 按照方向进行展开*/
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
/* 两个值 相当于上下10px 左右20px*/
padding: 10px 20px;
/* 上 10 右 20 下 30 左 20 没有就找对立面*/
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px;

• border

边框三要素
border-width	边框宽度
border-style	边框样式 solid实线 dashed虚线
border-color	边框颜色

/*四周*/
border: 10px solid blue;
/* 按照方向进行展开*/
border-bottom: 5px solid blue;
border-top: 5px solid blue;
border-right: 5px solid blue;
border-left: 5px solid blue;

• margin

margin: 0 auto ;
/*auto 可以让有宽度的块级元素水平居中*/
margin-bottom:10px
margin-top:10px
margin-left:10px auto
margin-right:10px