龍源期刊網
div+css
布局技術中的間距處理年第期
摘要作為網頁的布局技術，
div+css
應該是現在最常用的一種。在
div+css
布局技術
中，當我們對頁面中各版塊進行布局時，經常會涉及到各盒子之間的間距處理，盒子之間的間
距設定的正確與合理性在很大程度上決定了頁面的顯示效果。
div css
盒子間距
margin padding
在div+css
布局技術中，我們一般是將網頁中的每個元素可以看成乙個盒子，對於頁面
上的版塊採用
標記進行分塊，然後利用
css樣式進行定位並設定各元素的顯示效果。在使用這種布局方式
時，就一定會涉及到各盒子之間的間距處理問題。
通常，與盒子之間的間距相關的有兩個基本的
css屬性：
margin
屬性和padding
屬性。margin
屬性用於設定盒子之間的外間距，
padding
屬性用於設定盒子邊框與裡面所放置的內容
的距離(通常稱為內填充)。
盒子之間的位置關係
在網頁布局中，盒子的位置關係通常有三種：
1.水平排列；
2.垂直排列；
3.巢狀包含。
盒子之間的間距處理
2.1水平排列的兄弟盒子
對於水平排列的兄弟盒子，它們之間的間距是由左邊盒子的右
marign
值(margin-right
右邊盒子的左
magin
margin-left
)值構成。
2.2垂直排列的兄弟盒子
對於垂直排列的兄弟盒子，它們之間的間距是由上面盒子的下
marign
值(margin-
bottom
)和下面盒子的上
magin
值(margin-top
)中值較大者所構成，而不是取二者之和。
2.3存在內外巢狀關係的父子盒子
從上圖可以看出，對於巢狀關係的父子盒子，它們之間的間距決定于父盒子的
padding
值和子盒子的
margin
值。也就是說，父子盒子之間的間距設定可能有兩種方法實現：
DIV CSS布局中position屬性詳解
本文向大家描述一下div css布局中的position屬性的用法，position屬性主要有四種屬性值，任何元素的預設position的屬性值均是static,靜態。這節課主要講講relative 相對 以及absolute 絕對 如何學習div css布局之position屬性 如果用posit...
DivCSS布局基礎 CSS中控制換行的四種屬性
在進行divcss布局時，需要對文字進行控制，我們在52css.com以前的文章中，也講過這方面的知識，今天系統的向大家介紹一下。css中控制換行的四種屬性。一 white space可以實現html中pre標籤的效果，以及單元格的nowrap效果，點此檢視示例。example source cod...
css布局 實現左中右布局的5種方式
左中右布局 左邊右邊 左元素 float left 右元素 float right 中間元素 自動填充 左邊 左邊元素 position absolute left 0 右邊元素 position absolute right 0 中間元素 position absolute left 300px ...