8.CSS盒子模型

一。CSS盒子模型

盒子模型解释

元素在页面中显示成一个方块，类似一个盒子，css盒子模型就是使用显示中的和字来做比喻，帮助我们设置元素对应的样式，盒子模型示意图如下：

把元素叫做盒子，设置对应的样式分别为：盒子的宽度（width）、盒子的高度（height）、盒子的边框（border）、盒子的内容和边框之间的距离（padding）、盒子与盒子之间的距离（margin）

设置宽高

width：200px；   设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体的宽度（难点）

height：200px；   设置盒子的高度，此高度是盒子内容的高度，不是盒子整体的高度（难点）

设置边框

设置一边的边框，比如顶部的边框，可以按如下设置：采用最后一个设置，方便快捷。

个别方式采用以下方法：

常采用这种方式：

padding 后面值设置如下：

设置外间距margin：

外边距设置方法和padding设置方法相同，将上面的padding换成margin，就是外边距的设置方法。

练习题：

 

通过以上页面得出结论：盒子的width 和 height 设置的是盒子内容的宽和高，不是盒子的本身的宽和高，盒子的真实尺寸计算公式如下：

盒子的宽度 = width + padding左右  + border左右

盒子的高度 = height  + padding上下 + border上下