文件流:
文件流,是指盒子按照html標籤編寫的順序依次從上到下,從左到右排列。塊元素佔一行,行內元素在一行之內從左到在排列,先寫的先排列,後寫的排在後面,每個盒子都佔據自己的位置。
關於定位:
可以使用css的
position
屬性來設定元素的定位型別,
position
設定項如下:
(1)relative 生成相對定位元素,元素所佔據的文件流的位置保留,元素本身相對自身原位置進行偏移。
(2)absolute 生成絕對定位元素,元素脫離文件流,不佔據文件流的位置,可以理解為漂浮在文件流的上方,相對於上乙個設定了定位的父級元素來進行定位,如果找不到,則相對於
body
元素進行定位。
(3)fixed 生成固定定位元素,元素脫離文件流,不佔據文件流的位置,可以理解為漂浮在文件流的上方,相對於瀏覽器視窗進行定位。
(4)static 預設值,沒有定位,元素出現在正常的文件流中,相當於取消定位屬性或者不設定定位屬性。(少用)
(5)inherit 從父元素繼承
position
屬性的值。(少用)
定位元素的偏移:
定位的元素還需要用left、
right
、top
或者bottom
來設定相對於參照元素的偏移值。
**:
doctype html效果:>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>定位
title
>
<
style
type
="text/css"
>
.con
.box01,.box02
.box01
.box02
style
>
head
>
<
body
>
<
div
class
="con"
>
<
div
class
="box01"
>
div>
<
div
class
="box02"
>
div>
div>
body
>
html
>

定位元素層級:
定位元素是浮動的正常的文件流之上的,可以用z-index屬性來設定元素的層級
如:.box01
定位元素特性:
絕對定位和固定定位的塊元素和行內元素會自動轉化為行內塊元素
CSS定位布局
絕對定位 如果想為元素設定層模型中的絕對定位,需要設定position absolute 表示絕對定位 這條語句的作用將元素從文件流中拖出來,然後使用left right top bottom屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊,則相對於body元素,即...
css布局 定位
1 為什麼需要定位?某個元素可以自由的在乙個盒子內移動位置,並且壓住其他盒子 滾動視窗時,盒子固定在某個位置 2 應用 下拉列表 模態框 web應用程式的一些基本效果 3 本質 將元素徹底從文件流中移走。允許將元素放在螢幕的任意位 置,還可以將乙個元素放到另乙個元素的前面或者後面,彼此重疊。按照定位...
css 布局布局定位心得
1 區域性絕對定位。當我們在乙個預設定位方式的div內巢狀的div實用 絕對定位 absolute 的時候,它會脫離上乙個div的控制,要實現乙個巢狀div相對上乙個div的絕對定位,只需要給上乙個div的定位加上 相對定位 relative 屬性即可,一般不會影響父div的顯示效果。2 盡量使用 ...