HTML+CSS零基础学习笔记（四）

CSS学习笔记（三）

一、文本溢出处理

1. 单行文本（打点展示 — “三件套”）
   ★ 处理单行文本溢出，一般进行“溢出打点”处理。如下图：

   <p class="content">这只是一段演示文字！这只是一段演示文字！这只是一段演示文字！</p>
   

   .content{
       width: 300px;
       height: 20px;
       line-height: 20px;
       border: 1px solid #424242;
   
       /* 单行文本溢出 --> 打点展示"三件套" */
       white-space: nowrap;        /* 取消自动换行 */
       overflow: hidden;           /* 溢出部分隐藏 */
       text-overflow: ellipsis;    /* 文本溢出打点展示（显示：...） */
   }
   

   

2. 多行文本（截断处理）
   ★ 在PC端处理多行文本溢出，一般不进行“溢出打点”处理，一般做“截断”处理。

   <p class="content">这只是一段演示文字！这只是一段演示文字！这只是一段演示文字！这只是一段演示文字！这只是一段演示文字！</p>
   

   .content{
       width: 300px;
       height: 40px;
       line-height: 20px;
       border: 1px solid #424242;
   
       /* 多行文本溢出 --> 一般做"截断"处理 */
   	overflow: hidden;	/* 溢出部分隐藏 */
   }
   

   

二、背景图片的处理

★ 对背景图片常见的处理方式如下所示：

<div class="bg-box"></div>

.bg-box{
    width: 600px;
    height: 400px;
    /* 背景颜色 --- 其属性值有四种设置方式：① 纯英文单词 eg：red ；② 颜色代码 eg： #f40 或 #ff4400 ； ③ 颜色函数 eg：rgb(255, 255, 255) ④颜色-透明度函数 eg：rgba(255, 255, 255, 0.5) --> 第4个参数取值为0（完全透明）〜1（完全不透明） */
    background-color: #f40;
    /* 背景图片 --- 将图片地址在url()的括号中 */
    background-image: url(code.jpeg);
    /* 设置背景图片的尺寸大小（第一个值为"宽"，第二个值为"高"）*/
    background-size: 300px 200px;
    /* 设置背景图片是否重复，可设置为：no-repeat、repeat、repeat-x、repeat-y等（默认为：repeat） */
    background-repeat: no-repeat;
    /* 设置背景图片的位置（有以下三类写法） */
    /* background-position: 100px 100px; */
    /* background-position: left top; */
    /* background-position: 50% 50%; */
    background-position: center center; /*相当于---> background-position: 50% 50%; */
}

三、企业开发经验

1. “文字代替图片”功能
   ★ 当网络不好时浏览器会自动忽略CSS样式，而要想在此时依旧能够显示出“文字代替图片”的效果，就应该作如下处理！！！

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

   1）方法一：

   .logo{
       display: inline-block;
       text-decoration: none;
       color: #424242;
       width: 142px;
       height: 58px;
       background-image: url(https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
       background-repeat: no-repeat;
   
       /* ★方法一★ */
       text-indent: 200px;     /* 设置一个大于所属盒子宽度的文本缩进值*/
       white-space: nowrap;    /* 取消自动换行 */
       overflow: hidden;       /* 溢出时隐藏 */
   }
   

   
   2）方法二：(淘宝官网 — 所用方法)
   原理：padding上可以有背景颜色和背景图片，但不能有文字！

   .logo{
       display: inline-block;
       text-decoration: none;
       color: #424242;
       width: 142px;
       /* ★方法二★ */
       /* 原理为：padding上可以有背景颜色和背景图片，但不能有文字！ */
       /* 此时将其高度设置为0，padding-top设置为原来的高度，则a标签里的文字被挤到了该标签的下方（外边），然后将其设置为溢出时隐藏。 */
       height: 0;
       padding-top: 58px;
       overflow: hidden;
   
       background-image: url(https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
       background-repeat: no-repeat;
   }
   

   

2. 行级元素只能嵌套行级元素，块级元素可以嵌套任何元素。

   【特例】p标签内不能嵌套div标签，否则p标签会被浏览器砍断，成为两个p标签。
   

3. a标签内不能嵌套a标签，否则会出错。(系统不知道跳转那个a标签的href属性值)
   

四、CSS要点补充

1. 导航栏整体居中，两侧空白的宽度自适应
2. 凡是设置了position: absolute; 或 float: left / right; 的元素，系统会打内部把元素转换成inline-block，这时会由该元素内容撑开它的宽高。
3. 文本类元素的对齐
   1）文本类元素和文本类元素排列在一起会自动：底边对齐。
   ★ 一旦一个文本类元素里包含文字了，那么外面的文字会和该元素里面的文字底边对齐。
   
   2）调节对齐线

   /* 调节水平对齐线的三种方式 */
   vertical-align: 10px;
   vertical-align: -5px;
   vertical-align: middle;
   

总结自《渡一教育_2020权威HTML+CSS零基础入学》