CSS基础（8）- 盒模型应用

本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录，仅作为个人记录以及阅读使用。

盒模型应用

改变宽高范围

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

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

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

解决盒子模型宽高问题的方法：

• 精确计算
• CSS3：box-sizing(把值content-box变为border-box)

改变背景覆盖范围

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

可以通过background-clip(设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面)进行修改

溢出处理

overflow，控制内容溢出边框盒后的处理方式
取值：visible、hidden、scroll（纵向）、auto

overflow-x
overflow-y

断词规则

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

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

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

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

空白处理

white-space: nowrap 会折叠但不换行
pre 不会空白折叠，会换行
normal 会空白折叠

/*重要！只能控制单行文本，多行文本要用JS操作*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

参考资料

1. 【渡一教育】袁进老师的html+css基础课程
2. 【渡一教育】袁进老师相关课程源代码