在HTML5逆战班的第二周的的学习中,我们终于接触到了css里的一大重点——盒模型。这一节的学习可以说是非常的有趣了,因为当我们对盒模型的不同属性进行控制时,有时是可以达到相同的目的的。但我们一定要记住差别并对这些属性进行差别使用,否则在进行css布局时会出现不少麻烦。
盒模型
在介绍盒模型的属性值之前,我们先简单看一下盒模型的结构组成。作为css布局的基础,盒模型是控制元素与元素与元素之间(or元素与内容之间)的位置关系的,它的组成包括内容区(content),补白(填充),边框以及边界(外边距)。这里我借用元素div进行举例。
<div class="div1"><p>模型一模型一模型一</p></div>
<div class="div2"><p>模型二模型二模型二</p></div>
*{margin: 0;padding:0;}
/*取消默认值*/
div{float:left;width:300px;height:300px;}
.div1{background-color:#b0d8f5;}
.div2{background-color:#efcda9}
如图:
-
content(内容区)
即我们编辑的内容部分所在的区域。 -
padding(补白;填充)
指用来控制父元素和子元素之间的位置关系,亦或者控制元素与内容之间的位置关系。
如图,对于内容区,他是被padding四面包裹的,我们可进行单侧方向的控制,即padding-top,padding-right,padding-bottom,padding-left。
例:若我们我们想要p标签内容与其父元素div2拉开距离:就可以给父元素div2加padding属性并赋值,如
.div2{background-color:#efcda9;padding-top:20px;}
不难发现,目标虽然达成但div2的大小发生了变化,这便是padding的特点,padding会将元素原有大小撑大。
之后若想元素保持原有大小,则需要对其宽高减去相应的值就解决啦:
.div2{height:280px;}
- margin(外边界)
待续 (●’◡’●)