零散知识点总结

标签的合理使用

• 行级元素只能嵌套行级元素，块级元素可以嵌套任何元素
• a标签里面不能适用a标签
• p标签当中不能是用div，一旦这样适用了，浏览器会自动转化形式，当然也不要放p或者ul标签,结果也是一样。

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

文本溢出处理

• 单行文本溢出容器的时候，我们要打点展示

<p>sheep的web前端学习之路，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>

p {
    width: 200px;
    height: 20px;
    line-height: 20px;
    border: 1px solid #ccc;
    /*文本打点三件套*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

image.png

• 多行文本溢出容器的时候，打点展示，前端计算容器的面积，后端计算字符数量，当溢出的时候，就用...站位，没错，就是输入法控制。
• 多行文本溢出截断技术，使用行高来控制行数

<p>sheep的web前端学习之路,哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈,sheep的web前端学习之路，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>

p {
    width: 400px;
    height: 60px;
    font-size: 16px;
    /*控制行高是高度的一半，让文本展示两行，溢出的部分隐藏起来*/
    line-height: 30px;
    overflow: hidden;
    border: 1px solid #ccc;
}

image.png

a标签当中添加图片的处理

很多时候，我们会在图片当中添加图片，图片就能够点击，但是当网速不恏的时候，css无法显示的时候，为了保证功能，我们要在图片显示不了的时候，文字显示，图片显示，文字显示。

<a href = "#" target="_blank">sheep</a>

a {
    display: inline-block;
    text-decoration: none;
    width: 100px;
    height: 100px;
    background-image: url("xxx.png"); // 背景图片
    
}