css笔记

#"bootstrap iframe height 100%"
The iframe, and any of it's containers must be 100% height..

body,html,.main-display-area,.col-md-7 {
   height:100%;
}

http://stackoverflow.com/questions/20357992/iframe-in-bootstrap-will-not-take-up-100-of-height

#Q：bootstrap的row中还可以再添加row吗？
 A: 可以。因为row类的样式只控制宽度，如果row中再有一层row那里面的那层可以实现对外面这层的完全覆盖，这就是每个类都只做和自己相关的事(这应该是这套框架的精髓)的好处。同时active等这些状态相关的类也一样只控制背景色。

以后自己写样式也应该这样，不要在控制宽度的类中设置border或者background,控制状态的类中去设置宽度等。如果想同时控制宽度和border就应该建两个类，其他效果控制也类似。应该让每个类都只做和自己相关的事情。

下面这个查询适用于宽度在500px和800px之间的屏幕：[1]
@media screen and (min-width: 500px) and (max-width: 800px) { ... }

.test2_768{display: none;}
.test2_1200{display: none;}
.test3_768{display: none;}
.test3_1200{display: none;}
@media (min-width: 768px) { /* 可视区域的宽度大于768px时 */
  .test2_768{
    display: block;
  }
}
@media (min-width: 1200px) { /* 可视区域的宽度大于1200px时 */
  .test2_1200{
    display: block;
  }
}

@media (max-width: 768px) { /* 可视区域的宽度小于768px时 */
  .test3_768{
    display: block;
  }
}
@media (max-width: 1200px) { /* 可视区域的宽度小于1200px时 */
  .test3_1200{
    display: block;
  }
}
<div class="test2_768">可视区域的宽度大于768px</div>
<div class="test2_1200">可视区域的宽度大于1200px</div>
<div class="test3_768">可视区域的宽度小于768px</div>
<div class="test3_1200">可视区域的宽度小于1200px</div>

#通过css将过宽的文字自动裁剪 [1]
.overflow_cut{
    width:100px;
    height:auto;
    overflow:hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}

#pre自动换行
pre {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

#清除浮动clearfix
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
}

#设置当前元素后的内容分页打印
style="page-break-after: always;"