1.CSS盒模型
知识前瞻
先来看看——
CSS盒模型的组成
盒子分为 块级盒子 & 内联盒子 这两种盒子在页面流（page flow）和元素之间的关系方面表现出不同的行为
- 块级盒子
- 内联盒子
蛮有趣 可以推开其他内联盒子 但是推不开块级盒子~
这里有一个比较有趣的点 之前都没注意到
盒模型占用的面积是可以改变的
元素框的宽度=元素内容宽度+元素内边距+元素边框+元素外边距。
也可以说
盒模型由“content padding border margin”组成
盒模型的总宽度为 content + padding border margin
而下面ppt中计算的内容 我们可以称作 元素可见区域的宽高、也可以叫做盒模型的宽度/高度吧（毕竟人家字节的工程师都这么说了哈哈）
- 默认盒模型宽高——
box-sizing:content-box;
元素可见区域的宽高 = width/height + 2 * (padding + border)
- 注意！盒子的总宽高 要加上margin！
- 通常我们用offsetwidth获取就是这个宽度
但是我们可以修改浏览器这一默认行为！
因为布局的时候有时候并不希望padding会撑大原来的盒子，所以css3中推出了已box-sizing的属性
默认值是上面的 content-box 我们可以像下面一样 改成 border-box（防止padding撑大原来的盒子！）
- 修改过后——
box-sizing:border-box;
元素可见区域的宽高 = width/height = content + 2 * (padding + border)
也就是 为元素设定的宽度和高度决定了元素的边框盒！
为元素指定的任何内边距和边框 都将在已设定的宽度和高度内进行绘制！
从而 我们想得到内容content的宽高 就用设定的width height来减padding border 即可~
这个用法很有意思！而我们可以配合 box-sizing:inherit; 设置所有元素继承该属性
行内块元素的用处
这里之前只知道有这么个东西
现在了解到了display:inline-block的用处了！
-
不想让这个元素换行（保持内联元素的特点）
-
想设置宽度高度（块级元素的特点）
这里复习一下 内联元素的特点——
不能换行
宽度 高度被忽略
边框border margin部分生效 padding生效（即会撑大空间） 但是不会改变其他内容与内联盒子的关系！
对margin仅设置左右方向有效，上下无效
可以与下面行内块元素对比下~
下面来看两道题~
【1】display有哪些值 分别都有啥用？
刚刚看完的有 block 转成块元素 inline 转成内联元素 inline-block 转成行内块元素
其实还是有不少其他的内容 来波汇总！——
-
block 块类型 默认宽度为父元素宽度，可设置宽高，换行显示。
-
none 元素不显示 并从文档流中移除。
-
inline 行内元素类型 默认宽度为内容宽度，不可设置宽高，同行显示。
-
inline-block 行内块类型 默认宽度为内容宽度，可以设置宽高，同行显示。
-
list-item 像块类型元素一样显示 并添加样式列表标记。
-
table 此元素会作为块级表格来显示。
-
inherit 规定应该从父元素继承 display 属性的值。
【2】标准的CSS的盒子模型与低版本IE的盒子模型有什么区别？
涉及一些老版本的内容~
1.有两种——老版的IE盒子模型 现在使用的标准W3C盒子模型
介绍一下的话 W3C盒子模型 有这四种属性 ：内容(content)、填充(padding)、边界(margin)、 边框(border)；
2.不同的话就比较有趣的
参考了这篇文章 标准W3C盒子模型和IE盒子模型(错了无数次)
- W3C盒模型
盒模型 = margin + border + padding + width（盒模型中的块元素总宽度 = content）
- IE盒模型
盒模型 = margin + width（盒模型中块元素总宽度 = border + padding + content）
