1 元素的顯示與隱藏
1.1 display（使用較多，配合js做特效，比如下拉選單，原先沒有，滑鼠經過，顯示下拉選單，應用廣泛）
- display:none 隱藏（先隱藏元素，不保留位置）
- dispaly:block 除了轉換成塊級元素以外，還可以顯示元素，
1.2 visibility
- visibility:hidden 隱藏（先隱藏元素，保留位置）
- visibility:visible 顯示
1.3 overflow（可以清除浮動，保證盒子里面的內容不會超出盒子范圍）
- overflow:hidden 溢位隱藏，超出盒子大小部分隱藏，
- overflow:scroll 顯示滾動條 不會超出盒子大小，內容可以顯示全，總是會顯示
- overflow:auto 如果超出就顯示滾動條，如果不超出就不顯示滾動條，
2 CSS用戶界面樣式
2.1 滑鼠樣式cursor
- cursor:default 白色箭頭
- cursor:pointer 小手
- cursor:move 移動
- cursor:text 文本
- cursor:not-allowed 禁止
2.2 輪廓 outline
- outline:0 outline:none
2.3 防止拖拽文本域 resize
- resize:none
3 vertical-align 垂直居中（只針對行內元素、行內塊元素垂直居中）
- vertical-align:baseline | middle |top | bottom
3.1 圖片、表單和文字對齊
- <img src="https://www.cnblogs.com/xiaobianer/archive/2021/01/11/#" >對齊居中的文字 .img{vertical-align:middle;}
3.2 去除圖片底部空白樣式
- 默認是基線對齊，所以底部有空白縫隙，改為不是基線對齊vertical-align:bottom | top | middle
- 塊級元素對vertical-align無效，所以不會有基線對齊的問題 display:block
4 溢位的文字用省略號顯示
- 先強制一行內顯示文本white-space:nowrap 除遇到<br> white-space:nomal(文字顯示不開時，自動換行)
- 超出部分進行隱藏 overflow:hidden
- 文字溢位用省略號替代 text-overflow:ellipsis
5 CSS精靈技術（sprite）為了有效的減少服務器接收和發送請求的次數，提高頁面加載的速度，
- background-image
- background-repeat
- background-position 精確測量每個背景圖片的大小和位置 值為負值（x,y）
5.1 制作精靈圖
- 精靈圖上放的都是背景圖片，插入圖片不能往上放，
- 我們可以橫向擺放，也可以縱向擺放，但是需要留有空隙，
- 在精靈圖的最底端，留有空隙，方便再次添加精靈圖，
6 滑動門
為了使各種特殊形狀的背景能夠自適應元素中文本內容的多少，出現了CSS滑動門技術，它從新的角度構建頁面，使各種特殊形狀的背景能夠自由拉伸滑動，以適應元素內部文本內容，可用性更強，最常見用于各種導航欄的滑動門，
- 經典布局
- <a href="https://www.cnblogs.com/xiaobianer/archive/2021/01/11/#">
- <span>導航欄內容</span>
- </a>
- a設定左側背景 padding撐開合適的寬度
- span設定右邊背景 padding撐開合適的寬度 其余由文字繼續撐開寬度
- 因為整個導航欄都是鏈接，所以a要包含span，
- 因為是滑動門，左右推拉，跟文字內容多少有關系，此時需要用到文字撐開盒子，就要用到行內塊元素，
- a{display:inline-block;height}
7 拓展
7.1 margin負值之美
- 負邊距+定位：水平垂直居中 一個絕對定位的盒子，利用父級盒子的50%，然后減去自己寬度的一半，可以實作盒子的水平垂直居中，
- 突顯某個盒子
- margin-left:-1px margin-top:-1px
- div:hover{border:1px solid blue; } 變色后，會壓住盒子邊緣
- 保證盒子為定位（相對定位），才會壓住浮動和標準流，定位的盒子通過Z-index實作層級關系
7.2 CSS三角形之美
- width:0;
- height:0;
- border-top:10px solid red;
- border-right:10px solid transparent;
- border-left:10px solid transparent;
- border-bottom:10px solid transparent;
- 簡寫為：
- width:0;
- height:0;
- border-style:solid;
- border-width:10px;
- border-color:red transparent transparent transparent;
- font-size:0;
- line-height:0;
可以模擬三角形效果，只保留一個邊框，其他都改為透明色，font-size ling-height 照顧低版本瀏覽器兼容性
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/247130.html
標籤：其他