CSS的宽度与高度

1. 文档流（Normal Flow）
   内联元素的宽高
   内联元素的高度是由行高决定的，内联元素的宽度是由内容，margin，padding，border决定的
   块级元素的宽高
   1. 如果div里面只有一个内联元素，那么div的高度是由内联元素这一行的字体乘以字体建议行高确定，和font-size没关系
   2. 如果div里面有多行内联元素，那么div高度由每一行的行高加起来,div的宽度不是由文字决定的
      div的高度是由内部文档流中元素的总和决定的
   3. 字和字是中线对齐，默认行高是字体设计师建议的,空格的宽度是由字体设计师确定的，HTML会把所有内联元素之外的空格与回车都舍弃，内联元素之间的空格和回车都缩减为一个空格，不要用inline-block，因为两个内联元素之间一定有空格
   4. 如果内联元素足够多，一行容纳不下，那么就从左到右排列，宽度不够自动换行，块级元素每个占一行，从上到下排列，这就叫文档流
      水平居中text-align：center；
      垂直居中line-height加padding，当文字很多时不会出现BUG
      文字溢出省略（搜索 CSS multi line text ellipsis）

      //一行
      div{
      white-space：nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      }
      //多行
      div{
      display:-webkit-box;
      -webkit-line-clamp:2; //要第几行加省略号就写几
      -webkit-box-orient:vertical;
      overflow:hidden;
      }

margin合并
如果父元素没有什么东西(比如border，padding)挡住margin，子元素的外边距就会和父元素合并起来，解决margin合并，加border,padding，overflow:hidden尽量不要使用
脱离文档流(算高度别叫上我)：

1. float: left;
2. postion: fixed;
3. postion: absolute;

2. 盒模型
   一比一的 div
   div{
   padding-top:100%;
   border:1px solid black;
   }
   outline
   outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
   outline与border的区别：
   1. border 可应用于几乎所有有形的html元素，而 outline 是针对链接、表单控件和ImageMap等元素设计。
   2. outline 不会象border那样影响元素的尺寸或者位置，outline不占据空间。
      border 调试大法

小技巧

1. span对齐

   span{
       width:5em;
       display:inline-block;
       text-align:justify;
       overfloat:hidden;
       height:20px;
   }
   span::after{
       content:'',
       display:inline-block;
       width:100%;
   }

2. text-align：justify 多行首尾对齐
3.  (no break space)
4. 在父元素加clearfix，不加的话，父元素不能把float的子元素包起来

   .clearfix::after{
       content:'';
       display:block;
       clear:both;
   }