css常見Bug修複

1.一個div彈出層，不固定寬度和高度，如何讓它上下左右居中？

解決方法，使用transform,如下：

div{
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
}
           

2.響應式布局

開發一個頁面需要在所有裝置上能夠完美展現：

使用媒體查詢@media

設定如下：

/*最大寬度為400px執行*/
@media screen and (max-width:400px)
{}
/*最小寬度為400，最大寬度為700執行*/
@media screen and (min-width:400px) and (max-width:700px)
{}
/*最小寬度為700執行*/
@media screen and (min-width:700px)
{}
           

3.文本溢出

單行文本溢出，使用省略号表示：

.inaline{
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
           

多行文本溢出：

.intowline{
 	display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}
           

4. resize

resize屬性指定一個元素是否是由使用者調整大小的。該屬性适用于計算其他元素的溢出值是不是"visible"。

它的屬性值包括：

（1）none使用者無法調整元素的尺寸。

（2）both使用者可調整元素的高度和寬度。

（3）horizontal使用者可調整元素的寬度。

（4）vertical使用者可調整元素的高度。

執行個體：

<div class="mydiv">
<p>本教程全面介紹 JavaScript 核心文法，從最簡單的講起，循序漸進、由淺入深，力求清晰易懂。所有章節都帶有大量的代碼執行個體，便于了解和模仿，可以用到實際項目中，即學即用。本教程适合初學者當作 JavaScript 語言入門教程，也适合當作日常使用的參考手冊。</p>
  </div>
  <style>
 .mydiv
 {
   overflow: hidden;
   width: 200px;
   height: 200px;
   border: 1px solid #ddd;
   resize: both;
 }
</style>