CSS一些小点 —— 12.7
1. box-sizing: border-box
box-sizing 属性，默认值为 content-box
box-sizing: border-box 使padding和border的值不会再影响元素的宽高；padding和border的值算在指定宽高的内部（但是外边距依然算做外部）
2. overflow: hidden
作用：
- 溢出隐藏
如果父盒子没有设置固定高度或宽度时，子盒子会将父盒子的宽或高自动撑开；
标准流：就是标签按照规定好的方式排列
标准流布局：
- 块级元素会独占一行，从上向下顺序排列。
- 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
如果父盒子有固定高度或宽度时，且子盒子的高度或宽度大于父盒子，就会发生溢出
溢出隐藏
- 清除浮动
浮动：用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
浮动属性值：left：向左浮动；right：向右浮动；none：不浮动；inherit：继承父元素的浮动属性
浮动元素特性：脱离标准流，在标准流中不占位置
场景：不设置父盒子的高度，高度随内容增加自适应高度，
子盒子都使用浮动，子元素会脱离标准流，不占位，
父级元素检测不到子元素的高度（不浮动的元素会直接无视掉这个元素），父级元素高度为0
一行内显示并且元素顶部对齐，具有行内块元素的特性
清除浮动：
- 解决外边距塌陷
问题：父级元素内部有子元素；如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷
解决外边距塌陷：给父级元素添加overflow:hidden
3. font-weight: normal
其他属性值：
normal 正常的字体；相当于数字值400
bold 粗体；相当于数字值700
bolder 比粗体更加粗
lighter 比正常字体淡
4. line-height: 40px
font-size：文本字体的大小
5. letter-spacing: 2px
文字与文字间的间距；也可以说是字符间距
6. border-radius: 39px
为元素添加圆角边框
注意border-radius采用的是左上角、右上角、右下角、左下角的顺序
7. background-color: transparent
设置背景色为透明
例如：
8. flex: 1
flex-grow:1; flex-shrink:1; flex-basis:auto 的简写
flex-grow 当前元素占多少份
flex-grow: 1; 占满剩余空间
flex-shrink 设置子元素的 缩小比例，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的
flex子元素应收缩空间=总收缩空间×（flex子元素原始大小∗shrink值）/ ∑（flex子元素原始大小∗shrink值）
flex-basis 元素的基础宽度
flex-basis:auto 长度自适应