文字溢出问题 背景图片处理（笔记）

文字溢出问题

取消换行的操作
white-space：nowrap；

溢出部分隐藏
overflow：hidden；
（text-overflow：ellipsis； 溢出部分用…展示）

背景图片处理

照片的引入
background-image：url（文件名）；
照片的大小
background-size：xxx px xxx px；
（当照片的大小小于框会重复照片展示）
background-repeat：no-repeat；（不重复实现）
（-x x轴重复 -y y轴重复）
照片位置
background-position：top center（等等 上下左右中）；
（居中 center center）

方法一：利用文字首行间距将文字溢出

    a{
    
    
    display: inline-block;
    text-decoration: none;
    color: aliceblue;
    width: 190px;
    height: 90px;
    border: 1px solid black;
    background-image: url(//img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
    background-size: 190px 90px;
/*不能加载css后*/
    text-indent: 200px;/*(首行缩进  让文字弹出 a标签的框框) */
    white-space: nowrap;/*(让溢出文字不能换行)*/
    overflow: hidden;
}

 <a href="http://www.taobao.com" target="_blank">淘宝网</a>

方法二 利用padding让文字溢出

a{
    
    
    display: inline-block;
    text-decoration: none;
    color: aliceblue;
    width: 190px;
    height: 0px;
    padding-top 90px;
    overflow: hidden;
    border: 1px solid black;
    background-image: url(//img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
    background-size: 190px 90px;


}

补充：a标签的超链接(target="_blank") 用空白页打开链接。

当网速慢的时候 不能加载css 即只能展示html。

补充：padding可以加背景颜色和图片。不能加文字。。。。

行级元素只能嵌套行级元素
块级元素可以嵌套任何元素
！！但是p标签不能嵌套div（浏览器内核）a标签不能嵌套a标签