css高階技巧

一  元素的顯示與隱藏

1）display實現

display:none;  //隱藏元素

display:block; //顯示元素
display:block; 不光有轉換塊元素的功能，還有顯示的功能
特點：隱藏元素 不保留位置

visibility  [ˌvɪzəˈbɪləti] 可見性

visible [ˈvɪzəbl] adj.看得見的;可見的;明顯的;能注意到的
visibility: hidden; 
//1 隱藏
visibility: visible; //
2 顯示
特點：隱藏元素 保留位置

4）三種溢位總結

5）小案例練手

"

outline: none|0
" type="
text
"/> //
去除輪廓線

resize: none" rows="5" cols="5">

三 垂直居中 vertical-algin

塊元素水平居中：margin: 0 auto;

文字水平居中：text-algin: center;
行內元素和行內塊元素垂直居中 vertical-align: middle [ 對塊元素不起作用 ]
引數值
baseline  //

1 基線對齊 [ 預設值 ]
top //
2 頂線對齊
middle //
3 中線對齊
bottom //
4 底線對齊
四 溢位文字省略號

white-space

normal 一行顯示不開的時候，自動換行[ 預設 ]
pre 用等寬字型顯示預先格式化的文字。
nowrap 強制在一行顯示文字 直到文字結束 或 遇到 br 才換行
三部曲 

//1 先強制在一行內顯示文字

white-space: nowrap;
//2 超出部分隱藏
overflow: hidden
//3 文字用省略號替代超出的部分
text-overflow: ellipsis;
**實現

"en

">class="
box">你好 世界，我將保持初心，保持善良
五 精靈技術[ 重要 ]

網頁中的 x軸向右   向左是負值
網頁中的y軸向下  向上是負值
六  滑動門
七  負值的應用
1）margin負值 + 定位  實現定位盒子垂直 或 水平居中
2）壓住盒子相鄰邊框

原理：

1 所有的盒子必須有浮動屬性,因為浮動的盒子是緊貼在一起的
2 第乙個盒子向左移動-1畫素後，後面的盒子因為有浮動屬性，趕緊貼了過了
3 後面的盒子又執行了向左-1px，所有才能壓住左邊盒子的右邊框
2）滑鼠滑過顯示乙個有顏色的邊框

"en

">
都是浮動的盒子，我們給想突出顯示的盒子新增定位，它的層級就比浮動的高

都是有定位的盒子，我們給想突出顯示的盒子設定 z軸數值   z-index
八 三角
p 

京東三角

"en

">
 
CSS高階技巧
1.滑鼠樣式cursor 設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動 text 文字 2.溢位的文字隱藏 word break 自動換行 white space設定或檢索物件內文字顯示方式。通常我們使用於強制...
CSS高階技巧
所謂的介面樣式，就是更改一些使用者操作樣式，比如 更改使用者的滑鼠樣式，表單輪廓.防止表單域拖拽等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制。設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動 text 文字 ...
CSS高階技巧
在css中有三個顯示和隱藏的單詞比較常見，我們要區分開，他們分別是 display visibility 和 overflow。他們的主要目的是讓乙個元素在頁面中消失，但是不在文件原始碼中刪除。display 顯示 display 設定或檢索物件是否及如何顯示。display none 隱藏物件 與...