前端css基础知识点之box-model——盒子模型
- 盒子模型 width/height/padding/border/margin
属性 | 含义 |
---|
width | 宽度 指的是内容宽度 不是盒子真实宽 |
height | 高度 指的是内容高度 不是盒子真实高 |
padding | 内边距 指的是内容到边框的距离 |
border | 边框 |
margin | 元素与元素之间的间距 |
width: 200px;
height: 200px;
padding: 10px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding: 10px 20px;
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px;
边框三要素 | |
---|
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: 0 auto ;
margin-bottom:10px
margin-top:10px
margin-left:10px auto
margin-right:10px