CSS09.盒模型应用

盒模型应用

改变宽高范围

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

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

 

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

解决办法有两种：

 

1. 精确计算

2. CSS3：box-sizing（用了这个属性宽高不再被其他元素影响）（test1）

    /* 改变宽高的影响范围且不会被其他元素影响 */
    box-sizing: border-box;

 

改变背景覆盖范围

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

可以通过background-clip属性进行各种想要的修改

 

溢出处理

如果不设置宽高会自动根据内容增加宽高，但是如果设置了宽高就有可能溢出

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

 

overflow：visible（溢出的可见）

overflow：hidden（溢出的部分隐藏）

overflow：scroll（生成滚动条）

overflow：auto（代表自动，需要滚动条的时候出现，不需要的时候不出现）

 

断词规则

（了解）

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

 

normal：普通。对于CJK（中国日本韩国）字符（在文字位置截断），非CJK字符（单词位置截断）(word-break:normal)

break-all：截断所有。所有字符都在文字处截断（word-break:break-all）

keep-all：保持所有。所有文字都在单词之间截断（文字有空格才会被截断）

 

空白处理

不换行属性：

white-space：nowrap;(test4)

 

要想体现出单行文本不换行且溢出用省略号表示则写下面三行代码：

    /* 不换行属性：white-space：nowrap; */
    white-space:nowrap;
    /* 把溢出隐藏掉 */
    overflow:hidden;
    /* text-overflow表示文本溢出，ellipsis表示圆点 */
    text-overflow: ellipsis;