css整理2-文字-文字溢出-盒模型-绝对居中-文档流-边距合并

字体

• 字体之间的行高是默认的吗？

字体的行高不是默认的，是由该字体设计师设定的，所以才会出现不同字体，所占行高不同。

• 字体中间的空格

英文不需要两端对齐，而中文这样会很丑，所以在让文字两端对齐，会让文字看起来更规整

只要是inline和inline-block,内嵌元素，只要有空字符串全部变为一个空格。
【1】和【3】位置，添加再多空格也不会显示效果
【2】的位置，只会显示一个空格位置
【&nbsp】空格（由no break space简写）可以当成一个空格使用，但是因为空格宽度也是由字体设计师设计，所以不同字体也会改变字与字间距效果。

css解决：使用text-align:justify可以让多行文字两端对齐。

在span后添加一个下划线 在span中设置高度，隐藏溢出部分
我的代码

英文或者数字，没有空格会被认为一整个单词，会换行显示;
解决方法，用 - 分隔符或word-break: break-all;

解决长单词中断

文字溢出

Google：css multi line text ellipsis

• 一行文本省略

单行文本省略
单行文本省略代码

• 多行文本省略

多行文本省略

• IE多行文本隐藏（没有省略号）

  width: 20px;  //设置一个宽度
  overflow: hidden;  //多出部分隐藏

• 浏览器份额查询

Google：百度统计 浏览器
http://tongji.baidu.com/data/browser

div 高度计算

div的高度由它的内部文档流总和决定的。

• 什么是文档流？

  • 内联元素从左到右
  • 块级元素从上到下，每一个都另起一行。

• 怎样脱离文档流？

  • float: left;
  • position: absolute;
  • position: fixed;
    计算div高度的时候，不需要加上。

• 不脱离文档流

  • 相对定位，不脱离文档流 position：relative;
    计算高度的时候，需要加上。

    
    div高度由内部文档流总和决定的

绝对居中

padding: 100px 0; 垂直居中
margin：0 auto; 内部div

• 高度40px;文字居中
  
  我的代码

• 外面高度确定，垂直居中

  
  

• 外面高度确定，垂直居中

  
  宽高不确定的全名居中框

• fiex居中

  
  fiex居中

• div里面div居中

  
  div里面div居中

边距合并

• outline边距合并

  
  outline边距合并

• margin合并

  
  margin合并

• 内联元素的margin和padding只能决定左右，不能决定上下

  
  内联元素的margin和padding只能决定左右，不能决定上下

• 解决边距合并（父元素加上边框或者padding都可以解决）

  
  解决边距合并

一比一的div

参考文章

box-sizing