文字溢出处理、背景图片处理以及偷来的企业开发经验

单行文字溢出处理

The text-overflow property doesn’t force an overflow to occur（发生）. To make text overflow（溢出） its container you have to set other CSS properties: overflow and white-space.
The text-overflow property doesn’t force an overflow to occur. To make text overflow its container you have to set other CSS properties: overflow and white-space. For example:

overflow: hidden;
white-space: nowrap;

p{
    width: 100px;
    height: 20px;
    line-height: 20px;
    border: 2px solid blue;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

对于多行溢出的处理，PC端和移动端略有不同，对于PC端可参见百度，手写…

背景图片处理

一般处理

div{
    width: 700px;
    height: 949px;
    background-image: url(http://www.yama.gz.cn/%E4%BD%9C%E8%80%85.jpeg);
    background-size:554px 949px;

    background-repeat: no-repeat;

    /*x,y坐标*/
    /* background-position: 20px 20px; */

    background-position: center center;/*同50%效果一样*/
}

附淘宝网知识点
要考虑的深远，比如用户在网络不好时难以加载css文件，但又不能影响核心功能的使用,比如淘宝网的这张图片。在无法加载css是仍然会显示淘宝网链接，正常时会只显示图片。如何实现？

两种方法
html

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

css

a{
    width: 190px;
    
    background-image: url(https://img.alicdn.com/tfs/TB1NMUQeUH1gK0jSZSyXXXtlpXa-190-121.gif);
    display: inline-block;
    border: 2px solid rgb(57, 57, 139);
    /* padding可以加背景颜色和图片，但是内容不能写到padding上 */
    background-size:190px 121px;

    /* 方法1 */
    /* text-indent: 190px;
    white-space: nowrap;
    overflow: hidden;  */

    /* 方法2 */
    /* height: 0px;
    padding-top: 121px;
    overflow: hidden; */
}

注意事项

• p标签不能套块级元素
• a标签不能套a标签
• span标签如果添加了如下其中一个就会变成inline-block

	position: absolute;
    float: left/right;

• 行级元素（inline/内联）一旦变成inlie-block之后，外面的文字回和它底对齐，如果里面由文字的话，会和里面的文字底对齐，可通过vertical-align:调整

写给自己

从上学期开始想做一个自己的博客网站开始学前端，至此一两个月了，感觉前端很棒，会继续学下去，也希望前端能给我带来2021的第一份工作。

至此，html+css第一次学习算是完结了

其实之前在B站看过视频，后来在学JS时又中止回来把这部分补了一遍，感觉很有必要