8.文字溢出处理，背景图片，图片代替文字，元素嵌套

单行文字溢出打点展示

    <!-- 单行文字溢出打点展示 -->
   <p>法国议会选举第一轮投票结束马克龙坐在党领先</p>
    <!-- 单行文字溢出打点展示 -->

文字溢出默认换行展示了

/* 单行文字溢出打点展示 */
/* 文字溢出了，它换行展示了 */
/* 但现在要设置它溢出不换行并且溢出部分打点展示 */
p{
    width:300px;
    height:20px;
    line-height:20px;
    border:1px solid;
}

但现在要设置它溢出不换行并且溢出部分打点展示

    /* 三件套 */
    /* （1）失去换行功能 */
    white-space: nowrap;
    /* (2)溢出部分隐藏 */
    overflow:hidden;
    /* (3)text溢出部分的文本... */
    text-overflow: ellipsis;

公司常用的三件套，在网页上有些文本是单行展示，他没有打点，但改小他的容器，立即打点展示，内部都实现了的

多行文本溢出

百度的多行文本的…技术实现，直接写的
前端工程师把这个容器的宽高算好，把每一个字的宽度算好，把这俩值传到后台去，自己算，自己估量一下，到快溢出那个字时，打点

让文本多行展示溢出

<!-- 多行文字溢出 -->
    <p>法国议会选举第一轮投票结束马克龙坐在党领先轮投票结束马克龙坐在党领先轮投票结束马克龙坐在党领先</p>
    <!-- 多行文字溢出 -->

p{
    width:300px;
    height:40px;
    line-height:20px;
    border:1px solid;
}

多行情况下，我们一般不做打点，做截断：让他溢出部分隐藏便可;
这个容器要控制她正好可以展示两行:height = 2line-height便可以只展示两行

p{
    overflow:hidden;
}

背景图片

url里面直接写图片资源的地址

<div></div>

/* 背景图片 */
div{
    width:200px;
    height:200px;
    border:1px solid;

    background-image:url(test.png);

}
/* 背景图片 */

设置背景图片的大小:background-size 宽和高

div{
    background-size:200px 200px;
}

若图片设置的大小铺不满整个容器，他就会重复的出现

div{
    background-size:100px 100px;
}

若让他不重复：background-repeat:repeat-x;repeat-y;repeat(默认) no-repeat(不铺满)
一般都会需要no-repeat

div{
    background-repeat:no-repeat;
}

（图片铺不满时），或者其他情况下，可能还需要设置背景图片在容器中显示的位置
background-position;两个值：x y;

div{
    background-position:100px 100px;
}

background-position还有其他写法：(left top)(left bottom)(left center)。。。即x:left center right;y:top center bottom;随意组合

div{
    background-position:center center;
}

图片代替文字该怎么代替

一旦浏览器采取了默认加载策略，我们还得让页面好使;
默认加载策略：当网站网速不高，机器网速不好的时候，我们的网站是屏蔽css和javascript。即，他认为html是最重要的
如果这个a链接，没有css的时候他还能好使，该怎么做?
html里必须要加文本：淘宝网；方便css加载不出来时，也可以点击

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

a{
    display:inline-block;
    text-decoration: none;
    width:190px;
    height:90px;
    border:1px solid;

    background:url(bg.png);
    background-size:190px 90px;

} 

让文本在css不好使时才展现出来，css好使时不展示
1.文本首行缩进：（1）缩进整个容器的宽度，（2）不让他换行；然（3）后溢出部分隐藏;
即把文字缩进出去了，就不再容器里面了；但他会自动换行：强制不换行；加一个溢出部分隐藏就可以了

a{
    text-indent:190px;
}

a{
    text-indent:190px;
    white-space: nowrap;
}

a{
    text-indent:190px;
    white-space: nowrap;
    overflow:hidden;
}

2.用padding；给盒子加背景图或者背景颜色，padding的部分肯定跟着变；但是内容不可以写在padding上;
(1)让容器的高度为0,那么容器就变成一条线了，文字肯定就在容器外面了;(2)加一个padding-top,padding会把容器撑开，还会加上背景图片;(3)溢出部分隐藏

a{
    height:0px;
}

a{
    height:0px;
    padding-top:90px;
}

a{
    height:0px;
    padding-top:90px;
    overflow:hidden;
}

淘宝网用的是第二种方法，加padding-top

元素嵌套规则

行级元素只能嵌套行级元素
块级元素可以嵌套任何元素

1. 但有个特殊的p标签里面不可以套块级元素；它会被div截断，变成两个p；
   

 <p><div></div></p>

2. a标签里面不可以套a标签