css学习（第六天）（鼠标样式，vertical-align，文字超出...）

加蓓努力我先飞

已于 2024-09-07 15:12:48 修改

阅读量770

点赞数 9

分类专栏：前端开发 2.CSS 文章标签： css 学习前端

于 2024-09-07 15:09:52 首次发布

本文链接：https://blog.csdn.net/ingenuou_/article/details/141994768

版权

前端开发同时被 2 个专栏收录

93 篇文章 4 订阅

订阅专栏

2.CSS

8 篇文章 0 订阅

订阅专栏

CSS高级技巧

1. 拓展@

1.1 margin负值之美

1). 负边距+定位：水平垂直居中

咱们前面讲过，一个绝对定位的盒子，利用父级盒子的 50%，然后往左(上) 走自己宽度的一半，可以实现盒子水平垂直居中。

2). 压住盒子相邻边框

7.2 CSS三角形之美

 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; 
 }

在这里插入图片描述

p {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px;
	border-color:  transparent transparent transparent red;
	font-size: 0;
	line-height: 0;
}

在这里插入图片描述

一张图，你就知道 css 三角是怎么来的了, 做法如下：

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

2. CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
- 更改用户的鼠标样式 (滚动条因为兼容性非常差，我们不研究)
- 表单轮廓等。
- 防止表单域拖拽

2.1 鼠标样式cursor

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

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止
鼠标放我身上查看效果哦：

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
  <li style="cursor:not-allowed">我是文本</li>
</ul>

2.2 轮廓线 outline

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

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

但是我们都不关心可以设置多少，我们平时都是去掉的。 li
最直接的写法是： outline: 0; 或者 outline: none;

 <input  type="text"  style="outline: 0;"/>

2.3 防止拖拽文本域resize

实际开发中，我们文本域右下角是不可以拖拽：

<textarea  style="resize: none;"></textarea>

2.4 用户界面样式总结

属性	用途	用途
鼠标样式	更改鼠标样式cursor	样式很多，重点记住 pointer
轮廓线	表单默认outline	outline 轮廓线，我们一般直接去掉，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 图片、表单和文字对齐

所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。默认的图片会和文字基线对齐。

3.2 去除图片底侧空白缝隙

原因：

图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。

就是图片底侧会有一个空白缝隙。
解决的方法就是：
- 给img vertical-align:middle | top| bottom等等。让图片不要和基线对齐。
- 给img 添加 display：block; 转换为块级元素就不会存在问题了。

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

4.1 white-space

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

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>溢出的文字省略号显示</title>
	<style>
		div {
			width: 150px;
			height: 25px;
			border: 1px solid pink;
			/*当文字显示不开的时候，自动换行*/
			/*white-space: normal;*/
			/*1. 要文字强制一行内显示 除非 遇到 br   */
			white-space: nowrap;
			/*2. 溢出隐藏*/
			overflow: hidden;
			/*3. 文字溢出 用省略号替代  ellipsis 省略号*/
			text-overflow: ellipsis;
		}
	</style>
</head>
<body>
	<div>hi~ 来自猩猩的你-欢迎你</div>
</body>
</html>

4.2 text-overflow 文字溢出

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

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

注意：
一定要首先强制一行内显示，再次和overflow属性搭配使用

4.3 总结三步曲

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

5.常见布局技巧

margin负值的运用
文字围绕浮动元素
行内块的巧妙运用
css三角强化

5.1margin负值的运用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			/*浮动的盒子是紧贴在一起的*/
			float: left;
			width: 200px;
			height: 300px;
			border: 1px solid #ccc;
			margin-left: -1px;
			margin-top: -1px;
		}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>margin负值之美-突出显示某个盒子</title>
	<style>
		div {
			/*浮动的盒子是紧贴在一起的*/
			float: left;
			width: 200px;
			height: 300px;
			border: 1px solid #ccc;
			margin-left: -1px;
			margin-top: -1px;
		}
		/*鼠标经过div 的意思  p:hover */
		div:hover {
			/*我要让当前鼠标经过的这个div 升到最高处来就好了*/
			/*定位的盒子是最高层的  */
			border: 1px solid #f40;
			/*我们只要保证当前的这个盒子 是定位 就会压住 标准流和浮动盒子*/
			position: relative;
			/*我们只能用相对定位  它是占位置的*/
		}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>margin负值之美-突出显示某个盒子</title>
	<style>
		div {
			position: relative;
			/*浮动的盒子是紧贴在一起的*/
			float: left;
			width: 200px;
			height: 300px;
			border: 1px solid #ccc;
			margin-left: -1px;
			margin-top: -1px;
		}
		/*鼠标经过div 的意思  p:hover */
		div:hover {
			/*我要让当前鼠标经过的这个div 升到最高处来就好了*/
			/*定位的盒子是最高层的  */
			border: 1px solid #f40;
			/*都是定位的盒子，我们通过z-index 来实现层级关系*/
			z-index: 1;

		}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>