概念
所有的HTML元素看作盒子,在CSS中,是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:
外边距(margin)、边框(border)、内边距(padding)、和实际内容(content)
1、content:盒子内容,显示文本和图片
2、padding:清楚周围的区域(撑大盒子大小,让元素有空隙,更美观,第一个值代表上下,第二个值代表左右)拓展:padding-left、padding-right、padding-top、padding-bottom。
div{
background-color: blueviolet;
width: 100px;
height: 100px;/*内容content*/
padding: 50px;
}
<div>我是内容</div>
3、border(在内容和内边距外加一个边框,第一个值是大小,第二个值是什么类型的线,第三个值是线的颜色)
div{
background-color: blueviolet;
width: 100px;
height: 100px;/*内容content*/
padding: 50px;
border: 50px solid blue;
}
<div>我是内容</div>
4、margin(是透明的,主要用于隔开之间的元素,第一个值为上下,第二个值为左右)拓展:margin-left、margin-right、margin-top、margin-bottom。
div{
background-color: blueviolet;
width: 100px;
height: 100px;/*内容content*/
padding: 50px;
border: 50px solid blue;
margin:50px;
}
<div>我是内容</div>
<p>我是P标签</p>
如果把盒子模型看作一个生活中的快递,内容相当于买的实物,内边距相当于实物和盒子壳子中间的泡沫,边框相当于盒子,外边距相当于两个盒子间的间隙。
margin-top为负值,不管是否设置高度,都不会增加高度,而是会产生向上的位移。
margin-bottom为负值的时候不会位移,而是会减少自身供css读取的高度.