盒模型应用
改变宽高的范围
默认情况下,width和height设置是内容盒的宽高。
页面重构师:将psd文件(设计稿)制作为静态页面
衡量设计稿尺寸的时候,往往使用的是边框盒,但设置width和height的时候则是内容盒
- 精确计算
- 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代码