元素的顯示與隱藏

內容概覽：

css高階技巧vertical-align：垂直對齊

溢位的文字隱藏

字型圖示

元素的顯示與隱藏

顯示 display可見性 visibility溢位 overflow

css高階技巧

輪廓：outline

outline：outline-color || outline-style || outline-width；

vertical-align：baseline（基線對齊）| top | middle（居中對齊） | bottom；

去除底側空白間隙（少部分會出現此問題）

溢位的文字隱藏

word-break：自動換行

/*

主要用於處理英文單詞*/
/*瀏覽器預設換行規則 
*/word-break: normal;
/*允許單詞拆開顯示；即單詞內部換行； 
*/word-break: break-all;
/*不允許拆開單詞；連字元（my-class）特殊，可拆開換行 
*/word-break: keep-all;

/*

預設處理方式 
*/white-space: normal;
/*強制在同一行顯示所有文字，直到文字結束或者遭遇 
標籤物件才換行 
*/white-space: nowrap;

/*

不顯示省略標記（...），而是簡單的裁切 
*/text-overflow: clip;
/*當物件文字溢位時顯示省略標記（...） 
*/text-overflow: ellipsis;

/*

示例 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

精靈技術的本質

精靈技術的使用

字型圖示

字型圖示使用流程

svg格式上傳轉換為字型格式

元素的顯示與隱藏

display none 隱藏物件.display block 除了轉換層塊級元素,同時還有顯示元素的意思.特點 隱藏後不再保留位置,多用於下拉列表.visibility visible 物件可視 visibility hidden 物件隱藏 特點 隱藏後保留位置 停薪留職 屬性值 描述visibl...

元素的顯示與隱藏

配合後面js做特效，比如下拉列表，原先沒有，滑鼠經過，顯示下拉列表，應用極為廣泛 描述visible不剪下內容也不新增滾動條 hidden不顯示超過物件尺寸的內容，超出的部分隱藏掉 scroll不管超出內容否，總是顯示滾動條 auto超出自動顯示滾動條，不超出不顯示滾動條 清除浮動 隱藏超出內容，隱...

元素的隱藏與顯示

1.display 語法格式 display none 值 none隱藏物件。black顯示物件以及轉換成塊級元素 2.visibility 格式 visibility hidden visible是元素可視，hidden是元素隱藏 注意 隱藏的元素仍繼續占有原有的位置。一般display none...