盒模型
Posted baoshuang0205
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了盒模型相关的知识,希望对你有一定的参考价值。
和模型的概述
边:边界
内边距:解决内部矛盾 padding
外边距:解决外部矛盾 margin
css的padding
padding属于盒子内部的,padding改变盒子得跟着增加
写法
<style> .box{ width: 200px; height: 200px; background-color: deeppink; margin-bottom: 5px; /*盒子与盒子之间的距离*/ /*写法第一种*/ padding-top: 50px; /*内边距上*/ padding-right: 50px; /*内边距右*/ padding-right: 50px; /*内边距下*/ padding-bottom: 50px; /*内边距左*/ /*写法第二种*/ padding :50px; /*写法第三种*/ padding:100px 200px 300px 400px; /*写法四 上下对应,左右对应*/ padding:0 100px } </style> </head> <body> <div class="box" id="box1"></div> <div class="box" id="box2"></div> </body>
以上是关于盒模型的主要内容,如果未能解决你的问题,请参考以下文章