overflow 溢出隐藏 #

超过内容之外的部分给隐藏起来

p{
  width:300px;
  height:10px;
  overfolw:hidden;
}
...
<p>xxxxxxxxxxxxxxxxxxxxxxxx......xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.....</p>

2. 用来清楚浮动产生的影响
3. 解决 margin-top 的传递问题

让多个元素的一行显示的方法 #

• display:inline; // 转换为行内元素  但是设置宽高属性之后不起作用
• display:inline-block;  // block 可以让元素在一行显示，但是他会受空格 / 换行建，会产生默认间距
  • 去掉空格和换行建的影响 让标签都在一行 （不推荐 阅读性不好）
  • 给父元素增加一个 font-size:0，然后给子元素增加一个 font-size:14px;（但是我们还会发现一个问题：元素里面如果有文字 文字消失，然后在子元素增加一个属性即可）
• float:left/right; // 但是我们清浮动

display:inline-block 元素的特点

• 让盒子横向排列
• vertiacal-align 属性会影响到 inline-block 元素，你可能会把他的值设置为 top
• 你需要设置每一列的宽度
• 如果 html 源代码中元素之间有空格，那么列与列之间会产生空隙

*{
	margin:0px;
  padding:0px;
}

.content1{
  display:inline;
  width:200px;
  height:100px;
  backgournd-color:yellow;
}

.content2{
  display:inline;
  width:200px;
  height:100px;
  backgournd-color:yellow;
}

...

<div class="content1">内容1</div>
<div class="content2">内容2</div>

inline-block 在 ie7 不兼容

直接让块元素设置为内联对象呈递（设置属性 display:inline），然后触发块元素的 layout（如：zoom:1 或 float 属性等）。代码如下

/*推荐:IE6、7*/
div {
  display:inline-block;
  *zoom:1;
  *display: inline;
}

/*推荐*/
div {
   display:inline-block;
   _zoom:1;
   _display:inline;
}

解释：display:inline-block 照顾的是 ie8+ 的浏览器，这是正常的设置，在低版本的 ie 设置下行内块有 2 个条件，一个行内，一个设置宽高，触发 layout 即可设置宽度，而 div 设置了宽度后还是会黄航，layout 不是为了水平而设置，所以为了块级元素转行内块上加上"display:inline"属性，但是 display:inline 不会触发 layout，于是加上 zoom:1 重新触发 layout，于是形成了一个跨域设置宽高的行内元素

文本省略号 #

单行文本出现省略号必备的条件 #

*{
	margin:0;
  padding:0;
}

h2:{
  width:600px;
  height:30px;
  /*单行文本出现省略好必备的条件*/
  overflow:hidden;/*溢出隐藏*/
  white-space:nowrap;/*强制文字不折行*/
  text-overflow:ellipsis;/*文字隐藏的方式:以省略号的方式隐藏*/
}

多行文本出现省略号必备的条件 #

h2{
	width:600px;/*宽度*/
  display:-webkit-box;/*弹性盒子模型*/
  -webkit-line-orient:vertical;/*规定元素的排行方式:垂直排序*/
  -webkit-line-clamp:2;/*文字的行数 需要显示几行 值就写几行*/
  overflow:hidden;/*溢出隐藏*/
}