網頁設計中的水平元素

    • 2018-10-15 10:08:35
    • 閱讀次數:
    • 作者:盈嵐科技小編
    • 來源:http://www.moniquemcdaniel.com

    塊級元素的表現有時可以預測,有時則很讓人驚訝。例如,元素沿橫軸和豎軸擺放時,其處理就可能不同,為了充分了解如何處理塊級元素,必須對一些邊界和區域很清楚。

    一般地,網頁設計中一個元素的width被定義為從左內邊界到右內邊界的距離,height則是從上內邊界到下內邊界的距離。這些屬性都可以應用到元素。

    不同的寬度、高度、內邊距和外邊距相結合,就可以確定文檔的布局。在大多數情況下,文檔的高度和寬度由瀏覽器自動確定,這要基于可用的顯示區域和其他一些因素。當然在CSS網站制作中,可以更直接地控制元素的大小以及顯示方式。對于水平和垂直布局,可以選擇不同的效果,所以我們將分別介紹。

    水平格式化

    水平格式化往往比你想象得更復雜。其部分復雜性在于width影響的是內容區的寬度,而不是整個可見的元素框??紤]以下例子:

    <p style="widch: 200px;">wideness?</p>

    這行代碼使段落的內容區寬度為200像素。如果為元素指定一個背景,就能很清楚地看出。不過,如果網頁設計中還指定了內邊距、邊框或外邊距,這些都會增加到寬度值。假設指定如下:

    <p style="width: 200px; padding: 10px; margin: 20px;">wideness?</p>

    可見元素框的寬度現在是220像素,因為在內容的左邊和右邊分別增加了10像素的內邊距。外邊距則會在左右兩邊再延伸20像素,使整個元素框的寬度為260像素。

    一定要知道這樣會隱式地增加width值,理解這一點很重要。大多數用戶認為,width 是指可見元素框的寬度,如果為一個元素聲明了內邊距、邊框以及寬度,他們指定的寬度值則是左外邊界到右外邊界的距離。但在CSS中并不是這樣。一定要牢牢記住這一點,以免以后糊涂。

    注意:在寫作本書時,CSS的Box Model模塊提供了一些建議,提出了一些方法來允許創作人員決定width是指內容寬度還是可見框寬度。

    對此有一個很簡單的規則,正常流中塊級元素框的水平部分總和就等于父元素的width。假設一個div中有兩個段落,這兩個段落的外邊距設置為1em。段落的內容寬度(width 的值)再加上其左、右內邊距,邊框或外邊距,加在一起正好是div內容區的width,

    假設div的width為30em,那么各段落內容寬度、內邊距,邊框或外邊距的總和就是30em。在圖7-3中,段落外的“空白”實際上是其外邊距。如果div有內邊距,還會有更大的空白,不過這里div沒有內邊距。稍后就會討論內邊距。

    水平屬性

    網頁設計中水平格式化的“7大屬性”是:margin-left、border-left, padding-left、width、 padding-right、border-right和margin-right。這些屬性與塊級框的水平布局有關,如圖7-4所示。

    這7個屬性的值加在一起必須是元素包含塊的寬度,這往往是塊元素的父元素的width 值(因為塊級元素的父元素幾乎都是塊級元素。

    圖7-3:元素框與其父元素的width相同

    圖7-4:水平格式化的“7大屬性”

    在這7個屬性中,只有3個屬性可以設置為auto:元素內容的width,以及左、右外邊距。其余屬性必須設置為特定的值,或者默認寬度為0,圖7-5顯示了框中的哪些部分可以取值為auto,而哪些部分不能。

    圖7-5:可以設置為auto的水平屬性

    width必須設置為auto或某種類型的非負值。如果在水平格式化中確實使用了auto,會得到不同的效果。

    注意:CSS網站制作中允許瀏覽器為width設置一個最小值,塊級元素的width不能小于這個值,對于不同瀏覽器,這個最小值可能不同,因為在規范中對此沒有定義。

    當前文章標題:網頁設計中的水平元素

    當前URL:http://www.moniquemcdaniel.com/news/wzzz/Horizontal-elements.html

    上一篇:網頁設計中的基本框

    下一篇:網頁設計中的auto設置

    網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
    亚洲 欧美 中文 日韩a v一区,精品无码精品中文字幕三区,国产在线麻豆自在拍91精品,免费av在线无码不卡