第08天——CSS基础

一、精灵图·

             ——  精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。从而减少服务器接受和发送请求的次数，提高页面的加载速度。

             ——  移动背景图片位置， 此时可以使用 background-position 。 

             ——  移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同 

             ——  因为一般情况下都是往上往左移动，所以数值是负值。 

             —— 一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。） 

 

二、三角做法

 

 div { 
     width: 0; 
     height: 0; 
     line-height: 0; 
     font-size: 0; 
     border: 50px solid transparent; 
     border-left-color: pink; 
 } 

 

四、CSS用户界面样式

1、鼠标样式（cursor）

    —— default —— 小白箭头（默认）

      —— pointer —— 小手

      —— move —— 移动

      —— text —— 文本

      —— not-allowed —— 禁止

2、轮廓线（outline）

     ——  给表单添加 outline: 0;   或者  outline: none; 样式之后，就可以去掉默认的蓝色边框。 

        —— border：0；也可以去掉表单边框

3、防止拖拽文本域（resize）

        —— 实际开发中，文本域右下角是不可以拖拽的

        ——  textarea{ resize: none;} 

 

4、vertical-align 属性应用

        —— CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。 

        —— 官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。 

        ——  vertical-align：baseline | top | middle | bottom

        —— 解决图片底部默认空白缝隙问题 （bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。 ）

                 两种解决方法：

                  1. 给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的） 

                  2. 把图片转换为块级元素 display: block;

      

 

 

5、溢出的文字省略号显示

      ——  单行文本溢出显示省略号--必须满足三个条件 

       —— 上代码：

/*1. 先强制一行内显示文本*/    
white-space: nowrap;  （ 默认 normal 自动换行）   
/*2. 超出的部分隐藏*/    
overflow: hidden;   
/*3. 文字用省略号替代超出的部分*/    
text-overflow: ellipsis; 

 

         —— 多行文本溢出显示省略号 

         —— 多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内 核） 

         —— 上代码：

overflow: hidden; 
text-overflow: ellipsis; 
/* 弹性伸缩盒子模型显示 */ 
display: -webkit-box; 
/* 限制在一个块元素显示的文本的行数 */
 -webkit-line-clamp: 2; /* 
设置或检索伸缩盒对象的子元素的排列方式 */ 
-webkit-box-orient: vertical; 
 

 

6、三角形强化

 

 

         —— 上代码：

width: 0; 
height: 0; 
border-color: transparent red transparent transparent; 
border-style: solid; 
border-width: 22px 8px 0 0; 

 

7、行内块巧妙应用