關於div布局

2021-07-23 21:23:12 字數 875 閱讀 2945

div布局與定位

div是乙個萬能的盒子,而且相對以**來說較為靈活,在布局方面前天一般用div布局(因為前端要盡量美觀,符合客戶要求),後端用table布局也較為常用(簡潔明瞭)。

對於布局來說div只是乙個塊級標籤,之所以能布局是基於多個css屬性。通過css來操縱盒子的大小形狀,位置,樣式,色彩,背景等來達到相應的效果。

下面說說對於布局用到的常用css屬性。

width:寬

height:高

margin:上下左右 div與其他元素之間的間距

boder:邊框,是div內外的分界線

padding:內建邊框 即塊內的填充邊框

float:浮動

注:div預設是佔一行的,即使設定了width小於一行寬度,通過float實行將其變為乙個只佔寬高的乙個塊float相對與離他最近的元素浮動

注意:div的實際大小為:margin+boder+padding+寬高面積

定位position:定位方式

absolute:絕對定位,相對於頁面的左上角

relative:相對定位,相對於父級元素的左上角

fixed:相對於瀏覽器的左上角

在父級元素使用相對定位,在子類元素使用絕對定位就睡相對於父級元素決定left和top而不再是網頁的左上角,fixed也一樣,則會相對於瀏覽器。

即子元素使用絕對定位會以父類元素的相對定位決定left,right。如果父類元素沒有設定定位則會以網頁左上角進行定位。

在父類元素相對定位下,子類元素決定定位,且只使用用margin,則會相對於原來的位置決定margin

fixed常用作導航欄,或者廣告,以為它相對於瀏覽器定位,因此一直存在於介面上

當絕對定位出現重疊是,可通過設定z-index來決定上下疊放關係。

關於DIV布局 拒絕飄浮

a 在這篇由三部分組成的 spring 系列 的第 1 部分中,我將介紹 spring 框架。我先從框架底層模型的角度描述該框架的功能,然後將討論兩個最有趣的模組 spring 面向方面程式設計 aop 和控制反轉 ioc 容器。接著將使用幾個示例演示 ioc 容器在典型應用程式用例場景中的應用情況...

網頁布局 div

簡單的網頁布局 注釋就不寫了,看看就懂了,不懂看前面的兩個博文都有詳細講解 效果圖 網頁布局.html charset gb2312 網頁布局title rel stylesheet href style.css type text css head id first 導航div id second...

div左右布局

一 左右定寬布局 在css分別指定了左右兩列的寬度的情況下,只需要將左邊的div 向左浮動,右邊的div 向右浮動,並清除浮動,即可實現。常用的清除浮動有兩種方式 a 通過在浮動元素的父級元素上新增清除浮動的class類 clearfix 見下面的css 部分 b 通過在浮動元素後面新增乙個空元素,...