WEB前端學習 CSS定位浮動,列表

2021-10-23 18:36:17 字數 750 閱讀 5514

1、概念:頁面上的元素,應該出現的位置。

2、分類:

普通定位

浮動定位:float,

相對定位:relative,在原地上下浮動

絕對定位:absoluate,

固定定位:fixed

3、定位詳解

1、普通劉定位

又稱文件流定位,就是頁面中元素預設的顯示方式。

2、浮動定位

解決問題:能夠讓多個塊級元素在一行中顯示。

浮動特點:

1、元素一旦浮動起來將不佔頁面空間,脫離文件流。

2、元素浮動起來後,會停靠在父元素的左邊或者右邊,或停靠在其他已經浮動元素的邊緣上。

屬性:float

取值: left:左浮動

right:右浮動

none:無浮動

1、定位屬性

position:作用規定元素的定位型別。

取值:static,靜態定位,及文件流定位。

relative,相對定位

absolute,絕對定位

fixed,固定定位

2、偏移屬性

作用:配合上面三種定位方式,實現元素位置的移動。

top:上偏移,從上向下偏移20px.

bottom:下偏移

left:左偏移

right:右偏移

3、絕對定位

特點:絕對定位的元素預設是相對於body實現位置偏移,但是,如果離他最近的祖先元素是已定位元

前端 CSS 浮動和定位

1.標準文件流 文件流指的是元素排版布局過程中,元素會預設自動從左往右,從上往下的流式排列方式。並最終窗體自上而下分成一行行,並在每行中從左至右的順序排放元素 塊級元素 獨佔一行 h1 h6 p div 列表.行內元素 不獨佔一行 span a img strong.行內元素 可以被包含在 塊級元素...

CSS 浮動 定位 學習

回顧理解塊級元素 address 位址 blockquote 塊引用 center 居中對齊塊 dir 目錄列表 div 常用塊級容器,也是css layout的主要標籤 dl 定義列表 fieldset form控制組 form 互動表單 h1 大標題 h2 副標題 h3 3級標題 h4 4級標題...

前端開發 CSS 盒子 浮動 定位

盒子模型 margin padding border content margin 外邊距 縮寫方式 分別代表 上右下 左 padding 內填充 縮寫方式 同上 補充padding的常用簡寫方式 浮動 float 在css的樣式中,是由三維空間的概念的,不僅由xy座標位置,也存在有不可見的z軸,在...