css相关笔记（三）
1.行高是基线到基线之间的距离，
基线到基线之间的距离也等于
上边距到下边距之间的距离
所以行高=文字高度
+文字顶线到上边距的距离(上边距)
+文字底线到下边距的距离(下边距)
2.当行高与父容器的高度相同时,
文字就会垂直居中
3.行高的单位 有px em % 纯倍数数字
◆px 是具体的大小 像素
◆em 是根据自身字体的大小相乘而来的 (字体倍数)
◆% 是根据 自身字体的大小相乘而来的 (字体倍数)
◆纯倍数数字 是根据自身字体的大小相乘而来的 (字体倍数)
★当父容器中的行高是用px em %时
子容器就算设置了字体大小，
行高就会默认继承父容器中的行高，
就算子容器的字体大小大于行高也一样。
☆当父容器中的行高是使用
纯倍数数字时 子容器如果设置了字体大小
行高会随着子容器的字体大小而变化，
父容器中的行高会和子容器的行高一致。
■行高不带单位时 父容器随子容器
带单位时子容器随父容器
正常情况下 推荐使用px像素为单位
4.border 边框属性的连写 style属性值不能少
border:size style color;
border:1px dashed #0f0;
5.当table中设置了边框，那么合并边框时，表格与单元格边框重复的地方会使用表格的边框，如果设置了单元行的边框，那么表格合并边框时会忽略表格的边框改用单元行的边框，但是单元列的边框依旧还是单元格的边框，单元行的边框只在表格合并的时候有效果。
6.当table使用了样式合并边框时，table标签中设置cellspacing属性无效。
7.当你想去元素边框时 推荐使用 border:0 none; 因为兼容性更好
8.去掉input标签获取焦点时外边的轮廓，设置outline-style:none;
9.使用label 标签 用户体验更好 label for id
10.内外边距的 属性值设置
◆1个值 表示设置上右下左 方位相同的属性值
◆2个值 表示设置 上下、左右 两个方位的不同的属性值
◆3个值 表示设置 上、左右、下 三个方位的不同的属性值
◆4个值 表示设置 上、右、下、左 四个方位不同的属性值(上右下左顺时针)
11.内边距会撑大盒子，边框也会使盒子变大
12.使用padding或text-align都可以使图片在盒子里面居中，padding让图片居中需要使用加减法的方式，padding增加，盒子的width就要减少。
12.盒子的高度=盒子定义的高度+盒子的上下内边距+盒子的上下边框，盒子的宽度=盒子定义的宽度+盒子的左右内边距+盒子的左右边框，★特殊情况下 盒子可能会被文字的行高给撑大。
13.继承的盒子(包含的盒子、嵌套的盒子、内嵌的盒子)不会因为设置了左右内边距而被撑大，因为宽度会继承父容器的，但是当子容器的左右内边距大于父容器的宽度时，还是会被撑大，父容器不会受影响，如果设置了上下内边距那就会被撑大，因为高度不会继承父容器的高度。
14.两个盒子(兄弟容器)垂直方向上 外边距会合并，但是只限于两个盒子 方向相对，合并外边距时会选择大的盒子的外边距而忽略掉小的盒子的外边距，当方向相同时就不会合并外边距了，因为他们不存在重叠的地方，★水平方向外边距不会合并。
15 两个盒子(父子容器)垂直方向上 外边距会折叠(合并),方向相邻时，折叠外边距是会选择大的外边距，所以可能会出现BFC。
16.BFC是块儿级格式上下文，相邻的两个容器的外边距会折叠，折叠效果是
◆会忽略掉较小外边距而使用较大的外边距
◆当两个外边距都为负数时 会使用绝对值较大的外边距而忽略绝对值较小的外边距
◆当两个外边距一正一副时会取他们相加的和作为外边距
◆http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
17.一个前端的网站：https://www.w3cplus.com/
基线到基线之间的距离也等于
上边距到下边距之间的距离
所以行高=文字高度
+文字顶线到上边距的距离(上边距)
+文字底线到下边距的距离(下边距)
2.当行高与父容器的高度相同时,
文字就会垂直居中
3.行高的单位 有px em % 纯倍数数字
◆px 是具体的大小 像素
◆em 是根据自身字体的大小相乘而来的 (字体倍数)
◆% 是根据 自身字体的大小相乘而来的 (字体倍数)
◆纯倍数数字 是根据自身字体的大小相乘而来的 (字体倍数)
★当父容器中的行高是用px em %时
子容器就算设置了字体大小，
行高就会默认继承父容器中的行高，
就算子容器的字体大小大于行高也一样。
☆当父容器中的行高是使用
纯倍数数字时 子容器如果设置了字体大小
行高会随着子容器的字体大小而变化，
父容器中的行高会和子容器的行高一致。
■行高不带单位时 父容器随子容器
带单位时子容器随父容器
正常情况下 推荐使用px像素为单位
4.border 边框属性的连写 style属性值不能少
border:size style color;
border:1px dashed #0f0;
5.当table中设置了边框，那么合并边框时，表格与单元格边框重复的地方会使用表格的边框，如果设置了单元行的边框，那么表格合并边框时会忽略表格的边框改用单元行的边框，但是单元列的边框依旧还是单元格的边框，单元行的边框只在表格合并的时候有效果。
6.当table使用了样式合并边框时，table标签中设置cellspacing属性无效。
7.当你想去元素边框时 推荐使用 border:0 none; 因为兼容性更好
8.去掉input标签获取焦点时外边的轮廓，设置outline-style:none;
9.使用label 标签 用户体验更好 label for id
10.内外边距的 属性值设置
◆1个值 表示设置上右下左 方位相同的属性值
◆2个值 表示设置 上下、左右 两个方位的不同的属性值
◆3个值 表示设置 上、左右、下 三个方位的不同的属性值
◆4个值 表示设置 上、右、下、左 四个方位不同的属性值(上右下左顺时针)
11.内边距会撑大盒子，边框也会使盒子变大
12.使用padding或text-align都可以使图片在盒子里面居中，padding让图片居中需要使用加减法的方式，padding增加，盒子的width就要减少。
12.盒子的高度=盒子定义的高度+盒子的上下内边距+盒子的上下边框，盒子的宽度=盒子定义的宽度+盒子的左右内边距+盒子的左右边框，★特殊情况下 盒子可能会被文字的行高给撑大。
13.继承的盒子(包含的盒子、嵌套的盒子、内嵌的盒子)不会因为设置了左右内边距而被撑大，因为宽度会继承父容器的，但是当子容器的左右内边距大于父容器的宽度时，还是会被撑大，父容器不会受影响，如果设置了上下内边距那就会被撑大，因为高度不会继承父容器的高度。
14.两个盒子(兄弟容器)垂直方向上 外边距会合并，但是只限于两个盒子 方向相对，合并外边距时会选择大的盒子的外边距而忽略掉小的盒子的外边距，当方向相同时就不会合并外边距了，因为他们不存在重叠的地方，★水平方向外边距不会合并。
15 两个盒子(父子容器)垂直方向上 外边距会折叠(合并),方向相邻时，折叠外边距是会选择大的外边距，所以可能会出现BFC。
16.BFC是块儿级格式上下文，相邻的两个容器的外边距会折叠，折叠效果是
◆会忽略掉较小外边距而使用较大的外边距
◆当两个外边距都为负数时 会使用绝对值较大的外边距而忽略绝对值较小的外边距
◆当两个外边距一正一副时会取他们相加的和作为外边距
◆http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
17.一个前端的网站：https://www.w3cplus.com/
