盒模型应用

改变宽高范围

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

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

衡量设计稿尺寸的时候往往使用的是边框盒，但设置width和height却设置的是内容盒，就会导致边框盒的尺寸发生变化

解决办法：

精确计算
CSS3：将box-sizing的值设置为border-box（边框盒），则width和height影响的就是边框盒的宽高

改变背景覆盖范围

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

通过设置background-cilp的值，调整背景覆盖范围

溢出处理

通过设置overflow的值，控制内容溢出边框盒后的处理方式

visible，溢出部分可见

hidden，溢出部分隐藏

scroll，滚动条（scroll-y纵向滚动条，scroll-x横向滚动条）

auto，自动，当需要时会出现滚动条

断词规则

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

normal：普通。对于CJK（中、日、韩）字符，在文字位置截断；对于非CJK字符，在单词位置截断

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

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

空白处理

white-space：nowrap

（pre，文本预格式化，不会空白折叠）

<head>
...
    <style>
        li{
            border-bottom: 1px dashed #ccc;
            line-height: 2;
            border-left: 3px solid #008c8c;
            padding-left: 10px;
            margin: 1em 0;
            width: 200px;
            white-space: nowrap;
            overflow: hidden;/*溢出部分隐藏*/
            text-overflow: ellipsis;/*文本溢出部分圆点显示*/
        }
    </style>
</head>
<body>
    <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Atque animi delectus corporis hic!</li>
        <li>Reiciendis quos ratione culpa saepe.</li>
        <li>Deserunt voluptas numquam doloremque beatae!</li>
        <li>Cum architecto nulla dolorem at.</li>
        <li>Repudiandae deserunt temporibus tempora quaerat?</li>
        <li>Dolores laborum veritatis fuga commodi!</li>
        <li>Velit explicabo dicta doloremque unde!</li>
        <li>Sed magnam ratione quaerat ducimus!</li>
        <li>Explicabo perspiciatis aspernatur maiores. Accusantium?</li>
    </ul>
</body>

行盒的盒模型

常见的行盒：包含具体内容的元素

span、strong、em、i、img、video、audio、a

行盒的显著特点

盒子沿着内容延伸
行盒不能设置宽高

调整行盒的宽高应该使用字体大小、行高、字体类型，间接调整

内边距（填充区，padding）

水平方向有效，垂直方向仅会影响背景颜色，不会实际占据空间。

边框（border）

水平方向有效，垂直方向不会实际占据空间。

外边距（margin）

水平方向有效，垂直方向不会实际占据空间。

行块盒

指display属性等于inline-block的盒子

不独占一行
盒模型中所有尺寸都有效

经常用来做分页

空白折叠

空白折叠，发生在行盒（行块盒）内部或行盒（行块盒）之间

可替换元素和非可替换元素

大部分元素，页面上显示的结果，取决于元素内容，称为****非可替换元素****

少部分元素，页面上显示的结果，取决于元素属性，称为****可替换元素****

可替换元素：img、video、audio

绝大部分可替换元素均为行盒。

可替换元素类似于行块盒，盒模型中所有尺寸都有效。

object-fit，用于视频、图片，表示适用方式，默认取值为：fill填充

常规流

盒模型：规定单个盒子的规则

视觉格式化模型（布局规则）：页面中的多个盒子排列规则

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

常规流
浮动
定位

常规流布局

常规流、文档流、普通文档流、常规文档流

所有元素，默认情况下，都属于常规流布局

总体规则：块盒独占一行，行盒水平依次排列

包含块（containing block）:每个盒子都有它的包含块，包含块决定了盒子的排列区域

绝大部分情况下：盒子的包含块，为其父元素的内容盒

块盒

每个块盒的总宽度，必须刚好等于包含块的宽度

width 的默认值是auto

margin的取值也可以是auto，默认值0

auto：将剩余空间吸收掉

width吸收能力强于margin

若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收

在常规流中，块盒在其包含块中居中，可以定宽、然后左右margin设置为auto。

每个块盒垂直方向上的auto值

height:auto，适应内容的高度

margin:auto，表示0

百分比取值

padding、宽、margin可以取值为百分比

以上的所有百分比都是相对于包含块的宽度。

高度的百分比：

1）. 包含块的高度是否取决于子元素的高度，设置百分比无效

2）. 包含块的高度不取决于子元素的高度，百分比相对于父元素高度

上下外边距的合并

两个常规流块盒，上下外边距相邻，会进行合并。两个外边距取最大值。

前端学习-day4