javascript - clientWidth与outerWidth有什么区别，能不能多说一点让我能充分理解盒子模型

Question

感觉盒子模型好多坑呀

Answer 1

原生js里有clientWidth，Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有的话）、边框和外边距。

jquery里有outerHeight()方法，获取匹配元素集合中第一个元素的当前计算宽度值,包括padding，border和选择性的margin。返回一个整数（不包含“px”）表示的值 ，或如果在一个空集合上调用该方法，则会返回 null。

mdn clientWidthjquery 1.9 outerHeight

Answer 2

看样子楼主对css的基本问题都没弄明白, 建议js有一定基础了再看jquery, 有一定CSS基础再看js.

---

clientWidth表示的是元素"内容"的宽度, 而现代浏览器所指内容指的是content + padding这一部分.
box-sing虽然会改变元素的宽高分配, 但是实际上不会改变浏览器对内容和边框的区分.
即box-sizing无论是content-box, 还是border-box, clientWidth始终返回元素"内容"的值
如果想了解CSS盒子模型, 可以从以下几个方面来了解:
width, height, margin, padding, box-sizing, 盒子模型的三维图
至于outerWidth, 是jquery的一个方法. 实在要看, 搜搜jquery盒子模型就好.
或者这里: http://blog.csdn.net/bboyjoe/...