css元素定位和布局

2022-02-04 23:26:08 字數 1479 閱讀 8974

一、定位

模型和定位是密不可分的,就像買了家具,要找地方放家具一樣,要不然沒地方放,放到人家家裡面,是沒有意義的。

下面就介紹一下定位的屬性:

position  定義元素在頁面的定位方式

left           指定元素和最近乙個具有定位設定的父物件左邊的距離

right       指定元素和最近乙個具有定位設定的父物件右邊的距離

top          指定元素和最近乙個具有定位設定的父物件上邊的距離

bottom   指定元素和最近乙個具有定位設定的父物件下邊的距離  

z-index   設定元素的層疊順序,僅在position屬性為relative或者是absolute時有效

width      設定元素的框的寬 

height    設定元素的框的高

overflow內容溢位控制

clip         剪下

前六個是定位,後四個是設定區塊,或對其中內容進行控制

下面主要先說一下position的屬性absolute 、relative(相對的)、static (靜態的)、fixed(固定的)

下面是乙個absolute的例子 top和left的作用很簡單的體現出來了、

我頂部距離是100  左邊是200

下面是乙個relative的例子 主要是相對上級模型塊content的位置

我頂部距離是100  左邊是200

relative測試

下面是乙個fixed的例子 主要是瀏覽器視窗的位置可以製作懸浮廣告

我頂部距離是100  左邊是200

relative測試

fixed測試可以做懸浮廣告

其他幾個屬性暫時不說了,等有時間的話補上。。。。

二、布局

布局和定位的作用有點類似,都是將模型塊放置到乙個地方

布局的操作主要是如何安排、排列、和改變區塊的顯示位置、同時處理鄰里糾紛(設定兩個相鄰塊的間距)布局的主要屬性如下:

clear 指定元素不允許有浮動物件的邊 取值有none left right both

float 指定元素是否以及如何浮動,取值是none left right     

clip   指定元素的可視區域,區域外的部分隱藏

overflow 指定元素的內容超過指定寬度和高度時的處理方式 預設為visible(隱藏)

overflow-x超過寬度

overflow-y超過高度

display 指定元素如何顯示

visibility 指定是否顯示元素

看一下屬性就感覺很多是要用到的,在此主要是float和clare的用法,float主要是流向某個地方 clear主要是不讓某個方向流向,

candnndnnd

some text

試著把上述clear屬性改成both left right 看看其效果

其他的有時間補上

Css元素布局定位

doctype html html lang zh cn head meta charset utf 8 title css position title style type text css wrap ps,pf,pr,pa ps.pf pr.pa style head body div cla...

css 布局和定位

首先,我們說一下flow,實際上就是從html在上面開始,從上到下沿著元素流逐個顯示。對於塊元素,從上到下布局。對於塊元素中的內聯元素,從左上方流向右下方。對於內聯元素我們需要注意間距問題 1.對於併排放置的兩個內聯元素,中間外邊距不會重疊。所以最終兩個元素中間相差兩個外邊距之和。2.對於上下放置的...

CSS定位布局

絕對定位 如果想為元素設定層模型中的絕對定位,需要設定position absolute 表示絕對定位 這條語句的作用將元素從文件流中拖出來,然後使用left right top bottom屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊,則相對於body元素,即...