行盒的盒模型

visibility样式

值	描述
visible	默认。元素框是可见的。
hidden	元素框不可见，但仍然影响布局。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。

visibility: collapse;
visibility: hidden;

行盒的盒模型

图片（img）：object-fit图片的适应方式，

contain：图片的宽高比例不能变，但要保证图片的所有信息都要保存，不会溢出

默认值fill：

cover ：保证区域填充满，同时不会打破比例，会溢出

[toc]

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

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

显著特点

1. 盒子内容延伸

2. 行盒不能设置宽高
调整行盒的宽高，应使用字体大小，行高，字体类型  间接调整

3. 内边框(填充区)
水平方向有效，垂直方向不会实际占据空间

4. 边框
水平方向有效，垂直方向不会实际占据空间

5. 外边框 
水平方向有效，垂直方向不会实际占据空间

行块盒

常用来分页

display:inline-block;

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

空白折叠

发生在行盒内部（行块盒） 或 行盒（行块盒）之间

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

大部分元素，在页面上现实的结果，取决于元素内容，称之为 非可替换元素

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

可替换元素： img  video audio  等

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

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

行盒的垂直对齐

多个行盒在垂直方向上的对齐

给没有对齐的元素设置verticai-align

预设值：

数值（像素）或百分比

middle——中间对齐

bottom——底边对齐

text-bottom——文字底边对齐

super——上基线对齐

sub——下基线对齐

改变宽高范围

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

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

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

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

        div{
        height: 51px;
        width: 200px;
        box-sizing: border-box;//边框盒
        color: red;
        background: black;
        line-height: 51px;
        padding-left: 25px;
        }

改变背景覆盖范围

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

可以通过 background-clip 进行修改

        background-color: yellowgreen;
        background-clip: content-box ;
        background-clip: padding-box ;
        background-clip: border-box ;

溢出处理

overflow —— 控制内容溢出边框盒后的处理方式
默认情况下，可见 visible
溢出部分隐藏 hidden
生成滚动条：
overflow-x: scroll; 横向滚动条
overflow-y: scroll;纵向滚动条
scroll   简写属性，包含了横向与纵向
auto  不需要滚动条时不出现

断词规则

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

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

break-all，截断所有。所有字符都在文字出截断

keep-all，保持所有。所有文字都在单词之间截断，文字之间若没有间隔，会被认为是一个单词

空白处理

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

例子（单行处理）

white-space:nowrap;//不换行
overflow:hidden;//溢出隐藏
text-overflow:ellipsis;//用点代替溢出部分