【css】css盒子模型笔记

~定义：

一般来说，拥有宽，高，边框像素，内边距和外边距就视作为一个盒子模型

在万维网联盟（w3c）规范中，盒子模型是一个模型所占用的网页空间

各种网页网站正式由许多这样不同的盒子组成。

~具体内容解释：

盒子内是内容区，用宽（width），高（height）来定义大小；边框为border定义；内边距（内容区与边框之间的距离）用padding；外边距（边框外部）用margin。

宽（width），高（height）

边框border

内边距padding

外边距margin

~两种计算模式：

用box-sizing属性来制定

1）content-box：是默认的方式，比较直观，且内边距和边框不会挤占内容区

2）border-box：内边距和边框挤占内容区

这里有例子解释两种的计算方式差别：

盒子的宽度=300px （内容宽度） +10px （左边框）+10px （右边框） +20px（左内边距） +20px（右内边距） =360px。盒子的高度（假设内容高度为auto或未设置） 将取决于内容的高度，但同样会加上上内边距、下内边距、上边框和下边框的宽度。
盒子在页面中占位的总宽度=360px（盒子宽度） +15px（左外边距） +15px （右外边距）=390px。
盒子在页面中占位的总高度将取决于内容的高度以及上下内边距、边框和外边距的总和。

~盒子属性：

盒子也有行内（inline）和块级（block）之分，可以用display来设置

block元素独占一行，而inline只占用内容区域的大小，且不能设置宽高

~其他注意：

1）如果给盒子设置了背景颜色，则padding区域会被上色，border不会

2）给盒子设置了悬停状态，padding和border都会受到影响