目录
介绍
CSS盒模型本质是一个盒子,由边距、边框、填充和实际内容组成。
CSS盒模型分为两种:标准盒模型、IE盒模型(也称为怪异盒模型)。
两种盒模型的区别在于他们的总宽度的计算公式不一样。
在文档首部加了 <!Doctype html>声明,即使用标准盒模型,若不加,则会由浏览器自己决定。
标准盒模型
width = 内容(content)的宽度
height = 内容(content)的高度
总宽度:width + margin(左右) + padding(左右) + border(左右)
总高度:height +margin(上下) + padding(上下) + border(上下)
增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
IE盒模型(怪异盒模型)
width = border + padding + 内容(content)的宽度
height = border + padding + 内容(content)的高度
总宽度:width + margin(左右)(即 width 已经包含了 padding 和 border)
总高度:height + margin(上下)(即 height 已经包含了 padding 和 border)
设置 padding 、border 后,真正宽度或高度就会改变。
box-sizing
CSS 中的 box-sizing 属性定义了 user agent(用户计算机程序)应该如何计算一个元素的总宽度和总高度。
属性值:border-box(IE盒模型)、content-box(标准盒模型)