CSS基础之盒模型的应用

盒模型的应用

改变宽高范围

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

衡量设计稿尺寸的时候,往往使用的是边框盒, 但设置宽高的时候,设置的则是内容盒宽高

有两种方式:

1. 精确计算, 将边框盒,内容盒的尺寸计算出来,单独设置
2. 改变宽高影响的范围

box-sizing: border-box;

添加该样式后,宽高影响的范围将从默认的内容盒到边框盒

改变背景图覆盖范围

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

溢出处理

在不设置宽高的时候,由于边框会自动增加,所以一般不会溢出

但是一旦设置了宽高, 就会出现溢出的可能, 默认情况下溢出到盒子外面的部分是能看到的.

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

生成滚动条

overflow :scroll; 
overflow-y: socrll; //y轴产生滚动条
overflow-y: auto; //自动出现,即不溢出不产生滚动条,溢出就产生滚动条

溢出部分隐藏

overflow:hidden;

有时需要溢出部分隐藏,后面以…的形式出现,表示后面有内容,可以这样设置

// 只能处理单行文本
li{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}

断词规则

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

1. word-break:normal;: 普通方式. 对有CJK字符(中国,日本,韩国)在文字位置截断,非CJK字符在单词位置截断
2. word-break:break-all;: 截断所有. 所有字符都会在文字处被截断
3. word-break: keep-all: 保存所有. 所有文字都在单词之间截断

空白处理

white-space: nowrap;表示空白位置的处理为不换行
white-space: pre;表示不会出现空白折叠, 保留空白