# 盒模型应用

## 改变宽高范围

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

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

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

1. 精确计算
2. CSS3:box-sizing，改变宽高的影响范围：border-box

## 改变背景覆盖范围

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

可以通过background-clip进行修改

## 溢出处理

不设置宽高度，不会溢出，会自动增加

溢出默认能看到，用overflow控制内容溢出边框盒的处理方式（可/不可见）

visible, hidden, scroll(overflow-x,y: scroll,滚动条一定出现，auto,滚动条自己决定出不出现,

## 断词规则

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

normal: 普通。CJK字符：中日韩的字符，在文字位置截断；非CJK字符，在单词位置截断

break-all：截断所有，从字符处截断（单词会断）

keep-all：所有文字都在单词截断（中英），一般用默认

## 空白处理

• Lorem ipsum dolor sit amet.
• Fuga exercitationem, quaerat possimus quam.
• Placeat sunt ad voluptate quibusdam.
• Amet incidunt ullam, pariatur animi!
• Voluptatum corrupti porro, saepe nulla.
• Sunt, nihil! Impedit voluptates, velit.
• Quos sequi perspiciatis minus reprehenderit?
• Unde explicabo minus rem porro.
• Earum assumenda expedita vel distinctio.
• Nostrum voluptate eligendi aliquid, molestiae.

多行文本不行，要用JS

white-space: pre：空白折叠