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

2017-10-26 本文已影响0人阿鲁提尔

字体

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

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

字体中间的空格

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

只要是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高度由内部文档流总和决定的