border大法無敵
1.當文字超出時,如何顯示...
white-space: nowrap; //不折行顯示
overflow: hidden; //超出隱藏
text-overflow: ellipsis; //文本超出變為省略號
2.white-space: pre //會保留輸入過程中的空格,輸入多個空格后不會只轉化為一個空格
3.如何去除checkbox和radio的默認輸入框
visibility: hidden;
4.outline: 0 清除button選中時的邊框
5.當鼠標移動上去時實現發大功能,利用transition和transform:scale(2,2)//放大2倍
6.border-collpase;//將表格變為一個單一的邊框
7.box-shadow: 5px 5px 5px #ccc;//數字分別表示x軸偏移,y軸偏移,陰影模糊度,顏色
8.background相關
background-attachment:fixed;//表示背景圖片固定在瀏覽器中的某個位置,不隨滾動條滾動
background-size:cover;//完全覆蓋背景區域
background-size:contain;//適應背景區域
9.cursor: pointer;//改變鼠標的樣式 詳見cursor
10.box-shadow: 0 0 10px 5px black inset;//前兩個表示xy軸的偏移量,當設置為0的時候四邊都有陰影,第三個值指的是陰影的模糊距離,第四個值指的是模糊尺寸,inset值陰影產生在盒子內部。
11.設置paddiing上下距離為某個值可以實現垂直居中
transform: translate(-50%,-50%);實現垂直居中(自適應)
例子: 垂直居中
12.偽元素實現垂直居中
.xxx:before {
content:''
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
.要居中的元素 {
display: inline-block;
vertical-align: center;
}
13.width和max-width的區別:
width:500px; //當瀏覽器縮小到小于500px時會出現滾動條
max-width:500px; //當瀏覽器縮小到小于500px時不會出現滾動條
14.對于inline-block的縫隙問題 先對其父元素font-size設置0,再對子元素設置font-size就可以消除間隙
15.b標簽和strong標簽的區別兩者在實現的效果上是一樣的,但是b標簽僅僅是指bold加粗沒有其他語義,而strong標簽著重表示強調,可以給strong改變樣式為下劃線來強調內容
16.font-weight: 700 相同與font-weight: bold;
17.如何實現滿屏 body,html都設置height:100%,再在需要滿屏的元素上設置100%
18.當要使用hover屬性來顯示字體圖標時,不要使用偽元素而是使用實體標簽來替代,
19.當border-radius無效時,可能是子元素的背景遮蓋了圓角,此時在父元素上加overflow:hidden可解決
20.transition屬性實現漸變效果:
1.設置初始狀態如: background-color: #FFF;
2.設置transition: background-color 0.5s ease 0.2s; //從左到右依次為要改變的屬性 幾秒后達到目標值 (ease規定慢速開始,然后變快,然后慢速結束的過渡效果) 延遲0.2s執行
3.設置目標屬性值 如 div:hover {background-color: #666}
linear 規定以相同速度開始至結束的過渡效果(等于 cubic-bezier(0,0,1,1))。
ease 規定慢速開始,然后變快,然后慢速結束的過渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 規定以慢速開始的過渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 規定以慢速結束的過渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 規定以慢速開始和結束的過渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。
21.z-index:-1;讓一個層在所有層下當背景
22.text-align和float并不沖突
23.使用opacity做透明度時,子元素也會繼承opacity,解決方法:使用rgba
24.去除h1標簽的加粗為font-weight: normal;而不是none或者0 //這兩者都無效
25.對于a標簽的默認顏色color: inherit;可以解決
26.有關rgba和opacity的區別:
前者只設置了背景色,當包含塊中有內容時,內容并不會透明,而opacity可以繼承給后代元素,后代也會透明
27.user-select: none;用戶將無法選中文字
28.loading效果
.xxx {
width: 100px;
height: 100px;
border: 20px solid green;
border-radius: 50%;
border-top: 20px solid red;
animation: 1s infinite linear round ;
}
@keyframes round {
from{
transform: rotate(0)
}
to{
transform: rotate(360deg)
}
}
29.設置flex和絕對定位四個方向都設置為0,通常用來做垂直居中的dialog
.xxx {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
30.表單的autofoucus表示自動獲取焦點
31.有關幾種請求的Method
(1) get '/users' 獲取某個用戶的數據
(2) get '/users/id' 獲取某個用戶的id
(3) post '/users' 新增數據
(4) patch/put '/users/id' 更新某個用戶的數據
(5) delete '/users' 刪某個用戶的數據
31.~的用法
w3School
32.css往復動畫 alternate
33.cc:ie用來解決ie兼容性 browserhacks
34.osi七層模型
從上到下依次是 應用層 表現層 會話層 傳輸層 網絡層 數據鏈路層 物理層