盒子模型
盒子模型准则:盒子不设宽高,宽度由父级元素决定,高度由包含的内容决定
1.概念
盒子模型主要用于html中的封装,主要包括:外边距,边框,内边距,和实际内容。
2.布局介绍
不同部分的说明:
- Margin(外边距) - 清除边框外的区域,外边距是透明的。 margin:0px auto;盒子针对容器居中
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
实例:
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
3.盒子实际大小占地
-
不设置初始盒子width,height
盒子宽度方向:内容宽+左内边距+右内边距+左右边框线宽+左外边距+右外边距
盒子高度方向:内容高+上内边距+下内边距+上下边框线宽+上外边距+下外边距 -
设置初始盒子width,height相当于只是设定了内容的宽高
盒子宽度方向:weight+左内边距+右内边距+左右边框线宽+左外边距+右外边距
盒子高度方向:height+上内边距+下内边距+上下边框线宽+上外边距+下外边距
4.外边距(三个问题)扩展
- 行内元素对垂直外边距无效
例如对span标签设定margin-top,不会发生变化,但设定margin-left,会有效果显示
margin-top 无效
margin-right 有效
-
垂直外边距合并
当两个外边距相遇时,会形成一个外边距,数值为其中最大值(只针对垂直方向) -
外边距溢出
因为父元素没有加边框设置,写给子元素的垂直外边距会作用在父元素上
例:box 没有设定边框属性,而d1设定了垂直的外边距的值会作用在box与body之间
<body>
<div class="box">
<div id="d1"></div>
<div id="d2"></div>
</div>
</body>
.box{
background-color: yellow;
}
#d1,#d2{
width: 800px;
height: 300px;
}
#d1{
border: 1px solid red;
margin-top: 150px;
margin-bottom: 150px;
}
#d2{
border: 1px solid green;
margin-top: 150px;
}