css（二）：高度与文档流，line-box与box，宽度，position与

最常用调试方法

border{ solid 1px red; }

高度

块级元素高度

div的高度是由 其内部 文档流元素的高度 总和决定的(并非想等)

内联元素高度

内敛元素的高度由line-height决定；

1. 你好和a是基线（底部）对齐
2. 每一种字体都有一个建议行高，超出四线格还会空出一部分
3. font-size:100px;指的是字体最高到最低的高度，不是行高（不包括多余的空部分）
4. 真实高度：font-size X 字体本身建议行高

解决办法

强制规定line-height:100px;

文档流

文档流就是文档内元素的流动方向。

内联元素

内联元素从左往右流动，如果遇到阻碍（宽度不够）就换行继续流动

内联元素内容不换行

例子：

原因：haaaaaaaaaaaaaa是一个英语单词（整体）不可以打断

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。

转载于:https://juejin.im/post/5c89dc47f265da2dea056bf6