CSS(九)---元素显示和隐藏、用户界面样式(鼠标、轮廓线、防止拖拽文本域)、vertical-align 垂直对齐、溢出的文字省略号表示、 去除图片底侧空白缝隙、精灵图、滑动门、三角

本文主要是介绍CSS(九)---元素显示和隐藏、用户界面样式(鼠标、轮廓线、防止拖拽文本域)、vertical-align 垂直对齐、溢出的文字省略号表示、 去除图片底侧空白缝隙、精灵图、滑动门、三角,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.元素的显示和隐藏

1.1 display 显示

  display 设置或检索对象是否及如何显示

display: none; : 隐藏对象
display:block;: 除了转换为块级元素之外,同时还有显示元素的意思。

特点: 隐藏之后,不再保留位置。
应用: 配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛

1.2 visibility 可见性

       visibility:设置或检索是否显示对象:

visibility:visible;  对象可视
visibility:hidden;   对象隐藏

特点: 隐藏之后,继续保留原有位置。

1.3 overflow 溢出

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

overflow:visible; 不剪切内容也不添加滚动条
overflow:hidden; 不显示超过对象尺寸的内容,超出的部分隐藏掉
overflow:scroll; 不管超出内容否,总是显示滚动条
overflow:auto; 超出自动显示滚动条,不超出不显示滚动条

应用场景:

  1. 清除浮动
  2. 隐藏超出内容,隐藏掉, 不允许内容超过父盒子。

1.4 显示和隐藏总结

属性区别用途
display隐藏对象,不保留位置配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛
visibility隐藏对象,保留位置使用较少
overflow只是隐藏超出大小的部分1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

2.CSS用户界面样式

2.1鼠标样式cursor

 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。   例如:cursor = “pointer”;

cursor:default; :小白 默认
cursor:pointer; :小手
cursor:move; :移动
cursor:text; :文本
cursor:not-allowed; : 禁止

2.2轮廓线 outline

 是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 outline 包含: outline-color、outline-style、outline-width 

去掉,最直接的写法是 : outline: 0; 或者 outline: none;

2.3防止拖拽文本域resize

实际应用场景中:文本域右下角是不可以拖拽:<textarea  style="resize: none;"></textarea>

2.4用户样式界面总结

属性用途描述
鼠标样式更改鼠标样式cursor样式很多,重点记住 pointer
轮廓线表单默认outlineoutline 轮廓线,我们一般直接去掉,border是边框,我们会经常用
防止拖拽主要针对文本域resize防止用户随意拖拽文本域,造成页面布局混乱,我们resize:none

3.vertical-align 垂直对齐

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

vertical-align 垂直对齐,它只针对于行内元素或者行内块元素
语法:vertical-align : baseline |top |middle |bottom

在这里插入图片描述
设置或检索对象内容的垂直对其方式。
注意:
vertical-align 不影响块级元素中的内容对齐,它只针对于行内元素或者行内块元素,特别是行内块元素, 通常用来控制图片/表单与文字的对齐

3.1 图片表单和文字对齐

在这里插入图片描述

3.2 去除图片底侧空白缝隙

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

解决方法:
1).给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
2).给img 添加 display:block; 转换为块级元素就不会存在问题了。

4.溢出的文字省略号表示

4.1white-space

white-space设置或检索对象内文本显示方式。通常我们使用于强制一行****显示内容
white-space:normal ; 默认处理方式
white-space:nowrap ; 强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。

4.2text-overflow 文字溢出

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

text-overflow : clip ; 不显示省略标记(…),而是简单的裁切
text-overflow:ellipsis ; 当对象内文本溢出时显示省略标记(…)
注意: 一定要首先强制一行内显示,再次和overflow属性 搭配使用

4.3文字省略号三步骤

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

5.CSS精灵技术

5.1为什么要使用精灵图

在这里插入图片描述

图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。
然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。
为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度。

5.2精灵技术

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图。
当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。
我们需要使用CSS的

  • background-image、
  • background-repeat
  • background-position 属性进行背景定位,
  • 其中最关键的是使用background-position 属性精确地定位。

5.3使用

首先我们知道,css精灵技术主要针对于背景图片,插入的图片img 是不需要这个技术的。

  1. 精确测量,每个小背景图片的大小和 位置。
  2. 给盒子指定小背景图片时, 背景定位基本都是 负值。

6.滑动门

经典布局:
<li><a href="#"><span>导航栏内容</span></a>
</li>CSS样式:
* {padding:0;margin:0;}
body{background: url(images/wx.jpg) repeat-x;
}
.father {padding-top:20px;
}
li {padding-left: 16px;height: 33px;float: left;line-height: 33px;margin:0  10px;background: url(./images/to.png) no-repeat left ;
}
a {padding-right: 16px;height: 33px;display: inline-block;color:#fff;background: url(./images/to.png) no-repeat right ;text-decoration: none;
}
li:hover,li:hover a {background-image:url(./images/ao.png);
}

总结:

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

7.拓展

7.1 margin负值之美

1)负边距+定位:水平垂直居中
一个绝对定位的盒子, 利用 父级盒子的 50%, 然后 往左(上) 走 自己宽度的一半 ,可以实现盒子水平垂直居中。
2)压住盒子相邻的边框

7.2CSS三角形之美

div {
width: 0; height: 0;
line-height:0;
font-size: 0;
border-top: 10px solid red;border-right: 10px solid green;border-bottom: 10px solid blue;border-left: 10px solid #000;
}
  1. 我们用css 边框可以模拟三角效果
  2. 宽度高度为0
  3. 我们4个边框都要写, 只保留需要的边框颜色,其余的不能省略,都改为 transparent 透明就好了
  4. 为了照顾兼容性 低版本的浏览器,加上 font-size: 0; line-height: 0;

这篇关于CSS(九)---元素显示和隐藏、用户界面样式(鼠标、轮廓线、防止拖拽文本域)、vertical-align 垂直对齐、溢出的文字省略号表示、 去除图片底侧空白缝隙、精灵图、滑动门、三角的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/943694

相关文章

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

使用Python实现文本转语音(TTS)并播放音频

《使用Python实现文本转语音(TTS)并播放音频》在开发涉及语音交互或需要语音提示的应用时,文本转语音(TTS)技术是一个非常实用的工具,下面我们来看看如何使用gTTS和playsound库将文本... 目录什么是 gTTS 和 playsound安装依赖库实现步骤 1. 导入库2. 定义文本和语言 3

Python实现常用文本内容提取

《Python实现常用文本内容提取》在日常工作和学习中,我们经常需要从PDF、Word文档中提取文本,本文将介绍如何使用Python编写一个文本内容提取工具,有需要的小伙伴可以参考下... 目录一、引言二、文本内容提取的原理三、文本内容提取的设计四、文本内容提取的实现五、完整代码示例一、引言在日常工作和学

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

CSS @media print 使用详解

《CSS@mediaprint使用详解》:本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等,还提供了测试方法和关键注意事项,并分享了进阶技巧,详细内容请阅读本文,希望能对你有所帮助...

Java实现将Markdown转换为纯文本

《Java实现将Markdown转换为纯文本》这篇文章主要为大家详细介绍了两种在Java中实现Markdown转纯文本的主流方法,文中的示例代码讲解详细,大家可以根据需求选择适合的方案... 目录方法一:使用正则表达式(轻量级方案)方法二:使用 Flexmark-Java 库(专业方案)1. 添加依赖(Ma

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分