盒模型和行盒盒模型

目录

盒模型

1.盒子类型：

2.盒子的组成部分：

盒模型应用：

1.改变宽高范围：

2.改变背景覆盖范围：

3.溢出处理：

4.断词规则

5.空白处理：

行盒盒模型

1.显著特点

2.行块盒（通常用于作分页）

3.空白折叠

4.可替换元素和非可替换元素

---

盒模型

box:盒子 每个元素在页面中都会生成一个矩形区域（盒子）

1.盒子类型：

1）行盒，即display:inline

2）块盒，即display:block

行盒在页面中不换行，块盒独占一行

浏览器默认样式表的块盒元素:

html、body、div、header、footer、nav、section、aside、article、p、hr、h1-h6、ul、ol、dl、form、table、tobody、thead、tfoot、tr等

浏览器默认样式表的行盒元素:

span、a、img、textarea、button、input、br、label、select、canvas、progress、cite、code、strong、em、audio、video、bi等

2.盒子的组成部分：

无论是行盒还是块盒，都由下面几个部分组成，从内到外分别为

1）内容content

width、height盒子内容的宽高（内容部分通常叫盒子的内容盒）

2）填充padding

盒子边框到盒子内容的距离

“填充区”+“内容区”=“填充盒”

padding-left、padding-right、padding-top、padding-button

padding简写属性、padding:上，右，下，左 padding:上下，左右

3）边框border

边框=边框样式+边框宽度+边框颜色

边框盒=填充区+内容区+边框

边框样式:border-style:sold

边框宽度:border-width:可简写

边框颜色:border-color:字体颜色（默认）

4）外边距margin

边框到其他盒子的距离

margin-top、margin-button、margin-left、margin-right

margin为速写属性

盒模型应用：

1.改变宽高范围：

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

2）页面重构师将psd文件(设计稿)制作为静态页面

3）当衡量设计稿的时候，往往使用的是边框盒，但设置width、height则设置的是内容盒

4）在实际开发中要么通过精确计算，要么通过box-sizing来实现页面

2.改变背景覆盖范围：

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

可以通过backrgound-clip进行修改

3.溢出处理：

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

overflow-x、overflow-y、overflow是一个简写属性

取值：

visible(默认值。内容不会被修剪，会呈现在元素框之外)

hidden(内容会被修剪，并且其余内容不可见)

scroll(内容会被修剪，浏览器会显示滚动条以便查看其余内容)

auto(由浏览器定夺，如果内容被修剪，就会显示滚动条)

4.断词规则

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

normal:普通CJK字符(文位位置截断)非CJK字符(单词位置截断)

break-all:截断所有，所有字符都在文字处截断

keep-all:保持所有，所有文字都在单词间截断(空格处)

5.空白处理：

1）white-space:nowrap（不换行）

2）overflow:hidden（溢出隐藏）

3）text-overflow（圆点代替）

以上三种方法可控制单行文本隐藏，多行文本隐藏需用到js

white-space:normal(连续的空白符会被合并，换行符会被当作空白符来处理)

white-space:nowrap(和 normal 一样，连续的空白符会被合并。但文本内的换行无效)

white-space:pre(连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行)

行盒盒模型

1.显著特点

1）盒子沿着内容沿伸

2）行盒不能设置宽高

3）内边距（填充区）水平方向有效，垂直方向影响背景，不会实际占据空间

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

4）边框（与内边距一样）

5）外边距（与3、4一样）

2.行块盒（通常用于作分页）

display:inline-block

1)不独占一行

2）盒模型中的所有尺寸有效

3.空白折叠

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

4.可替换元素和非可替换元素

大部分元素页面上显示结果，取决于元素内容，即非可替换元素(p、div、span、a)

少部分元素页面上显示结果，取决于元素属性，即可替换元素(img、video、audio)

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

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

object-fit:contain

(被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加黑边)

object-fit:fill

(被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。)

object-fit:cover

(被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。)