2020-07-03 盒模型

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

盒子类型：

1.  行盒     display等于inline的元素

2.  块盒     display等于block的元素

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

注：没有行级元素和块级元素的叫法，因为元素是html的范畴，而html与显示无关，具有语义化。行盒和块盒是css的范畴，是显示的特征，所以行级元素和块级元素应该叫做行盒和块盒。

display默认值是inline，该元素不能继承

浏览器默认样式表设置的块盒：容器元素、h1~h6、p

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

盒子的组成部分

从内到外分别是：内容content、填充padding、边框border、外边距margin

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

填充(内边距) 是盒子边框到盒子内容的距离

填充区+内容区  =   填充盒   padding-box

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

边框样式默认为none，颜色默认是字体的颜色

边框  +   填充区  +  内容区  =  边框盒   border-box

外边距：边框到其它盒子的距离

简写属性（速写属性）

盒模型的应用

1. 改变宽高范围  

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

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

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

1.  精确计算  2.  css3  ：box-sizing （改变宽高的影响范围）

单行文字居中：设置line-height

2.  改变背景覆盖范围

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

可以通过background-clip修改

3.  溢出处理

overflow，控制内容溢出边框盒后的处理方式，默认是可见的 visible  还有hidden、scroll、auto

4.  断词规则

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

取值有：normal，普通，cjk字符（文字位置截断），是默认。非cjk字符（单词位置截断）  

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

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

5.  空白处理

white-space：nowrap  再加上  overflow：hidden和text-overflow：ellipsis  只能控制单行文本，多行需要使用js处理

默认值是normal，还有pre

谈谈你对CSS盒模型的认识？ - 穿越时光机 - 博客园

前端面试题之CSS盒模型_simeng-han的博客-CSDN博客_盒模型面试题

介绍一下box-sizing属性？

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高

border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。