看图学习CSS盒子模型，很简单但很重要的概念

今天这篇笔记聊聊CSS中一个非常基础但是很重要的概念——盒子模型：,顾名思义，就是HTML的元素在网页上的展示都是一个一个的盒子，四四方方的在页面上排列着，比如像下面这样，学习了盒子模型，为我们学习定位和布局等等高级样式技巧打下基础。,,直接看这张图：,,根据盒子宽度和高度的计算方式，我们可以把它分为两类，并通过box-sizing属性来设置,标准盒模型（content-box）的特点是：HTML元素真正的宽度=你设置的CSS宽度（width）+padding+border，高度同理,IE盒模型（border-box）的特点是：HTML元素的真正宽度=你设置的CSS宽度（width），高度同理,,这个HTML的宽度=200+152+102=250,,这个HTML的宽度=200