css html謝謝筆記,適合初級前端攻城獅

css html謝謝筆記,適合初級前端攻城獅

一、html部分

1.取消iPhone自動識別數字為撥打號碼

2.移動開發、響應式佈局

二、css部分

1.字母強制大寫

text-transform: uppercase;

2.解決iPhone中overflow:scroll;滑動速度慢或者卡的問題

-webkit-overflow-scrolling: touch;

3.防止複製,兼容主流瀏覽器

-moz-user-select : none;

-webkit-user-select: none;

4.固定背景圖片

background-attachment: fixed;

5.去除iphone input默認樣式

input {

-webkit-appearance:none;

}

6.設置表格的邊框合併為一個單一的邊框

border-collapse:collapse;

7.添加(顯示)IOS下滾動條

.box::-webkit-scrollbar{

-webkit-appearance: none;

width: 14px;

height: 14px;

}

.box::-webkit-scrollbar-thumb{

border-radius: 8px;

border: 3px solid #fff;

background-color: rgba(0, 0, 0, .3);

}

8.文字超出部分省略號隱藏

.box{

width: 200px;

/** 單行顯示隱藏 **/

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

/** 多行顯示隱藏 **/

word-break: break-all;

text-overflow: ellipsis;

display: -webkit-box; /** 對象作為伸縮盒子模型顯示 **/

-webkit-box-orient: vertical; /** 設置或檢索伸縮盒對象的子元素的排列方式 **/

-webkit-line-clamp: 3; /** 顯示的行數 **/

overflow: hidden; /** 隱藏超出的內容 **/

}

9.設置表格佈局(我都不知道為什麼我的筆記.txt裡面會有這個...)

table{

table-layout:fixed;

}

10.如果想鼠標移動上去時顯示被隱藏的文本內容,可以設置 

.box:hover {

text-overflow:inherit;

overflow:visible;

}

11.css實現選中checkbox,文字內容顏色變化

 


分享到:


相關文章: