CSS笔记：8.盒模型应用

盒模型应用

改变宽高范围

• 默认情况下，width和height设置的是内容盒宽高。
• 问题：衡量设计稿尺寸时，往往使用边框盒，但在设置width和height时，设置的是内容盒。
• 解决：

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

    box-sizing:border-box;

改变背景覆盖范围

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

    background-clip：padding-box；

溢出处理

• 属性：overflow
  overflow:控制内容溢出边框盒后的处理方式。
• 简写属性：
  overflow-x:水平方向
  overflow-y:垂直方向
• 取值：
  visible:默认溢出部分可见。
  hidden：隐藏溢出部分。
  scroll：生成滚动条。
  auto：自动，需要滚动条时出现，不需要则不出现。
  其他

断词规则

• 属性：word-break（默认为nomal）
• word-break：会影响文字在什么位置被截断换行。
• 取值：
  （1）nomal：普通。CJK字符（中文、日语、韩语），在文字位置截断。非CJK字符，在单词位置截断。
  （2）break-all：截断所有。所有字符都在文字处截断。
  （3）keep-all：保持所有。所有文字都在单词之间截断。

空白处理

步骤：

1. white-space:nowrap;在一行显示。
2. overflow: hidden;一行中溢出部分隐藏。
3. text-overflow：ellipsis；未完的用点表示。
   该种做法只适用于单行文本。

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

代码部分：当设置值为pre时，空白字符保留，不会折叠。

/* 第一种 ：设置属性值*/
white-space：pre;
/* 第二种 ：设置元素*/
pre{
    var i=2;
    x=6;
}