盒模型应用

盒模型应用

改变宽高范围

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

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

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

处理方法：

1. 精确计算（不推荐）
2. CSS3：box-sizing

box-sizing:border-box;

改变背景覆盖范围

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

可以通过background-clip 进行修改

溢出处理

overflow 控制内容溢出边框盒后的处理方式

overflow-y：scroll 纵向出现滚动条。

overflow-y：auto 滚动条自动出现。

overflow-y：hidden 溢出隐藏。

断词规则

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

normal：默认值，普通。CJK字符（文字位置截断），非CJK字符（单词位置截断）

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

keep-all: 保持所有，所有文字都在单词之间截断。

空白处理

处理方法：

white-space: nowrap；设置为不换行。
overflow-y：hidden；溢出隐藏。
text-overflow:ellipsis; 溢出部分省略号代替。

多行文本需要用JS处理