一.什么是盒子?
盒子模型,顾名思义,盒子就是用来装东西的,它装的东西就是HTML元素的内容。
盒子的四个组成区域相对应,每个盒子有四个边界:内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。
二.盒子的宽高如何确定
盒子宽度:外边框宽度+盒子边框宽度+内边距宽度+内容宽度
盒子高度:外边框高度+盒子边框高度+内边距高度+内容高度
1.box-sizing:content-box|border-box|inherit;
确认宽高之前我们得先了解box-sizing.
box-sizing :是用于告诉浏览器如何计算一个元素是总宽度和总高度(这边主要针对内容的宽高)
当box-sizing:content-box时,这种盒子模型成为标准盒子模型,当box-sizing: border-box时,这种盒子模型称为IE盒子模型。
演示为
<div class="content-box">Contentbox</div>
<br>
<div class="border-box">Border box</div>
div {
width: 160px;
height: 80px;
padding: 20px;
border: 10px solid orange;
background: lightgreen;
}
/**元素的总宽度 = 160 + 20*2 + 10*2; 总高度 = 80 + 20*2 + 10*2 ;光内容部分宽高就是160*80 */
.content-box { box-sizing: content-box; }
/** 元素的总宽度 = 160; 总高度 = 80px;内容部分宽高就是100*20 */
.border-box { box-sizing: border-box; }
当box-sizing:content-box时盒子的各个属性如下(不写box-sizing默认为content-box)
当box-sizing:border-box盒子显示如下
2.其他元素
边框:boder:颜色 大小 样式
圆角:border-radius:int px;
阴影:box-shadow:offset-x offest-y shadow-radius shadow-color
内边距:padding int px; 嵌套(父子)父子关系用内边距外边距:margin: int px; 并列(兄弟)关系用外边距