盒模型

改变宽高范围

默认情况下，width 和 height 设置的是内容盒的宽高。

页面重构师：将psd 文件（设计搞）制作为静态页面

衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width 和height，则设置的是内容盒。

解决办法：

自己先量出来设计图上的尺寸，然后减去 border 宽度，再减去padding，最后得到的尺寸就是要设置的width 值。

CSS3 ：box-sizing ,有两个取值，content-box, 这个也是默认值，这个默认取值就是代表你设置了内容盒的宽高，也就是说你再设置padding, 设置border 盒子是会变大的。

从边框开始往里面看，border，padding，width，这些都算是盒子的一部分，而margin代表的是盒子和盒子之间的间距。

如果你把box-sizing 设为另外一个值，即为 border-box.你这样一设置，就代表我上面的宽高是代表边框盒的宽高。

所以这里记住了，默认设置宽高就是设置的内容盒的宽高，如果设置box-sizing = border-box. 就代表设置的宽高是边框盒。

chrome 里面如果你用鼠标点击元素，出现的数字就代表边框盒的宽高。

默认情况下，背景覆盖边框盒。和ios 一样的。但是CSS更灵活，可以通过设置background-clip 的值进行修改，当这个值为border-box (默认值)，padding-box，content-box.

这个类似于iOS里面的maskToBounds,但是iOS里面只能设置超出显示还是不显示。

CSS 这里用的是overflow: , 这个overflow也是一个速写属性。

默认值是visible，可见的。还可以设置为 hidden，就看不到。还可以取值为scroll，表示生成滚动条。

overflow-y :scroll 还可以取值为 auto，表示如果宽度和长度够长的话，就不显示滚动条，如果不够长，就显示滚动条。

在chorme 调试里面看到styles ，调试属性，写完属性，看到：后面有一个指向右侧的箭头，就代表这是一个速写属性。

word-break，会影响文字在什么位置被截断换行。

取值为normal：普通，CJK(中日韩)字符（按照文字位置进行阶段），非CJK字符（单词位置阶段）。
取值为 break-all 在所有位置都可以截断，这个对中文来说和normal一样，还是换行的时候以文字为单位进行截断，对英文单词来说就有差别了，这里他不再会以单词为单位截断了，而是以字母为单位截断，就会出现一个单词换行显示的问题。
keep-all ：保持所有。所有文字都在单词之间截断。这里对于英文单词截断很好理解，那中文如何理解在单词之间阶段呢？中文对于浏览器来说出现空格，为一个单词，出现标点符号浏览器觉得是一个单词，所有对 cjk来说不出现标点符号都算一个单词，都不会换行。

这里其实就是用css 实现一个类似于UIlabel设置了文字为一行显示的，展示不下的文字后面显示 ...

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

上面的思路是什么呢？

注意这里的方法只适用于单行文本，多行文本需要用JS ，比方说两行，两行后面显示不下的显示... 就要用JS来处理。

white-space :normal 默认情况下会进行空白折叠。

pre ：这个取值就不会进行空白折叠。

nowrap:空白折叠仍然会发生，但是不会换行。