css超過字數顯示省略號 css超出文本省略顯示 _css超過字數顯示省略號

文章插圖

文章插圖
元素的顯示與隱藏
display — block;(轉換為塊元素&& 顯示) none(隱藏 && 不保留原來的位置) — 重要！
visibility — visible(顯示) hidden (隱藏 && 保留原來的位置 )
復習：overflow:hidden; 1.之前解決父子關系垂直嵌套的合并塌陷問題。2.清除浮動overflow — hidden 內容超出的部分隱藏(重點的) scroll(強制出現滾動條樣式) auto(根據內容多少來判斷是否出現滾動條 )
精靈技術
目的：為了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度
實現原理：只請求一張圖 –只是展示不同位置的小圖。
案例使用：
background-image 背景圖片
background-repeat 是否平鋪
background-position 背景定位
【css超過字數顯示省略號 css超出文本省略顯示】小小注意點：
1.精靈技術主要針對背景圖片，插入的img不需要這個技術
2.需要測量每個小背景圖片的大小和位置
3.給盒子指定小的背景圖片時，背景定位基本都是負值
##
字體圖標
優勢：瀏覽器支持性比較好，靈活性大；體積小，加載速度快，節省帶寬流量；減輕服務器壓力。
注意：字體圖標是字體不是圖片
使用字體圖標
1.把包包里面的font文件夾復制出來一份，放在我們項目根目錄。
2.在html文件標簽里面添加結構
3.在html文件樣式style里面聲明字體：告訴代碼和別人使用我們自己自定義的字體（一定注意路徑問題）
4.給盒子設置字體即可
追加字體圖標
原來的不能刪除，繼續使用，此時我們需要這樣做
把壓縮包里面的selection.json 從新上傳，然后，選中自己想要新的圖標，從新下載壓縮包，替換原來文件夾即可。
重新導入selection.json 生成新的字體包–》追加選擇字體 –》點擊下載 –》把之前項目中fonts刪除–》替換成新的字體包里面的fonts文件夾
css三角形
本質：還是利用了盒子的邊框
做法：
1.寬高為零
2.四個邊都要的，只保留我們需要的邊框顏色，其他的顏色透明即可。
3.為了照顧兼容問題，設置：line-height:0; font-size:0;

三角形案例：.demo {position: relative;width: 200px;height: 100px;background-color: pink;}i {position: absolute;top: 35px;left: 200px;width: 0;height: 0;border: 15px solid transparent;border-left-color: hotpink;}<div class="demo"><i></i></div>

用戶的界面樣式

 <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>?cursor:pointer;-- 記住！cursor:move;--記住！cursor:not-allowed;--記住！

輪廓線
outline: 0/ none; —– 去掉輪廓線
防止文本域拖拽
resize:none;
vertical-align 垂直對齊方式如果讓單行文本垂直居中 — 使用line-height，如果處理圖片和文本的垂直對齊方式，line-height=高不可以實現！注意：只針對行內元素和行內塊起作用。通常用于 — 圖片和文本對齊問題和去除圖片底部空白縫隙問題。去除圖片底部空白讓圖片白不要和基線對齊 — vertical-align:top middle bottom轉換為塊元素 — display:block;

div {border: 2px solid red;}img {/* 這個屬性加給圖片本身，千萬不要加給圖片的父級盒子 */vertical-align: middle;}?<div><img src="http://www.mnbkw.com/jxjc/188766/images/ldh.jpg" ></div>

單行文字溢出省略號顯示（背過!）
1.必須強制一行顯示 white-space:nowrap;
2.超出部分隱藏 overflow:hidden;
3.文字省略號代替超出的文本 text-overflow:ellipsis;
多行文本省略號顯示

overflow: hidden;/*文字省略號代替*/text-overflow: ellipsis;/* 彈性伸縮盒子模型顯示 */display: -webkit-box;/* 限制在一個塊元素顯示的文本的行數 */-webkit-line-clamp: 3;/* 設置或檢索伸縮盒對象的子元素的排列方式 */-webkit-box-orient: vertical;

margin負值運用(練習！)
前置知識點：
relative — 相對定位占位置
absolute — 絕對定位不占位置
float —- 浮動不占位置
文字環繞效果
浮動 — 壓不住下面標流的圖片和文字。
行內塊可以單獨設置寬高一排顯示
text-align:center — 給父親元素添加，可以讓子盒子(行內塊/行內元素)水平居中。
京東三角形巧妙運用

 div {/* 1.寬高為0 */width: 0;height: 0;/* 2.只保留需要的邊框顏色 */border-color: transparent transparent red transparent;/* 3.邊框是實線 */border-style: solid;/* 4.保留需要的邊框大小，剩下的為 0 */border-width: 0 0 100px 50px;}?<div> </div>