8.盒模型的应用

盒模型应用

改变宽高的范围

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

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

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

1. 精确计算
2. css3：box-sizing:border-box（直接用width和height设置）

改变背景覆盖范围

默认情况下，背景覆盖边框盒

可以通过background-clip进行修改

溢出处理

手动设置宽高后可能会出现溢出

正常溢出后依旧可视

overflow设置溢出后的操作方式

断词规则

world-break：会影响文字在什么位置会被截断换行

normal：普通，CJK字符（文字处阶段），非CJK（单词位置截断）

注：CJK为中国，日本，韩国

break-all：截断所有，所有字符都在文字处截断

keep-all：所有单词都在单词位置截断，即空格处截断

空白处理

white-space:nowrap;(不换行)
overflow:hidden;（隐藏溢出）
text-overflow:ellipsis;（打出…）
(只能控制单行文本)
white-space：normal，这是不空白折叠的css代码