前端笔记（9）元素的隐藏与显示，css用户界面样式，vertical-align垂直对齐，溢出文字省略号显示，css精灵技术，过渡，焦点，滑动门，margin负值

r囧r小猫 2022-11-13 12:24 131阅读 0赞

### css样式表/层叠样式表（7） ###

*  元素的隐藏与显示
 *   *  （1）dispaly显示
     *  （2）visibility可见性
     *  （3）overflow溢出
 *  css用户界面样式
 *   *  鼠标样式cursor
     *  轮廓线outline
     *  防止拖拽文本域resize
 *  vertical-align垂直对齐
 *   *  图片、表单和文字对齐
     *  去除图片底侧空白缝隙
 *  溢出的文字省略号显示
 *   *  white-space
     *  text-overflow 文字溢出
 *  css精灵技术（sprite）
 *  滑动门
 *  margin负值
 *  过渡
 *  获得焦点元素

# 元素的隐藏与显示 #

## （1）dispaly显示 ##

设置或检索对象是否及如何显示  
`display: none` 隐藏对象

`display：block`除了转换为块级元素之外，同时还有显示元素的意思

**特点**  
隐藏之后，不再保留位置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70]

## （2）visibility可见性 ##

设置或检索是否显示对象  
`visibility：visible ;`　对象可视

`visibility：hidden;`　 对象隐藏

**特点**  
隐藏之后，继续保留原有位置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 1]

## （3）overflow溢出 ##

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>visible</code></td> 
   <td>不剪切内容也不添加滚动条</td> 
  </tr> 
  <tr> 
   <td><code>hidden</code></td> 
   <td>不显示超过对象尺寸的内容，超出的部分隐藏掉</td> 
  </tr> 
  <tr> 
   <td><code>scroll</code></td> 
   <td>不管超出内容否，总是显示滚动条</td> 
  </tr> 
  <tr> 
   <td><code>auto</code></td> 
   <td>超出自动显示滚动条，不超出不显示滚动条</td> 
  </tr> 
 </tbody> 
</table>

# css用户界面样式 #

• 更改用户的鼠标样式 (滚动条因为兼容性非常差，我们不研究)  
• 表单轮廓等  
• 防止表单域拖拽

## 鼠标样式cursor ##

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>default</code></td> 
   <td>小白 默认</td> 
  </tr> 
  <tr> 
   <td><code>pointer</code></td> 
   <td><strong>小手</strong></td> 
  </tr> 
  <tr> 
   <td><code>move</code></td> 
   <td>移动</td> 
  </tr> 
  <tr> 
   <td><code>text</code></td> 
   <td>文本</td> 
  </tr> 
  <tr> 
   <td><code>not-allowed</code></td> 
   <td>禁止</td> 
  </tr> 
 </tbody> 
</table>

## 轮廓线outline ##

![在这里插入图片描述][20210326214300592.png]

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

outline : outline-color ||outline-style || outline-width

**取消轮廓线**  
`outline: 0;` 或者 **`outline: none;`**

## 防止拖拽文本域resize ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 2]

# vertical-align垂直对齐 #

• 有**宽度**的**块级元素**居中对齐，是`margin: 0 auto;`  
• 让**文字**居中对齐，是 `text-align: center;`

它只针对于行内元素或者行内块元素  
![在这里插入图片描述][20210326214608961.png]

vertical-align : baseline |top |middle |bottom

**通常用来控制图片/表单与文字的对齐**

## 图片、表单和文字对齐 ##

默认的图片会和文字基线对齐  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 3]

## 去除图片底侧空白缝隙 ##

**原因**  
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐  
就是图片底侧会有一个空白缝隙

**解决**  
• 给img `vertical-align:middle | top| bottom`等等； 让图片**不要和基线对齐**  
• 给img 添加 `display：block;` **转换为块级元素**就不会存在问题了

# 溢出的文字省略号显示 #

## white-space ##

设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

white-space:normal ；默认处理方式
    
    white-space:nowrap ；　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行

## text-overflow 文字溢出 ##

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出

text-overflow : clip ；不显示省略标记（...），而是简单的裁切
    
    text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）

![在这里插入图片描述][20210326215418458.png]

# css精灵技术（sprite） #

**为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度**

CSS 精灵其实是将网页中的一些背景图像**整合到一张大图**中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确**定位到精灵图中的某个小图**  
• `background-image`  
• `background-repeat`  
• `background-position`属性进行背景定位  
• 其中最关键的是使用`background-position` 属性精确地定位

css精灵技术**主要针对于背景图片**，插入的图片img 是不需要这个技术的。  
精确测量，每个小背景图片的大小和 位置  
给盒子指定小背景图片时， 背景定位基本都是 **负值**

div{ 
    background:url(../images/abcd.jpg)no-repeat;
    float:left;
    }
    .h{ 
    width:101px;
    height:106px;
    background-position:-220px-141px;
    }
    .z{ 
    width:115px;
    height:97px;
    background-position:-485px-560px;
    }

![在这里插入图片描述][20210326215757896.png]  
**png格式为透明背景  
72px为网页显示像素**

# 滑动门 #

为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术

**核心技术**  
利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏

**总结**  
1.`a`设置 背景左侧，`padding`撑开合适宽度  
2. `span` 设置背景右侧，`padding`撑开合适宽度 剩下由文字继续撑开宽度  
3. 之所以`a`包含`span`就是因为 整个导航都是可以点击的

<body>
        <div class="nav">
            <ul>
                <li>
                    <a href="#">
                        <span>首页</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>帮助与反馈</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>公众平台</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>开发平台</span>
                    </a>
                </li>
            </ul>
        </div>
    </body>

* { 
        padding: 0;
        margin: 0;
    }
    li { 
        list-style: none;
        margin: 5px;
        float: left;
    }
    li a { 
        text-decoration: none;
        font-size: 14px;
        color: #fff;
        line-height: 33px;
    }
    body { 
        background: url(../images/wx.jpg) repeat-x;
    }
    .nav { 
        margin-top: 20px;
    }
    .nav a { 
        display: inline-block;
        height: 33px;
        background: url(../images/to.png) no-repeat;
        padding-left: 15px;
    }
    .nav a span { 
        display: inline-block;
        height: 33px;
        background: url(../images/to.png) no-repeat top right;
        padding-right: 15px;
    }
    .nav a:hover { 
        background-image: url(../images/ao.png);
    }
    .nav a:hover span { 
        background-image: url(../images/ao.png);
    }

# margin负值 #

**负边距+定位：水平垂直居中**

**压住盒子相邻边框**

margin-left:-1px;
    margin-top:-1px;

**使用div盒子鼠标经过样式会出现问题**

div:hover { 
    border:1px solid #f40;
    }

**使用相对定位-保留位置**

div:hover { 
        border:1px solid #f40;
        position: relative;
    }

**如果已经存在相对定位，使用`z-index: 1`**

**CSS三角形**

width:0;
    height:0;
    border-top: 10px solid red;
    border-right: 10px solid green;
    border-bottom: 10px solid blue;
    border-left: 10px solid pink;

1.  我们用css 边框可以模拟三角效果
2.  **宽度高度为0**
3.  我们**4个边框都要写**， 只保留需要的边框颜色，其余的不能省略，都改为 `transparent` 透明就好了
4.  为了照顾兼容性 低版本的浏览器，加上 `font-size: 0;` `line-height: 0;`

# 过渡 #

过渡（`transition`)  
是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

过渡动画：是从一个状态 渐渐的过渡到另外一个状态

经常和 `:hover` 一起 搭配使用

**语法格式:**  
`transition: 要过渡的属性 花费时间 运动曲线 何时开始;`

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
   <th>CSS</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>transition</td> 
   <td>简写属性，用于在一个属性中设置四个过渡属性</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>transition-property</td> 
   <td>规定应用过渡的 CSS 属性的名称</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>transition-duration</td> 
   <td>定义过渡效果花费的时间，默认是 0</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>transition-timing-function</td> 
   <td>规定过渡效果的时间曲线，默认是 “ease”</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>transition-delay</td> 
   <td>规定过渡效果何时开始，默认是 0</td> 
   <td>3</td> 
  </tr> 
 </tbody> 
</table>

**属性**  
属性就是你想要**变化的 css 属性**， 宽度高度 背景颜色 内外边距都可以  
如果想要所有的属性都变化过渡， 写一个all就可以

**花费时间**  
`transition-duration` 花费时间 单位是 秒（必须写单位） s ms 比如 0.5s 这个s单位必须写 ms 毫秒

**运动曲线**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 4]

默认是 `ease`

**何时开始**  
默认是 `0s` 鼠标触发就立即开始 可以设置 延迟触发时间

div { 
        width: 200px;
        height: 100px;
        background-color: pink;
        /* transition: 要过渡的属性 花费时间 运动曲线 何时开始; */
            /*如果有多组属性，使用逗号隔开*/
        transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
        /* transtion 过渡的意思 这句话写到div里面而不是 hover里面 */
    }
    div:hover {   /* 鼠标经过盒子，我们的宽度变为400 */
        width: 600px;
        height: 300px
    }
    transition: all 0.6s;  /* 所有属性都变化用all 就可以了 后面俩个属性可以省略 */

# 获得焦点元素 #

`:focus` 伪类 选择器用于选取获得焦点的元素 。 我们这里主要针对的是 **表单元素**

:hover

**语法：**

.total input { 
        border: 1px solid #ccc;
        height: 30px;
        width: 40px;
        transition: all .5s;
    }
    /*这个input 获得了焦点*/
    .total input:focus { 
        width: 80px;
        border: 1px solid skyblue;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70]: /images/20221022/d06b43a530dd48249c53b242ed0e46a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210326213713669.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy,size_16,color_FFFFFF,t_70
[20210326214300592.png]: https://img-blog.csdnimg.cn/20210326214300592.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210326214439220.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy,size_16,color_FFFFFF,t_70
[20210326214608961.png]: https://img-blog.csdnimg.cn/20210326214608961.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210326214738421.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy,size_16,color_FFFFFF,t_70
[20210326215418458.png]: https://img-blog.csdnimg.cn/20210326215418458.png
[20210326215757896.png]: https://img-blog.csdnimg.cn/20210326215757896.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210326220731311.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy,size_16,color_FFFFFF,t_70