CSS——盒模型应用

盒模型的应用

改变宽和高范围

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

矛盾：衡量设计稿的时候往往使用的是边框盒，但设置weight和height，则设置的是内容盒

方法：

1. 精确计算
2. CSS3属性：box-sizing

改变背景覆盖范围

默认情况下，背景覆盖边框盒
可以通过background-clip进行修改

background-clip:content-box(只覆盖内容区)、border-box(只覆盖边框盒)、padding-box(只覆盖填充盒);

溢出处理

当内容区的文字过多时，盒子高度较小时，就会出现溢出现象。

overflow:hidden(隐藏处理)、scroll(出现滚动条)、auto(自动处理，需要时出现，不需要时不出现)

overflow-x(水平方向设置)
overflow-y(竖直方向设置)

断词规则

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

1. nomal:普通。CJK（中文，日文，韩文）字符（文字位置截断），非CJK字符（单词位置截断）
2. break-all:截断所有。所有文字都在文字处截断（此时英文可从单词内部截断）
3. keep-all:保持所有。所有文字都在单词之间截断（一句话会被浏览器认为是一个单词，当出现空格时会被截断）

空白处理

模板：

white-space:nowrap;(设置不换行)
overflow:hidden;(隐藏溢出)
text-overflow:ellipsis;(溢出文本变为.)

防止空白折叠的方法：

white-space=pre;