渡一css7

溢出容器，要打点展示

1.单行文本

<p>微微温暖融化昨夜的冰雪,就像是每一秒都称为岁月</p>

p {
    width: 300px;
    height: 20px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

2.多行文本

多行只做截断，不做打点

<p>微微温暖融化昨夜的冰雪,就像是每一秒都称为岁月 微微从不停歇 微微就是秋天里每片落叶
</p>

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

---

背景图片处理

div {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    background-image: url(xuan1.jpg);
    background-size: 100px 100px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

图片代替文字问题处理

第一种方法：

当网好时：

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

a {
    display: inline-block;
    text-decoration: none;
    color: #424242;
    width: 190px;
    height: 90px;
    border: 1px solid black;
    background-image: url(https://img.alicdn.com/tfs/TB1UDHOcwoQMeJjy0FoXXcShVXa-286-118.png);
    background-size: 190px 90px;
    text-indent: 200px;
    white-space: nowrap;
    overflow: hidden;
}

当网不好时，或者没有css渲染时

第二种方法

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

a {
    display: inline-block;
    text-decoration: none;
    color: #424242;
    width: 190px;
    height: 0;
    padding-top: 90px;
    overflow: hidden;
    border: 1px solid black;
    background-image: url(https://img.alicdn.com/tfs/TB1UDHOcwoQMeJjy0FoXXcShVXa-286-118.png);
    background-size: 190px 90px;
}

当网不好时，或者没有css渲染时

---

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

特殊的
p标签不能嵌套div标签
a标签不能套a标签