寫在前面：參考嗶哩嗶哩黑馬程式員pink老師教程
地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26

目錄

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 超出自動顯示滾動條，不超出不顯示滾動條

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

屬性值	描述
visible	不剪切內容也不添加滾動條
hidden	不顯示超過物件尺寸的內容，超出的部分隱藏掉
scroll	不管超出內容否，總是顯示滾動條
auto	超出自動顯示滾動條，不超出不顯示滾動條

顯示與隱藏總結

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

屬性	區別	用途
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>

屬性值	描述
default	小白默認
pointer	小手
move	移動
text	文本
not-allowed	禁止

輪廓線 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
輪廓線 表單默認outline outline 輪廓線，我們一般直接去掉，border是邊框，我們會經常用
防止拖拽主要針對文本域resize 防止用戶隨意拖拽文本域，造成頁面布局混亂，我們resize:none

屬性	用途	用途
滑鼠樣式	更改滑鼠樣式cursor	樣式很多，重點記住 pointer
輪廓線	表單默認outline	outline 輪廓線，我們一般直接去掉，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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/140386.html

標籤：其他

上一篇：那些常用卻又常忘記的css樣式

下一篇：arduino，w5100，樂聯網

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

CSS高級技巧

元素的顯示與隱藏

display 顯示（重點）

visibility 可見性 (了解)

overflow 溢位(重點)

顯示與隱藏總結

CSS用戶界面樣式

滑鼠樣式cursor

輪廓線 outline

防止拖拽文本域resize

用戶界面樣式總結

vertical-align 垂直對齊

圖片、表單和文字對齊

去除圖片底側空白縫隙

溢位的文字省略號顯示

white-space

text-overflow 文字溢位

總結三步曲

CSS精靈技術（sprite) 重點

為什么需要精靈技術

精靈技術講解

精靈技術使用的核心總結

滑動門

滑動門出現的背景

核心技術

拓展

margin負值之美

CSS三角形之美