css盒模型

box：盒子，每个元素在页面中都会生产一个矩形区域（盒子）
盒子类型：
1.行盒，display：inline
2.块盒，display：block
行盒在页面中不换行，块盒独占一行
浏览器默认样式表设置的块盒：容器元素，h1~h6元素，p元素

无论是行盒还是块盒，都由下面几个部分组成，从内到外分别是：
①内容content，边框到其他盒子的距离
width，height，设置盒子内容的宽高
内容部分通常叫整个盒子的内容盒
②填充paddin
盒子边框到盒子内容的距离
padding:上 右 下 左;
填充区+内容区=填充区
③边框 border
边框样式+边框宽度+边框颜色
border-style + border-width + border-color
边框+填充区+内容区=边框盒
④外边距margin

空白处理：
white-space：nowrap（不换行）
overflow：hidden（溢出隐藏）
text-overflow：ellipsis（单词表示圆点）（文本溢出）只能控制单行文本

overflow：scroll（生成滚动条）

word-break（会影响文字在什么位置被截断换行）
normal：普通，cjk字符（文字位置截断），非cjk（单词位置截断
break-all：截断所有，所有字符都会在文字处被截断
keep-all;保持所有，所有字符都在单词处截断

行盒的盒模型

常见的行盒：包含具体内容的元素（span，strong，em，i，img，video，audio，）
1.显著特点：盒子跟着内容延伸
2.行盒不能设置宽高，应该使用字体大小、行高、字体类型间接调整
3.内边距（填充区）、边框、外边距，水平方向有效。垂直方向会影响背景，不会实际占据空间

行块盒
display:inline-block
1.不独占一行
2.盒模型中所有尺寸有效

空白折叠
发生在行盒内部 或 行盒之间

大部分元素，在页面上显示的结果，取决于元素的内容 是非可替换元素
少部分元素，页面显示的结果，取决于元素的属性 是 可替换元素