慕課網老師有一個課程講解的做法是什麼原理?

說一下哈,我只是提出問題來討論,不是噴慕課老師啊,題目我更正了,大家不要噴我好嗎,題主我心靈脆弱啊(┬_┬)。希望大家可以看一下視頻,我真的覺得老師有些講的錯誤啊,我在學校學習java的時候也很喜歡挑老師的刺,但只是想弄明白而已啊,並不是故意讓老師難堪,挖苦老師啊,我根本就沒有這種資格。老師是值得尊敬的,但是老師講的和我看的資料和書籍不一樣就不是應該提出疑問嗎?在慕課里看到視頻有疑惑提出問題基本上都是一起學習的同學來解答,根本或者很少錄視頻的老師會來解答,所以就在知乎里提問了。

&<————————分割線————————————————————&>

補充問題:

好吧,看到回答在噴我,其實我本無意說慕課老師的壞話,標題「誤人子弟」實在不妥,其實只是想吸引一下注意罷了(題目已經更正,勿噴啊知友大大們),江老師其實是我很尊敬的老師,只是不解他的這種做法。例外這幾天看慕課網視頻也發現其它老師有些講解是錯的。如下面這個視頻:

absolute與fixed的相同點

老師定義「fixed與absolute的共同點「未設置偏移量時,都定位在父元素的左上角」;我做了實踐了一下,這句話是錯的(我一般有邊看視頻邊做demo的習慣)。事實上當fixed與absolute未設置偏移量時(left,top,bottom,right),都定位在其本來位置。

其實我覺得老師有時候講的不一定對,有時候老師也會失誤,我們應該辯證的去聽課。

大家噴我鞏固基礎是裝逼,其實我之前學java,想學習前端就只是在w3c過了一邊html和css後就一直看js和jq的視頻,對網頁布局純小白。

&<-------------分割線-------------------------------------------------------------------------------------------------&>

微博用戶發言信息列表製作;

今天去鞏固基礎去慕課網看教程,看到這個視頻,發現江老師講的第三種所謂高級方法雖然減少了代碼量,但是這是斷章取義。第一這樣寫結構不清晰,圖片和內容沒有div包裹,在一個小demo看不出來,但是全局布局的時候就會文檔錯亂。第二是不利於擴展,如果我以後要在圖片下添加說明文字,我是不是得在寫一個p往左溢出?還有我在這個留言框外添加內容,布局就無法更好的定義了


題主說的是實話, @賀師俊 說的也是實話,樓上一眾洗地的,你們有時間打這些字,不會花時間檢查一下嗎?

我仔細看了視頻:absolute與fixed的相同點

而且按照視頻還原了裡面的例子:http://plnkr.co/edit/kaLvCmNOQ29WyEBfpXPR?p=preview

首先,W3C文檔鎮樓:

CSS absolute and fixed positioning

Absolutely positioned elements are removed entirely from the document flow. They will overlap other content unless you make room for them. If all child elements of a container are absolutely positioned, the parent』s height will collapse to zero. Absolutely positioned elements are positioned with respect to a containing block, which is the nearest postioned ancestor. If there is no positioned ancestor, the viewport will be the containing block.

...

An essential concept when it comes to absolute positioning is the containing block: the block box that the position and dimensions of the absolutely positioned box are relative to. For static boxes and relatively positioned boxes the containing block is the nearest block-level ancestor—the parent element in other words. For absolutely positioned elements however it』s a little more complicated. In this case the containing block is the nearest positioned ancestor. By 「positioned」 I mean an element whoseposition property is set to relative, absolute or fixed—in other words, anything except normal static elements.

教學視頻中知識點:

英語過關的,到這裡基本就看出來誰對誰錯了吧?

在視頻給出的例子中,好像這是對的,如下圖,未定義left和top的藍色的absolute box1確實在黃色box父元素左上角。

但是這個很容易檢查,我們來在box1前面加一個紫色div就行了。http://plnkr.co/edit/mSHdC5ePuT0hscSZEuGm?p=preview

說好的「未設置偏移量時,都定位在父元素的左上角」呢?

等一下,還有更好玩的。我們在box前面也插一腳(為了便於區分,紫色div加紅邊)。然後我們把灰色wrapper加上position:relative,給absolute藍色box1加上left和top(2px)。。。http://plnkr.co/edit/uu0JNQdaIzFOr3xkSPWy?p=preview

唉?怎麼跑到父元素黃色box外面去了?

不理解的請回頭看開始的W3C文檔。啥?看不懂英語?學英語去。

所以,視頻有沒有講錯呢?嗯,在box1前面沒有佔位元素時,視頻講的是對的,但有佔位元素時,視頻總結的知識點就錯了。。。

一個有時對有時錯的知識點,當然就是錯的。

所以事實很簡單,這個視頻對知識點講解不全面,沒有合理的文獻引用,舉例不恰當,對初學者造成誤導。

請問,這不是誤人子弟是什麼?

我很欣賞題主的態度,學貴存疑。

反觀樓下一幫水客:

「慕課網要你錢了?逼著你,讓你看?」

「你水平不夠吧」

「任何一個能錄視頻或講課的老師都比你強」

「必須要噴你個生活不能自理!!!!」

「不管老師的水平是好是壞,他的初發點是為此行業行佈道之德。」

呵呵呵呵。


我來黑一下。

其實大部分所謂IT培訓學校的老師的水平,教基礎課程是不夠格的。

【教授基礎課程其實是要求很高的,比中級課程反而要求高。只不過因為初學者沒有分辨能力,所以比較容易濫竽充數。】

慕課網可能好一些,我好像也有視頻在上面。(第一屆cssconf的演講,不過不是面向初學者的。)不過沒有真正有能力的專業人士把關,總體上也是碰運氣的。

然而,由於大部分上培訓班/僅僅依賴看視頻的人註定不適合這行——所以也談不上「誤人子弟」——誤不誤,結果都一樣。

最可能受到影響的,是少數適格者。不過只要懂得盡信書(視頻)不如無書(視頻)的道理,最終就不會被誤。


我講過幾節課,在別的網站上。後來我把錢都退了,因為我講的別人聽不懂,而且一節課浪費太多時間了,外加我基礎不過關。所以我挺佩服那些老師的,為什麼他們可以這麼閑…

關於代碼實現的問題,我覺得無論多厲害,同一需求總有多種實現方式。不要太糾結…


首先謝邀。

其實我沒有看這個視頻,也不知道江老師介紹的是哪方面的知識。既然沒有看,本不應該來此扯蛋。我也就說說自己的看法吧。

老師就算有不對之處,我覺得較為好的方式是,通過一定的方式跟老師一起探討,並且直接指正老師的不足之處。不應該動不動就說老師誤人子弟。就算老師有錯,他的出發點不是想誤人子弟,有可能是自己的想法、習慣或編碼方式。那麼話說回來,HTML結構怎麼寫就是標準的,怎麼提供的示例代碼不是誤人子弟的。不知道題主自己是否能說出來,或者說給大家整個示例,告訴大家,這樣的HTML結構是對的,標準的,不是誤人子弟的。

另外就是,老師可能有自己的專長與優勢,也不難免會有自己不足之處。我覺得較為好的方式是直接指正老師的不足。我想老師是為樂意接受的,也會努力去糾正的。我較為喜歡的方式是,發現不對,可以當面指正,或探討。

最後說一點,老師的出發點上,介紹自己掌握的知識,可能你會認為這些對你是一文不值,甚至是誤人子弟,但我想對別的同學可能還是略有幫助的。當然,不管老師的水平是好是壞,他的初發點是為此行業行佈道之德。而做為聽眾或者學生,要做的是一起創造一個更好的學習環境,更好的一個前端凈土。

因為我也常誤人子弟,我也常被人噴。但這些能讓我上進,能讓我進步。如有不對,歡迎噴我。


position不等於static(默認值)的父元素


  • 大家都好好說話,平常心的搞技術,把論點歸結到技術上來唄;
  • 有質疑是好,不好揪住一點就亂噴人;
  • 說不會英語,要我們跑回去學英語,哦多克。。;
  • 還有噴po主的,你們找準點好嘛,咋還跟收錢沒收錢扯上關係了;
  • 大家都是文明人,不要做生活上的矮子,網路上的巨人

~~~我好像得罪了好多人,跑。。。


沒有看視頻,從題注的隻言片語上進行討(fan)論(bo)

0. 圖片和內容沒有用div包裹

圖片作為一個默認inline元素,在頁面內容上的作用很大程度上取決於分布圖片周圍的文字內容,如果你需要它獨佔一行或者滿足某些條件顯示時,完全可以將樣式作用在圖片本身。

內容一樣,如果僅僅是文章來說,將樣式作用在段落標籤(p)上或者段標籤(span)上更合適一些

div是塊級布局,它僅僅是用來劃分網頁內容的邏輯或物理區間,單獨用div包裹圖片或者某一段內容沒有任何意義

1. 擴展問題

你想多了,事實上除非工程級別的前端項目,一般來說開發中並不需要考慮所謂的擴展問題,一個圖片加說明,一個圖片不加說明,一個圖片不知道有沒有說明這是三種設計,既然是基礎課程,想來這種擴展問題並非老師考慮的。

其實說到擴展問題,文字放在圖片上算不算一種設計?文字環繞圖片算不算一種設計?標題和說明放在圖片上默認顯示標題,當滑鼠放上去時彈出說明,這又算不算一種設計?圖片作為文字的背景算不算一種設計?

那麼,你能設計一種可擴展的結構段落兼容以上所有的設計么?

3. 定位問題

http://w3.org 有詳細說明,你感受一下

其他略

The width of absolute, page or fixed positioned, non-replaced elements

  1. If left and right are auto and width is not auto, then if the direction property of the element establishing the static-position containing block is ltr set left to the static-position, otherwise set right to the static-position. Then solve for left (if "direction is rtl) or right (if direction is ltr).

The height of absolute, page or fixed positioned, non-replaced elements

  1. If top and bottom are auto and height is not auto, then set top to the static position, then solve for bottom.

(引用自:CSS Positioned Layout Module Level 3)

大意就是如果 left 和 right 都是 auto(默認值)width 不是 auto,位置由 direction 決定

如果 top 和 bottom 都是 auto(默認值)height 不是 auto,position: static 元素頂部對齊,其他(absolute、fixed、center、page)底部對齊

這就造成了你認為元素並沒有飄到左上角而是在其本來位置的錯覺

(這句話很有問題啊,本來位置是什麼位置?position: static 時候的位置么?)

事實上定位在父元素左上或右上角取決於元素的direction(CSS Writing Modes Level 3)屬性,而absolute、fixed 等在無方向屬性限制時是bottom: 0的。

所以說,老師講的很籠統,並且不完善

*** ***

題主的想法與做法這裡是非常贊同的,因為我們不能完全相信權威,事實上在不同的環境下,各種外部條件約束下(例如deadline(╯‵□′)╯︵┻━┻),有些解決方案是單一而且無奈的,這裡最希望的是,題主在問出問題時,能夠親手實踐,並模擬相關環境(雖然可能比較困難)

以上


實際項目做的多了,總會有人自以為很厲害。

完成工作任務或者做了點小創新就叫厲害么?

我覺得做技術的核心競爭力實際並不是成為一個寂寞高手,而是看你的存在和努力影響了多少人,幫助了多少人。

所以我想說請看慕課網視頻的朋友,能不能與講師一道為了幫助更多人努力。

如果你覺得人家講錯了,請懷有一顆同理心,給他善意的提醒,多給他一些正能量。如果實在覺得別人講的完全不好,就自己講一套,同時也思考下如何才能得到更多人的認同。


題主的疑惑:absoulte是跟隨文檔流的。

CSS深入理解之absolute_技術學習教程 同樣是慕課,這裡講的很清楚。

聽不下去那個聲音可以。。轉戰博客 CSS 相對|絕對(relative/absolute)定位系列(一) ? 張鑫旭

鑫旭老師在重構方面真的好厲害= =

慕課網視頻參差不齊。真心的。我看了算是有一段時間了。我也是初學者。

老師也有很多很坑的。至於是不是他們說的那種,我反而是覺得,既然沒搞清楚,就不要誤人子弟是對的,但是偶爾的失誤,也應該諒解,不必抓著不放。


那位老師的思路確實暫時用不上(太費腦也需要能力),後面課程里的老師也是大面積的用div,所以我一直也沒在意這個。但是誤人子弟確實說過了,條條大路通羅馬,老師在課程里也確實實現了效果,難道必須要唯一的標準嗎?


我剛才去聽了,江老師的意思應該是看你的網站代碼怎麼去維護了。樓主說誤人子弟有點兒唬人了。


我沒看過你說的視頻,就像樓上大漠老師所說,如果老師真的有錯,你直接指出來就是了,我想老師也是願意傾聽並且修改的,但是樓主用上誤人子弟這種詞語,還在知乎來專門發帖說某某老師誤人子弟。

樓主說自己在鞏固基礎,我看了下標題,網頁簡單布局啥啥啥的,鞏固你妹啊,入門就入門吧,還鞏固,估計你連老師百分之一的實力都不到。

不匿名,就罵你了。


樓主,看樓上這麼多人噴你,我也不說什麼了。

我也不是來噴你的,我是來替所有教育工作者討個說法的。

任何一個能錄視頻或講課的老師都比你強,至少他們可以站在講台 ,或者是太錄音室給大家錄製課程。如果你不喜歡某個老師的課程或某個課程,可以不去聽,何必說「誤人子弟呢?」再說了,老師也是凡人,凡有就會有錯,這不很正常的事兒嗎?有問題可以指出來啊,積極的改正啊。沒有任何一個平台,任何一個人是完美的。

你可以去仔細看看老師的錄課時間,很多人都是大晚上熬夜錄製課程,他們也有工作,也有生活、家庭,為了給大家分享一些東西,需要經常熬夜。有時候為了研究新的東西,會熬夜到很晚,這些背後的辛酸你知道多少?就在這兒指指點點,可能江老師的課對你來說沒用,但對於一部分入門者來說,可能就是點亮未來的一盞燈。

另外,每個人寫代碼的方法,都不一樣,老師只是把當時認為可能是最好的東西,教給你了。你應該珍惜別人的勞動成果,視頻這個東西是跟不上時代的,我可能上個月錄製的視頻,這個月這個東西就被淘汰了,或者有更好的方法了(只是個舉例),就算是面授課程,都需要經常的更新課程,以追上時代。而視頻這個東西,錄製好了以後,可能有些人2年以後才會看到。這也是很正常的事兒。

最後要告訴你的是,能上的了檯面的老師,背後都會做很多的努力,這些努力全是為了給信任他的學生們一個更好的解決方法。也希望你能理解老師們所付出的努力。我們受到過質疑, 受到過辱罵,但我們依然堅持著在教育的這條路上走,就算你是學java的,不也是老師帶的嗎?就算你是自學,那也是別人分享的東西啊,那也是從別人那裡學到的啊。所以,希望您老人家多理解現在還在堅持的教育工作者吧。那些背後的辛酸,可能你永遠不會懂。

以上 Busy 2015-8-25


看完了,只想說,100個人有100中寫法,老師教的只是一種思路!當你剛入門,不知道其他的做法的時候,老師教你一種思路,可以這樣寫,也可以那樣,拓寬思路不是很好嘛!說誤人子弟是有點過分了!


存疑是對的,可以在當前課程下面發表評論的,一般都會給你回復,可以共同進步,不過重錄視頻的可能性不大;

另外有些老師的水平確實一般.拿一些錯誤的理念影響了一批批的新手;

舉個印象深刻點的:當年在看某個js視頻的時候,講到addEventListener,老師一邊講一邊強調了好幾次第三個參數是個垃圾參數,我都要服了,不是你的業務上用不上的就叫垃圾好嗎..


這個問題都已經驚動賀老師了。。。在個人看來慕客真的是做的不錯,至少我就對慕客長懷感恩。我覺得這種開源的分享式的教學才是真正推動科學技術前進的永動機。每個人都有機會學習了解計算機科學不是更有利於祖國的發展嗎?一直表示不服印度的技術都比我們的好


我提出這個問題是想和大家討論問題,並不是黑慕課,更不是黑慕課老師啊,為什麼大家總是抓著「誤人子弟」不放呢?請大家看一下視頻,自己動手操作一下,你就會發現老師確實是講錯了,感謝 @Shaopeng的回答,因為只有他是看了視頻動手實踐做了分析。另外我想補充。事實上當fixed與absolute未設置偏移量時(left,top,bottom,right),都定位在其本來位置。老師舉例把box1進行absolute定位,box1原來的位置就是父元素的左上角。還有不僅我發現這錯誤,其它慕課小夥伴也發現錯。

1.我沒有黑慕課和老師,我其實發問題是一開始想討論江老師那個視頻的做法是什麼原理的。2是想說我們在網上看學習視頻的時候,要辯證的去看,當發現不對的時候要自己去實踐研究。畢竟越是基礎的東西對人越是重要,如果這個錯誤我不知道是錯的,認為是正確的,當你布局的時候發現總是不能達到自己滿意的效果卻怎麼也找不到原因,因為你最基本的概念都錯了。


我怎麼覺得樓主是來宣傳幕客的。不過這個網站確實還闊以。


我覺得這就是取捨問題,如果你個的網站代碼維護的少,就用第三種,經常維護,就用第一種的方法。不能說是江老師講得有問題。


昨天剛看完這一課,說說我的理解吧。我覺得江老師的意思是減少不必要的div,因為確實有一些div本來沒有必要存在,卻為了樣式(布局)加上。其實我個人的習慣也是一堆div,導致以後想修改的時候嵌套的根本不不想看。當然第二個視頻關於電話的,我就覺得江老師有些腦洞大開了,我還是會用絕對定位來做。


推薦閱讀:

如何通俗易懂地向初學者通解釋 jQuery、CSS3 和 HTML5 的關係?
請教下 autoprefixer 和 cssnext 分別有什麼用處?有什麼區別?
CSS3 的動畫的意義何在?
如何解決前端的flex流動布局中的單個子元素位置?
如何通過html和css完成下拉菜單的製作?

TAG:前端開發 | CSS | CSS3 | 前端工程師 | CSS布局 |