一、定位
模型和定位是密不可分的,就像買了家具,要找地方放家具一樣,要不然沒地方放,放到人家家裡面,是沒有意義的。
下面就介紹一下定位的屬性:
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下面是乙個fixed的例子 主要是瀏覽器視窗的位置可以製作懸浮廣告relative測試
我頂部距離是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試著把上述clear屬性改成both left right 看看其效果some text
其他的有時間補上
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元素,即...