html css零碎收集...

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

偽元素偽類大全
flex布局

34.osi七層模型
從上到下依次是 應用層 表現層 會話層 傳輸層 網絡層 數據鏈路層 物理層

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,923評論 6 535
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,740評論 3 420
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,856評論 0 380
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,175評論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,931評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,321評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,383評論 3 443
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,533評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,082評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,891評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,067評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,618評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,319評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,732評論 0 27
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,987評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,794評論 3 394
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,076評論 2 375

推薦閱讀更多精彩內容

  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,784評論 0 2
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,326評論 0 11
  • W3C標準中對css3的transition這是樣描述的:“css的transition允許css的屬性值在一定的...
    青春前行閱讀 1,425評論 0 5
  • 其實我一早就想討論關于敏感孩子的教育問題,但我一直想等我遇見的這個女孩情況有所好轉。現在我終于可以寫寫這個話題了。...
    阿寶的育兒寶典閱讀 362評論 1 4
  • 朝花夕拾(2) 我小時候的生話確定不能和現在的小孩子相比,能夠用于吃喝玩樂的東西很匱乏。 先說吃,印象最深的一種零...
    思緣閱讀 237評論 0 0