資訊專欄INFORMATION COLUMN
摘要：解決方法設置即可其實所有的都會出現這個問題，瀏覽器會自動給元素的結尾添加一個空白字符大小和有關解決方法可以對父元素設置再在該元素里把設置回來的設置百分比是根據父元素的寬度來的。結語坑先挖這么點，以后碰到再陸續補充
前言
水平居中簡單記錄一下工作中經常碰到的css的一些坑，歡迎隨時拍磚
該元素是position:nomal, 父元素內block子元素定寬的情況下，對子元素采用margin:0 auto 即可
該元素是position:absolute, 元素定寬width的情況下，用left:50%; margin-left:-(1/2)width 能絕對居中
父元素設置 display:flex, 父元素再設置justify-content:center 即可
該元素是inline, 那么對父元素設置text-align:center即可
父元素寬度自適應，對父元素加padding-left和padding-right即可
position:fixed 的元素居然可以用margin:0 auto的方式居中，真神奇
垂直居中該元素是position:nomal, 對父元素采用display:table-cell; vertical-align:middle;
即可
該元素是position:absolute, 元素定高height的情況下，用top:50%; margin-top:-(1/2)height 即可
父元素設置 display:flex, 父元素再設置align-item:center 即可
如果子元素是inline, 那么對父元素設置text-align:center即可
父元素高度自適應，對父元素加padding-top和padding-bottom即可
如果只簡單對文字垂直居中，只要把文字的line-height設置成和容器一樣高即可
CanvasCanvas只支持px單位，并且如果canvas的寬高用css控制，或者$(‘canvas’).css({})來控制的話，里面圖片都會變形. 只能用 $(‘canvas’)[0].width = 100 ; $(‘canvas’)[0].height = 300 ，或者在標簽上寫< canvas width=100 height=300>
Display當父元素設置了display:flex之后， 父元素會變成block級， 同時最好把子元素全部設置成block，如果子元素是inline-block或者inline,容易出問題
當父元素設置了display:table-cell之后，父元素變成inline-block級， 對子元素沒影響
Width&Heighthtml和body都可以看做一個特殊的div, 一般不會對它設置高度，只當有整屏滑動的需求時候，才會設置html height:100% , body height:100%. 不過body經常和min-width, max-width，width等屬性連用。
Background即使body設置了寬高， 對body設置background還是整屏
利用background-position:center和background-size可以做出背景圖一直居中且寬or高的自適應的效果
Css3中的background-origin：content-box 和background-repeat: repeat 一起連用會沖突
Position子元素設置成position:absolute后會脫離正常的文檔流，這時父元素的padding對子元素失效
position:absolute 是根據最近的position不為normal的父元素來定位的
positon:fixed 是根據瀏覽器視窗進行定位
Animationtransform:對元素進行變形
animation:規定元素動畫，可以設立多個關鍵幀，并且不需要事件觸發 如果做復雜的動畫，通常和transform連用
transition: 只有兩個關鍵幀的animation，即只有開始和結束. 另外，transition需要事件觸發，比如hover
其他按鈕一般都寫成 span+backgrount-image的形式，因為如設置成img,會出現用戶移動端長按可以保存的情況造成疑惑
BUGdiv下img就算height:100%還是會比div少幾px,原因是因為img是行內元素，會自動在尾部添上空白符。 解決方法：img 設置display:block即可
其實所有的display:inline-block都會出現這個問題，瀏覽器會自動給元素的結尾添加一個空白字符(大小和font-size有關). 解決方法: 可以對父元素設置font-size:0px; 再在該元素里把font-size設置回來
padding/margin 的top, bottom 設置百分比是根據父元素的寬度來的。
結語坑先挖這么點，以后碰到再陸續補充
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111334.html
摘要：前言不要再叫我切圖崽，我很生氣，這樣很不禮貌，請叫我前端工程師從方面來說，前端工程師和切圖崽的區別，并不是指寫單條技巧的高低，甚至很多工程師在一些的奇技淫巧都比不上切圖崽那切圖崽到底和工程師之間的差別是什么呢差別是年工作經驗視野，是格局，是 前言 不要再叫我切圖崽，我很生氣，這樣很不禮貌，請叫我前！端！工！程！師！ 從css方面來說，前端工程師和切圖崽的區別，并不是指寫單條css技巧的...
摘要：但是這么多模塊合并在一個文件里，全是匿名的話，系統如何區別哪個是哪個模塊呢因此，我們需要對這些模塊給不同的進行標識。 前言 高能預警，前方山路十八彎 在上一篇文章里簡單的討論了一下模塊化Js, 先來回顧一下目前模塊化的兩大規范: CommonJs 同步加載模塊規范 AMD/CMD 異步加載模塊規范 其中CMD規范的產出是國內目前十分火爆的SeaJs, 這篇文章主要是解釋幾個使用S...
摘要：但是這么多模塊合并在一個文件里，全是匿名的話，系統如何區別哪個是哪個模塊呢因此，我們需要對這些模塊給不同的進行標識。 前言 高能預警，前方山路十八彎 在上一篇文章里簡單的討論了一下模塊化Js, 先來回顧一下目前模塊化的兩大規范: CommonJs 同步加載模塊規范 AMD/CMD 異步加載模塊規范 其中CMD規范的產出是國內目前十分火爆的SeaJs, 這篇文章主要是解釋幾個使用S...
摘要：但是這么多模塊合并在一個文件里，全是匿名的話，系統如何區別哪個是哪個模塊呢因此，我們需要對這些模塊給不同的進行標識。 前言 高能預警，前方山路十八彎 在上一篇文章里簡單的討論了一下模塊化Js, 先來回顧一下目前模塊化的兩大規范: CommonJs 同步加載模塊規范 AMD/CMD 異步加載模塊規范 其中CMD規范的產出是國內目前十分火爆的SeaJs, 這篇文章主要是解釋幾個使用S...
摘要：前言梳理一下中還不太熟悉的事件綁定統一用摒棄掉之前的解綁事件統一用語法糖，支持多個事件綁定同一個函數語法糖，支持多個事件綁定不同的函數語法糖，支持多個事件綁定不同的函數可以往里傳參可以給未創建的上綁定事件只能采取事件委托的形式所以寫成這樣是 前言 梳理一下Jquery中還不太熟悉的API Jquery事件綁定統一用on(摒棄掉之前的click,bind),解綁事件統一用off 語法...
閱讀 742·2021-07-25 21:37
閱讀 3654·2019-08-30 15:55
閱讀 2572·2019-08-30 15:54
閱讀 1716·2019-08-30 15:44
閱讀 3123·2019-08-30 15:44
閱讀 859·2019-08-30 15:43
閱讀 1021·2019-08-29 15:36
閱讀 3038·2019-08-29 10:58
