CSS盒子模型详解：内容、填充、边框、边界及其应用-优快云博客

本文链接：https://blog.youkuaiyun.com/github_33261002/article/details/50865425

css盒子模型具备的属性：内容(content)、填充(padding)、边框(border)、边界(margin)

每个盒子都有：边界、边框、填充、内容四个属性；

每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，当然也可以分别设置~

记忆时可以将此想象为一个表，从12开始逆时钟旋转，所以属性设置的顺序便为上、右、下、左~

并且当某一方向缺失时，会去对面找他的值当做自己的用哦~

再用两张图来说明w3c的标准盒子模型和IE中的不同：

很明显，在标准盒子模型中，height和width只包括content的内容

而在IE下的width和height却包括了三部分内容：content、border、padding

而在平时中的使用中用哪种呢？

当然是w3c提供的标准盒子模型了~

方法就是在网页的顶部加上 doctype 声明

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

这样就统一了IE的特立独行~

深入理解盒子模型