最常用调试方法
border{ solid 1px red; }
高度
块级元素高度
div的高度是由 其内部 文档流元素的高度 总和决定的(并非想等)
内联元素高度
内敛元素的高度由line-height决定；
- 你好和a是基线（底部）对齐
- 每一种字体都有一个建议行高，超出四线格还会空出一部分
- font-size:100px;指的是字体最高到最低的高度，不是行高（不包括多余的空部分）
- 真实高度：font-size X 字体本身建议行高
解决办法
强制规定line-height:100px;
文档流
文档流就是文档内元素的流动方向。
内联元素
内联元素从左往右流动，如果遇到阻碍（宽度不够）就换行继续流动
内联元素内容不换行
例子：
method：word-break:break-all;
块级元素
每块占用一行，从上往下依次流动
高度
div的高度是由 其内部 文档流元素的高度 总和决定的(并非想等)
块级元素同行（float的另一种方法）
display：inline-block;
背景图片的处理技巧
背景图片过大： background-position:center center; 背景图片自适应:background-size:cover;
容易出bug的几个写法
height：100px
在div中写height：100px;指定块级元素高度（因为块级元素高度是撑起来的，直接指定会出bug）
width：100%
因为如果这个元素有padding，那么width（内容宽度）为100%时他总宽度会超过父元素的总宽度
解决方法：外套一个div，将div的padding左右转移到外边的div上去。
小代码块的实现方式
效果图：
display: inline-block;
padding:5px 5px;
line-height:22px;
复制代码因为内联元素不能设置高度，所以先用 display: inline-block;将其变为块级元素，然后再用padding将宽高撑出来,满足宽高并且达到居中效果。
错误解法：
width:70px;
height:30px;
line-height:30px;
text-algin:center;
复制代码这样子写死高度会导致不能加字，很容易出bug。