css——小技巧

BetterGG

已于 2023-04-20 15:48:40 修改

阅读量2.8k

点赞数 1

分类专栏： css 文章标签： css小技巧文字省略号处理文字但行居中多行靠左图片宽高自适应

于 2018-06-15 10:26:08 首次发布

本文链接：https://blog.csdn.net/BetterGG/article/details/80701567

版权

css 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

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单位设置成相应的百分比即可；

BetterGG

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
css——小技巧

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-...
复制链接

扫一扫

专栏目录