【原】CSS高級(jí)技巧——鼠標(biāo)樣式，輪廓,，文本域防拖拽,，vertical-align 垂直對(duì)齊，文字溢出問(wèn)題

流楚丶格念 2022-01-14

展開(kāi)全文

文章目錄

CSS高級(jí)技巧

CSS用戶(hù)界面樣式

所謂的界面樣式，就是更改一些用戶(hù)操作樣式，比如更改用戶(hù)的鼠標(biāo)樣式，表單輪廓等,。但是比如滾動(dòng)條的樣式改動(dòng)受到了很多瀏覽器的抵制，因此我們就放棄了,。防止表單域拖拽

鼠標(biāo)樣式cursor

設(shè)置或檢索在對(duì)象上移動(dòng)的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。

cursor :  default  小白(就是普通是鼠標(biāo)指針) | pointer  小手  | move  移動(dòng)  |  text  文本

鼠標(biāo)放我身上查看效果哦：

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移動(dòng)</li>
  <li style="cursor:text">我是文本</li>
</ul>

盡量不要用hand 因?yàn)?火狐不支持 pointer ie6以上都支持的盡量用

案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li {
 cursor: pointer; 讓我們的鼠標(biāo)樣式變成小手
/*cursor: text;  讓我們的鼠標(biāo)樣式變成選擇*/
/*cursor: default; /* 讓我們的鼠標(biāo)樣式小白*/
}
p {
width: 100px;
height: 100px;
background-color: pink;
cursor: move;  /*鼠標(biāo)變成十字架樣子*/
}
</style>
</head>
<body>
<ul>
<li>文字效果</li>
<li>文字效果</li>
<li>文字效果</li>
<li>文字效果</li>
<li>文字效果</li>
<li>文字效果</li>
</ul>
<p></p>
<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移動(dòng)</li>
  <li style="cursor:text">我是文本</li>
</ul>
</body>
</html>

輪廓 outline

是繪制于元素周?chē)囊粭l線，位于邊框邊緣的外圍，可起到突出元素的作用,。

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

但是我們都不關(guān)心可以設(shè)置多少，我們平時(shí)都是去掉的,。

最直接的寫(xiě)法是： outline: 0; 或者 outline: none;

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

案例

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input {
outline: none;  /*取消輪廓線的做法*/
border: 1px solid #ccc;
width: 200px;
height: 25px;
background: url(images/s.png) no-repeat 180px center;
}
textarea {
resize: none;  /*防止拖拽*/
outline: none;  /*取消藍(lán)色邊框*/
}
</style>
</head>
<body>
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>

防止拖拽文本域resize

resize：none 這個(gè)單詞可以防止火狐谷歌等瀏覽器隨意的拖動(dòng) 文本域。

右下角可以拖拽：

<textarea></textarea>

右下角不可以拖拽：

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

vertical-align 垂直對(duì)齊

以前我們講過(guò)讓帶有寬度的塊級(jí)元素居中對(duì)齊，是margin: 0 auto;

以前我們還講過(guò)讓文字居中對(duì)齊，是 text-align: center;

但是我們從來(lái)沒(méi)有講過(guò)有垂直居中的屬性，我們的媽媽一直很擔(dān)心我們的垂直居中怎么做,。

vertical-align 垂直對(duì)齊，這個(gè)看上去很美好的一個(gè)屬性，實(shí)際有著不可捉摸的脾氣，否則我們也不會(huì)這么晚來(lái)講解,。

vertical-align : baseline |top |middle |bottom

設(shè)置或檢索對(duì)象內(nèi)容的垂直對(duì)其方式,。

vertical-align 不影響塊級(jí)元素中的內(nèi)容對(duì)齊，它只針對(duì)于行內(nèi)元素或者行內(nèi)塊元素，特別是行內(nèi)塊元素，通常用來(lái)控制圖片/表單與文字的對(duì)齊。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-30Rf5kQy-1593737327293)(media/1498467742995.png)]

圖片,、表單和文字對(duì)齊

所以我們知道，我們可以通過(guò)vertical-align 控制圖片和文字的垂直關(guān)系了,。默認(rèn)的圖片會(huì)和文字基線對(duì)齊。

去除圖片底側(cè)空白縫隙

有個(gè)很重要特性你要記住：圖片或者表單等行內(nèi)塊元素，他的底線會(huì)和父級(jí)盒子的基線對(duì)齊,。這樣會(huì)造成一個(gè)問(wèn)題，就是圖片底側(cè)會(huì)有一個(gè)空白縫隙,。

解決的方法就是：

給img vertical-align:middle | top等等。讓圖片不要和基線對(duì)齊,。
給img 添加 display：block; 轉(zhuǎn)換為塊級(jí)元素就不會(huì)存在問(wèn)題了,。

對(duì)齊案例

不使用方法1 2，底部就會(huì)有小空白
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
/*方法一*/
vertical-align: middle;
/*方法二*/
display: block;
}
div {
border: 2px solid red;
}
</style>
</head>
<body>
<div>
<img src="images/tudou.jpg" height="252" width="448" alt=""> 
<!-- my name is 強(qiáng)哥 -->
</div>
</body>
</html>

溢出的文字隱藏

word-break:自動(dòng)換行

normal 使用瀏覽器默認(rèn)的換行規(guī)則。

break-all 允許在單詞內(nèi)換行,。

keep-all 只能在半角空格或連字符處換行,。

主要處理英文單詞

white-space

white-space設(shè)置或檢索對(duì)象內(nèi)文本顯示方式。通常我們使用于強(qiáng)制一行顯示內(nèi)容

normal : 　默認(rèn)處理方式
nowrap : 　強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br標(biāo)簽對(duì)象才換行,。

可以處理中文

text-overflow 文字溢出

text-overflow : clip | ellipsis

設(shè)置或檢索是否使用一個(gè)省略標(biāo)記（…）標(biāo)示對(duì)象內(nèi)文本的溢出

clip : 　不顯示省略標(biāo)記（…），而是簡(jiǎn)單的裁切

ellipsis : 　當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（…）

注意一定要首先強(qiáng)制一行內(nèi)顯示，再次和overflow屬性搭配使用

溢出案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
/*overflow: hidden;  溢出隱藏*/
overflow: scroll;  /*scroll 滾動(dòng)條 */
overflow: auto;  /*auto 自動(dòng)  */
}
</style>
</head>
<body>
<div>
溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
</div>
</body>
</html>

案例：溢出文字變省略號(hào)

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 30px;
}
li {
list-style: none;
width: 200px;
height: 30px;
border: 1px solid pink;
white-space: nowrap;
/*1.強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br標(biāo)簽對(duì)象才換行*/
overflow: hidden;  /* 2. 超出的部分 隱藏*/
text-overflow: ellipsis;  /* 3. 溢出的部分用省略號(hào)替代*/
line-height: 30px;
}
</style>
</head>
<body>
<ul>
<li>文字內(nèi)容文字內(nèi)容文字內(nèi)容文字內(nèi)容文字內(nèi)容</li>
<li>文字內(nèi)容文字內(nèi)容文字內(nèi)容文字內(nèi)容文字內(nèi)容</li>
<li>文字內(nèi)容文字內(nèi)容文字內(nèi)容文字內(nèi)容文字內(nèi)容</li>
<li>文字內(nèi)容文字內(nèi)容文字內(nèi)容文字內(nèi)容文字內(nèi)容</li>
<li>文字內(nèi)容文字內(nèi)容文字內(nèi)容文字內(nèi)容文字內(nèi)容</li>
</ul>
</body>
</html>