CSS（五）——盒子模型（一）

CSS（五）——盒子模型（一）

盒模型

​ **box：**盒子，每个元素在页面中都会生成一个矩形区域（盒子）。

盒子类型：

1. 行盒：display等于inline的元素；

2. 块盒：display等于block的元素。

行盒在页面中不换行，块盒独占一行，display默认inline。

3. 常见的行盒：span、a、img、video、audio。

盒子的组成部分：

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

1. 内容；content；

   内容中包括：width、height——表示内容的狂傲

   内容部分通常叫做整个盒子的内容盒 content-box

2. 填充：padding；

   盒子边框到内容的距离 padding-left、padding-right、padding-top、padding-bottom

   简写属性：顺时针书写

   padding:top right bottom left;
   padding:top(bottom) left(right);
   padding:四个方向值相同，可以只写一个;
   

   填充盒 = 填充区 + 内容区

3. 边框：border；

   边框 = 边框样式（border-style） + 边框宽度（border-width） + 边框颜色（border-color）

   border:4px solid red；
   

   上述简写属性中，第一个表示边框宽度，第二个表示边框样式，第三个表示边框颜色

4. 外边距：margin；

   边框到其他盒子的距离。

   margin:遵循属性简写。
   

盒模型的应用

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

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

1. 衡量设计稿尺寸的时候，往往用的是边框盒，但设置的是内容盒。

   精确计算尺寸时，使用box-sizing属性（默认为content-box），将值改为border-box。

   行高需要自己计算

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

   可以通过background-clip属性来修改：

   background-clip:border-box;   /* 背景覆盖边框盒*/
   background-clip:content-box;  /* 背景覆盖内容盒*/
   background-clip:padding-box;  /* 背景覆盖填充盒*/
   

3. 移除处理：

   使用overflow来处理移除的部分。

   overflow:visible;  /*默认的，可见*/
   overflow:hidden;	/*隐藏*/
   overflow:scroll;	/*滚动条*/
   overflow-y:scroll;  /*纵向滚动条*/
   overflow-y:auto;	/*纵向滚动条自动出现*/
   

4. 断词规则：

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

   /*对于CJK字符——即Chinese、Japanese、Korean[kəˈriən]（中文、日文、韩文）会在文字位置截断*/
   /*非CJK字符会在单词位置截断*/
   /*综上所述，断词会在保留语言中能表达含义的最小单位的前提下进行截断*/
   word-break:normal; 
   /*不管是什么样的字符，都会被截断*/
   word-break:break-all;
   /*保持所有，所有文字都在单词之间截断*/
   word-break:keep-all;
   

5. 空白处理：

   不换行处理用white-space

   white-space:nowrap; /*表示不换行*/
   overflow:hidden;	/*一处的文字被隐藏（其实是超过盒子范围的不显示）*/
   text-overflow:ellipsis;  /*将溢出的文字显示为圆点*/
   

   只能控制单行文本，控制多行文本需要使用js

行盒模型

常见的行盒元素：包含具体内容的元素：span,strong,em,i,img,video,audio

特点

1. 行盒沿着内容延伸，内容结束，行盒结束

2. 调整行盒的宽高需要使用字体的大小来设置

3. 行盒的padding水平方向有效；垂直方向只会影响背景，不会实际占据空间。

4. 行盒的border水平方向有效；垂直方向只会影响背景，不会影响实际占据空间

5. 行盒的margin水平方向有效；垂直方向只会影响背景，不会影响实际占据空间

行块盒

行块盒指的是：display:line-block

1. 不独占一行；
2. 盒模型中的所有属性都有效

空白折叠（补充）

空白折叠发生在行盒内部哦行盒之间——包括行块盒。

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

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

少部分元素，页面上显示的结果，取决于元素属性，可称为——可替换元素。例如：img

<img src="" alt="">  /*显示什么，取决于src的属性值*/

拒绝大部分可替换元素均为行盒，而在属性设置上类似于行块盒

补充图片属性

object-fit:contain;  /*表示保持比例来调整图片*/
object-fit:fill;	/*表示填充，但不能保证比例*/
object-fit:cover;	/*保证区域填充满，保持比例，会导致有些部分显示不出来*/

总结

本篇笔记中记录了CSS样式中重要的盒模型的基本概念以及相应的盒模型类型，并阐述了相关特点和应用。

盒模型分为行盒和块盒以及一个特殊的存在——行块盒。

行盒在页面使用时不会换行，且无法设置高度（因为行盒的具体宽高跟随元素内容延伸），具体样式参照行盒模型的特点。

块盒在使用的时候回自动换行，且宽高可以设置并占据实际空间。

行块盒在使用时融合了行盒和块盒的优点，但依旧存在相关问题（比如空白折叠造成的页面样式问题），具体解决办法后续整理。

最后介绍了可替换元素和非可替换元素。具体区别在于可替换元素。

可替换元素指的是元素显示的内容取决于属性值，例如：img。

非可替换元素指的是现实的内容取决于元素的内容，例如：span。