（CSS學習記錄）：CSS高階技巧

Asinmy發表於2020-09-27
CSS

目錄

CSS高階技巧

元素的顯示與隱藏

display 顯示（重點）

visibility 可見性 (瞭解)

overflow 溢位(重點)

顯示與隱藏總結

CSS使用者介面樣式

滑鼠樣式cursor

輪廓線 outline

防止拖拽文字域resize

使用者介面樣式總結

vertical-align 垂直對齊

圖片、表單和文字對齊

去除圖片底側空白縫隙

溢位的文字省略號顯示

white-space

text-overflow 文字溢位

總結三步曲

CSS精靈技術（sprite) 重點

為什麼需要精靈技術

精靈技術講解

精靈技術使用的核心總結

滑動門

滑動門出現的背景

核心技術

擴充

margin負值之美

CSS三角形之美

CSS高階技巧

元素的顯示與隱藏

  • 目的：讓一個元素在頁面中消失或者顯示出來
  • 場景：類似網站廣告，當我們點選關閉就不見了，但是我們重新重新整理頁面，會重新出現！

display 顯示（重點）

  • display 設定或檢索物件是否及如何顯示。

display: none 隱藏物件

display：block 除了轉換為塊級元素之外，同時還有顯示元素的意思。
  • 特點： 隱藏之後，不再保留位置。

  • 配合後面js做特效，比如下拉選單，原先沒有，滑鼠經過，顯示下拉選單， 應用極為廣泛

visibility 可見性 (瞭解)

  • 設定或檢索是否顯示物件。
visibility：visible ; 　物件可視
visibility：hidden; 　  物件隱藏
  • 特點： 隱藏之後，繼續保留原有位置。（停職留薪）

overflow 溢位(重點)

  • 檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。
屬性值描述
visible不剪下內容也不新增滾動條
hidden不顯示超過物件尺寸的內容，超出的部分隱藏掉
scroll不管超出內容否，總是顯示滾動條
auto超出自動顯示滾動條，不超出不顯示滾動條

  • 實際開發場景：
    • 清除浮動
    • 隱藏超出內容，隱藏掉, 不允許內容超過父盒子。

顯示與隱藏總結

屬性區別用途
display隱藏物件，不保留位置配合後面js做特效，比如下拉選單，原先沒有，滑鼠經過，顯示下拉選單， 應用極為廣泛
visibility隱藏物件，保留位置使用較少
overflow只是隱藏超出大小的部分1. 可以清除浮動 2. 保證盒子裡面的內容不會超出該盒子範圍

CSS使用者介面樣式

  • 所謂的介面樣式， 就是更改一些使用者操作樣式，以便提高更好的使用者體驗。
    • 更改使用者的滑鼠樣式 (滾動條因為相容性非常差，我們不研究)
    • 表單輪廓等。
    • 防止表單域拖拽

滑鼠樣式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>

輪廓線 outline

  • 是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
 outline : outline-color ||outline-style || outline-width
  • 但是我們都不關心可以設定多少，我們平時都是去掉的。
  • 最直接的寫法是 ： outline: 0; 或者 outline: none;
 <input  type="text"  style="outline: 0;"/>

防止拖拽文字域resize

  • 實際開發中，我們文字域右下角是不可以拖拽：
<textarea  style="resize: none;"></textarea>

使用者介面樣式總結

屬性用途用途
滑鼠樣式更改滑鼠樣式cursor樣式很多，重點記住 pointer
輪廓線表單預設outlineoutline 輪廓線，我們一般直接去掉，border是邊框，我們會經常用
防止拖拽主要針對文字域resize防止使用者隨意拖拽文字域，造成頁面佈局混亂，我們resize:none

vertical-align 垂直對齊

  • 有寬度的塊級元素居中對齊，是margin: 0 auto;
  • 讓文字居中對齊，是 text-align: center;
  • vertical-align 垂直對齊，它只針對於行內元素或者行內塊元素，

vertical-align : baseline |top |middle |bottom
  • 設定或檢索物件內容的垂直對其方式。
  • 注意：
    • vertical-align 不影響塊級元素中的內容對齊，它只針對於行內元素或者行內塊元素，
    • 特別是行內塊元素， 通常用來控制圖片/表單與文字的對齊。

圖片、表單和文字對齊

  • 可以通過vertical-align 控制圖片和文字的垂直關係了。 預設的圖片會和文字基線對齊。

去除圖片底側空白縫隙

  • 原因：
    • 圖片或者表單等行內塊元素，他的底線會和父級盒子的基線對齊。
    • 就是圖片底側會有一個空白縫隙。
  • 解決的方法就是：
    • 給img vertical-align:middle | top| bottom等等。 讓圖片不要和基線對齊。

  • 給img 新增 display：block; 轉換為塊級元素就不會存在問題了

溢位的文字省略號顯示

white-space

  • white-space設定或檢索物件內文字顯示方式。通常我們使用於強制一行顯示內容
white-space:normal ；預設處理方式

white-space:nowrap ；　強制在同一行內顯示所有文字，直到文字結束或者遭遇br標籤物件才換行。

text-overflow 文字溢位

  • 設定或檢索是否使用一個省略標記（...）標示物件內文字的溢位
text-overflow : clip ；不顯示省略標記（...），而是簡單的裁切 

text-overflow：ellipsis ； 當物件內文字溢位時顯示省略標記（...）
  • 注意：
    • 一定要首先強制一行內顯示，再次和overflow屬性 搭配使用

總結三步曲

  /*1. 先強制一行內顯示文字*/
      white-space: nowrap;
  /*2. 超出的部分隱藏*/
      overflow: hidden;
  /*3. 文字用省略號替代超出的部分*/
      text-overflow: ellipsis;

CSS精靈技術（sprite) 重點

為什麼需要精靈技術

 

  • 為了有效地減少伺服器接受和傳送請求的次數，提高頁面的載入速度。
  • 出現了CSS精靈技術（也稱CSS Sprites、CSS雪碧）。

精靈技術講解

 

  • CSS 精靈其實是將網頁中的一些背景影像整合到一張大圖中（精靈圖），然而，各個網頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖。

  • 這樣，當使用者訪問該頁面時，只需向服務傳送一次請求，網頁中的背景影像即可全部展示出來。
  • 我們需要使用CSS的
    • background-image、
    • background-repeat
    • background-position屬性進行背景定位，
  • 其中最關鍵的是使用background-position 屬性精確地定位。

精靈技術使用的核心總結

  • 首先我們知道，css精靈技術主要針對於背景圖片，插入的圖片img 是不需要這個技術的。
  • 精確測量，每個小背景圖片的大小和 位置。
  • 給盒子指定小背景圖片時， 背景定位基本都是 負值。

滑動門

滑動門出現的背景

  • 製作網頁時，為了美觀，常常需要為網頁元素設定特殊形狀的背景，比如微信導航欄，有凸起和凹下去的感覺，最大的問題是裡面的字數不一樣多，咋辦？

  • 為了使各種特殊形狀的背景能夠自適應元素中文字內容的多少，出現了CSS滑動門技術。它從新的角度構建頁面，使各種特殊形狀的背景能夠自由拉伸滑動，以適應元素內部的文字內容，可用性更強。 最常見於各種導航欄的滑動門。 http://weixin.qq.com/

核心技術

  • 核心技術就是利用CSS精靈（主要是背景位置）和 盒子padding撐開寬度, 以便能適應不同字數的導航欄。
  • 一般的經典佈局都是這樣的：
<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);
    }
  • 總結：
    • a 設定 背景左側，padding撐開合適寬度。
    • span 設定背景右側， padding撐開合適寬度 剩下由文字繼續撐開寬度。
    • 之所以a包含span就是因為 整個導航都是可以點選的。

擴充

margin負值之美

  • 負邊距+定位：水平垂直居中
    •  一個絕對定位的盒子， 利用 父級盒子的 50%， 然後 往左(上) 走 自己寬度的一半 ，可以實現盒子水平垂直居中。
  • 壓住盒子相鄰邊框

<!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>

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; 

 }
  • 一張圖， 你就知道 css 三角是怎麼來的了, 做法如下：

  • 我們用css 邊框可以模擬三角效果
  • 寬度高度為0
  • 我們4個邊框都要寫， 只保留需要的邊框顏色，其餘的不能省略，都改為 transparent 透明就好了
  • 為了照顧相容性 低版本的瀏覽器，加上 font-size: 0; line-height: 0;
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			/*我們用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;
		}
		p {
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 10px;
			border-color:  transparent transparent transparent red;
			font-size: 0;
			line-height: 0;
		}
	</style>
</head>
<body>
	<div></div>
	<p></p>
</body>
</html>
  • 案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			position: relative;
			width: 200px;
			height: 100px;
			background-color: pink;
			margin: 100px auto;
		}
		p {
			position: absolute;
			top: -40px;
			left: 50%;
			margin-left: -20px;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 20px;
			border-color: transparent transparent pink transparent;
			font-size: 0;
			line-height: 0;
		}
	</style>
</head>
<body>
	<div>
		<p></p>
	</div>
</body>
</html>

 

相關文章