1.单行文本
处理溢出问题
html：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="1.css">
<style type="text/css">
</style>
</head>
<body>
<p>习近平和南非总统拉马福萨共同出席中南科学家高级别对话会开幕式</p>
</body>
</html>css:
*{
padding: 0;
margin: 0;
}
p{
width: 200px;
height: 20px;
line-height: 20px;
white-space: nowrap; /*不换行*/
overflow: hidden; /*溢出隐藏*/
text-overflow: ellipsis; /*溢出的打点表示*/
}2.多行文本
百度上的多行文本最后打点显示的实现方法：手动打点显示，后台计算字体大小。
元素的height/line-heighrt等于所能显示的行数
以下只能显示两行
再将溢出的部分隐藏：
显示结果：
3.设置背景图片
html：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="1.css">
<style type="text/css">
</style>
</head>
<body>
<div></div>
</body>
</html>css:
*{
padding: 0;
margin: 0;
}
div{
width:200px;
height: 200px;
border:1px solid red;
background-image: url(1.jpeg);
background-size: 100px 100px; /*设置图片的大小*/
}
去掉重复：
div{
width:200px;
height: 200px;
border:1px solid red;
background-image: url(1.jpeg);
background-size: 100px 100px; /*设置图片的大小*/
background-repeat: no-repeat;/*不重复显示*/
}
设置位置
background-position: left bottom;
background-position: right bottom;
background-position: right top;
background-position: center center;//居中
4.开发中处理背景图
在开发中，要考虑到网页在运行的时候会遇到网速不佳的情况，这时候会屏蔽掉所有的css和js代码，所以在我们设置图片链接的时侯，也要考虑到图片加载不出来的时候用文字代替。
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="1.css">
<style type="text/css">
</style>
</head>
<body>
<a href="https://www.taobao.com" target="_blank">淘宝网</a>
</body>
</html>css:
*{
padding: 0;
margin: 0;
}
a{
/*a标签初始化*/
display: inline-block;
text-decoration: none;
color: #424242;
/*设置图片展示*/
width:190px;
height: 90px;
border:1px solid red;
background-image: url(taobao.png);
background-size: 190px 90px; /*设置图片的大小*/
/*设置图片加载不出来时，显示文字链接*/
line-height: 200px;/*将文字从图片上移出*/
white-space: nowrap; /*文字不换行*/
overflow: hidden;
}网速好:
网速不好：
第二种方法（淘宝网用的方法，展示结果一样）
css:
*{
padding: 0;
margin: 0;
}
a{
/*a标签初始化*/
display: inline-block;
text-decoration: none;
color: #424242;
/*设置图片展示*/
width:190px;
height: 0px; /*设置高度为0*/
padding-top:90px; 设置padding将容器撑开，将图片展示在padding中
overflow: hidden;
border:1px solid red;
background-image: url(taobao.png);
background-size: 190px 90px; /*设置图片的大小*/
}开发经验：
行级元素只能嵌套行级元素
块级元素可以嵌套任何元素