https://avatars.githubusercontent.com/u/6058558

程式狂想筆記

[JavaScript] 網頁渲染的過程 (rendering pipline)

前幾天在hahow上 動畫互動網頁程式入門 (HTML/CSS/JS)
這沒有要打廣告,不過老師真的教得不錯
看到講師上到實作購物車時候
其中某一個function利用多個(json)物件組出list清單
而新增、刪除都是對物件操作,再透過function把list清單清空再繪製

!!!!這看起來有問題,講師怎麼這樣做,這項目很多時,捲軸會有問題,這一定有bug

[CSS] margin 排版問題(Collapsing margins)

http://geekplux.com/2014/03/14/collapsing_margins.html 垂直 https://read01.com/gm0eN.html css - Margin collapse on inline-block elements? - Stack Overflow http://stackoverflow.com/questions/25455932/margin-collapse-on-inline-block-elements collapsed margin http://geekplux.com/2014/03/14/collapsing_margins.html inline-block不會有影響 block只影響上下,左右不會 先記錄先

[CSS]width:auto不等於100%

最近在公司發現排版有問題,出現不該出現的捲軸 CSS原本以為是width:100%,應該調一下box-sizing :border-sizing 結果還是一樣有問題…. 後來發現auto,就不會有問題 不過當然要思考這兩個屬性差異 之後我認為width 沒設就是100% 但後來Google一下,發現我錯了,預設是auto (我也以為auto也是100%) ‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = width of containing block http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/ 身為英文苦手不知道寫什麼意思,後來有爬到中文文章 内容的寬度=‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ 如果’margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’比較大,就減小width的值,如果比較小呢,就增大width的值,使其滿足上面的表達式。 http://m.studyofnet.com/news/965.html 總結一下,上面意思就是width:auto後,寬度算法會'margin-left' + 'border-left-width' + 'padding-left' + 'padding-right' + 'border-right-width' + 'margin-right' >width,就會自動縮減width寬度;'margin-left' + 'border-left-width' + 'padding-left' + 'padding-right' + 'border-right-width' + 'margin-right' <width,就會自動增加width寬度

[JavaScript] JSONP 小實作

很久之前,有看過JSONP文章,雖然有看一下實作原理都懂,但沒有動手做實作
前幾天看到有人討論JSONP不能用POST方法去做
這就讓我非常好奇是怎麼一回事