首頁  >  文章  >  web前端  >  視覺表現理論知識介紹

視覺表現理論知識介紹

一个新手
一个新手原創
2017-10-02 19:41:321596瀏覽

終於可以知道視覺表現的實現方式,而不是一個一個的具體實現了,突然感到自己能夠把握頁面的整體佈局了呢,似乎學到了表現背後的東西?

以下是一個突然發現自己見識如此少的女漢子的嘶吼

啊啊啊,剛剛注意到width設定的是內容區的寬度,增加padding 或margin 後會增加整體寬度

啊啊啊啊,今天才知道只有內容區和左右外邊距可以設定為auto ! ! ! !

1 相關術語

  • 流: 所有元素都被放置在流中, 頁面在顯示時, 元素一個一個的流到螢幕上, 當然也有脫離流的情況。如果一個元素浮動定位,那麼它就會從流裡脫離出來

  • 非取代元素: 如段落,還是用例子比較好

  • 取代元素: 如圖片

  • #區塊級元素: 段落、標題、 p 等,流入後會產生一個換行。 使用 display: block; 可以讓元素產生區塊級框

  • 行內元素 : strong 、 span 等, 不會換行。 使用display : inline; 可以讓元素產生一個框

  • 根元素:html

2 auto

2.1 橫向:只有內容區width 以及左右外邊距可以設為auto

  • 一個auto : 會佔用所有剩餘空間

  • #兩個auto : 一般是外邊距,則內容區居中

  • 三個auto : margin 為0, 內容區會盡量佔據到最寬

2.2 縱向: 只有內容區height 以及上下外邊距可以設為auto

  • #正常流中上下外邊距設定為auto 會自動計算為0 ,而不是像橫向那樣居中

3 margin

  在padding 、 margin 、 border 中只有margin 可以設為負值,而且要注意,margin設為負值時要滿足padding + margin + border 的總和為父元素的width, 這是十分重要的。

  沒錯,這個我之前也不知道....鬼知道為嘛我會漏了這麼多重要的知識點沒學....還好現在補起來了,感謝權威指南~ ~

4 顯示角色轉換

  • 想要將清單元素當作一個橫條以豎線隔開的導覽條

  • #
    display: inline;

  再為所有清單元素加上右邊框,第一個清單元素加上左邊框即可

  • 將幾個連結放到p 中,想要佈局為垂直邊欄

    display: block;

  再增加些樣式即可顯示為漂亮的垂直導覽列

  • 在一行中想要插入一個區塊結構

    display: inline-block;

  會把外觀類似於一個垂直導航條的東西插到行中,如果沒有設定這個區塊的width ,會自適應為一行

  • run-in

    display: run-in;

#  當然,使用這個是有限制的,只有其後的一個元素為區塊級元素時,才會轉換為那個區塊級元素開始處的行內元素。

以上是視覺表現理論知識介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn