1、文字超出显示为省略号
//单行：
overflow: hidden;
text-overflow:ellipsis; //当对象内文本溢出时显示省略标记（...）
white-space: nowrap; // 禁止换行
//多行：
display: -webkit-box; //display: box; 该属性会将此元素及其直系子代加入弹性框模型中。
-webkit-box-orient: vertical; //box-orient: horizontal | vertical | inherit; 该属性定义父元素的子元素是如何排列的
-webkit-line-clamp: 3; //块元素显示的文本的行数
overflow: hidden;
2.div垂直居中
position: absolute;
top: 50%;
left: 50%;
background-color: #000;
-webkit-transform: translateX(-50%) translateY(-50%);
- rem 单位如何转换为像素值
当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。
例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。
2.split 和join的区别。
Join 函数获取一批字符串，然后用分隔符字符串将它们联接起来，从而返回一个字符串。Split 函数获取一个字符串，然后在分隔符处将其断开，从而返回一批字符串。但是，这两个函数之间的主要区别在于 Join 可以使用任何分隔符字符串将多个字符串连接起来，而 Split 只能使用一个字符分隔符将字符串断开。
简单地说，如果你用split，是把一串字符(根据某个分隔符)分成若干个元素存放在一个数组里。而Join是把数组中的字符串连成一个长串，可以大体上认为是split的逆操作。
3、CSS实现垂直水平居中
<style>
.wraper{
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
}
.content {
width: 300px;
height: 300px;
background: orange;
}
</style>
</head>
<body>
<div class="wraper">
<div class="content"></div>
</div>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*水平居中*/
position: relative;
top: 50%; /*偏移*/
margin-top: -150px;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*水平居中*/
position: relative;
top: 50%; /*偏移*/
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="content"></div>
</body>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center; /*定义body的元素垂直居中*/
justify-content: center; /*定义body的里的元素水平居中*/
}
.content {
width: 300px;
height: 300px;
background: orange;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
图片居中
<style>
.img_wrap{
width: 400px;
height: 300px;
border: 1px dashed #ccc;
display: table-cell; /*主要是这个属性*/
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="img_wrap">
<img src="1.jpg">
</div>
</body>
3、浏览器的内核分别是什么?
IE:trident内核
Firefox：gecko内核
safari：webkit内核
opera：以前是presto内核，现在改用google chrome的Blink内核
Chrome：Blink（基于webkit，google与opera software共同开发）
4、浏览器兼容问题
css兼容性问题：①不同浏览器的标签默认的外补丁和内补丁不同，解决方案：用通配符*来设置各个标签的内外补丁是0(即设置margin和padding为0);②div的垂直居中问题 vertical-align：middle;文字居中：将行距增加到和整个div一样，高line-height=行高;③margin加倍问题：设置为float的div在ie下的margin会加倍。解决方案：为这个div设置样式：display:inline;
1、尽量减少HTTP请求次数
终端用户响应的时间中，有80%用于下载各项内容，这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数，这是提高网页速度的关键步骤。
减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。
1、合并文件：合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，例如可以简单地把所有的CSS文件都放入一个样式表中。当脚本 或者样式表在不同页面中使用时需要做不同的修改，这可能会相对比较麻烦，但即便如此也要把这个方法作为改善页面性能的重要一步；
2、CSS Sprites：CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分;
网友评论