文字溢出
溢出容器,要打点展示
单行文本
width: 300px;
height: 40px;
line-height: 20px;
border:1px solid black;
/* 处理单行文本 */
/* 设置超出部分容器不会换行 */
white-space: nowrap;
/* 设置超出部分隐藏 */
overflow: hidden;
/* 显示不了的用点表示 */
text-overflow: ellipsis;
多行文本
/* 多行文本,不做打点,只做截断 */
overflow: hidden;
背景图片处理
width: 200px;
height: 200px;
border: 1px solid black;
/* 背景图片处理 */
background-image: url(001.jpg);
background-size: 100px 100px;
/* 设置是否平铺 */
background-repeat: no-repeat;
/* 值可以用百分号形式,也可以用px ,也可以用left/right/bottom/top/center组合 */ background-position: 50% 50% ;
淘宝网标签
<a href="https://www.taobao.com/" target="_blank">淘宝网</a>
target是设置在新标签页打开
display: inline-block;
text-decoration: none;
color: #424242;
width: 190px;
height:100px;
border: 1px solid black;
background-image:url(http://img.sj33.cn/uploads/allimg/201401/7-140126155409326.jpg);
background-size: 190px 100px;
/* 图片不加载时显示文字 第一种方法 */
text-indent: 200px;
white-space:nowrap ;
overflow: hidden;
/* 第二种 padding不能写字但可以加载图片
从新设置高度*/
height:0;
padding-top:100px ;
overflow: hidden;
嵌套需要注意点
行级元素只能嵌套行级元素
块级元素可以嵌套任何元素
p标签不能套div
a标签不能套a标签