盒子模型
在讲到盒模型之前需要知道元素分为块级元素与行内元素,盒模型只是针对于块级元素。行内元素可以通过display属性转换成块级元素;
块级元素与行内元素的区别
- 块级元素(block)特性:
总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制; - 内联元素(inline)特性:
和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom), 外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小
通过box-sizing属性控制元素盒子
box-sizing的可以选择值为 content-box | border-box | inherit;
标准的盒子模型
盒子总宽度 = width + padding + border + margin;
盒子总高度 = height + padding + border + margin
也就是,width/height 只是内容高度,不包含 padding 和 border值
所以上面问题中,设置width为200px,但由于存在padding,但实际上盒子的宽度有240px
怪异盒子模型
从上图可以看到:
盒子总宽度 = width + margin;
盒子总高度 = height + margin;
也就是,width/height 包含了 padding和 border值