1、文字少于一行时居中,超过一行时靠左
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Title</title>
<style>
.box{
width: 300px;
height: auto;
background-color: #F24646;
text-align: center;
}
.text{
color: #fff;
display: inline-block;
text-align: left;
}
</style>
</head>
<body>
<div class="box">
<p class="text">文字长度</p>
</div>
</body>
</html>
原理:
给 p 标签设置 inline-block 后,该标签变成 内联块级元素。根据内联元素的特性,宽度为 auto 默认值时,真实宽度为文本的宽度,此时 text-align: left 是起了作用的,它在 p 标签中靠左显示,而整个 p 标签因为父级 div 的 text-align: center 设置又居中,所以出现一行时居中,超出一行时靠左的表象。
本质是:不管文本你内容是否超出一行,p 标签中的内容都靠左显示,整个 p 标签居中显示。
最后,因为这些知识点我是从 张鑫旭大神 的《css 世界》中学来,出于感激,帮他打个广告,在该书 page22 有更多更深层次的理解,对 css 有大兴趣的学友们可购买学习。
2、文字超出一行时做省略号处理
注:必须设置宽度
.cInfo {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
3、图片自适应
效果:图片会随着窗口改变宽度自动缩放,在移动设备中测试也是一样的效果。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="scale">
<img src="banner.png">
</div>
</body>
</html>
.scale img{
background-size:contain|cover;
width:100%;
height: auto;
}
4、rem 的讲解及使用(来自:beidan)
(1)兼容性:
目前,IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。
就算对不支持的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
(2)使用 % 单位
css中的body中先全局声明font-size=62.5%,这里的%的算法和rem一样。
因为100%=16px,1px=6.25%,所以10px=62.5%,
这是的1rem=10px,所以12px=1.2rem。px与rem的转换通过10就可以得来,很方便了吧!
(3)使用方法
注意,rem是只相对于根元素htm的font-size,即只需要设置根元素的font-size,其它元素使用rem单位设置成相应的百分比即可;