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>