CSS基礎學習筆記 第三天

2021-10-06 12:00:00 字數 3506 閱讀 8528

目錄

css第三天

一、浮動

文件流浮動特性

清除浮動

二、定位

關於定位

定位元素特性

定位元素層級

css實現垂直居中的問題

三、特徵布局例項講義

文件流,是指盒子按照 html 標籤編寫的順序依次從上到下,從左到右排列,塊元素佔一行,行內元素在一行之內從左到右排列,先寫的先排列,後寫的排在後面,每個盒子都佔據自己的位置。

1、浮動元素有左浮動(float:left)和右浮動(float:right)兩種

2、浮動的元素會向左或向右浮動,碰到父元素邊界、浮動元素、未浮動的元素才停下來

3、相鄰浮動的塊元素可以並在一行,超出父級寬度就換行

4、浮動讓行內元素或塊元素自動轉化為行內塊元素

5、浮動元素後面沒有浮動的元素會佔據浮動元素的位置,沒有浮動的元素內的文字會避開浮動的元素,形成文字饒圖的效果

6、父元素內整體浮動的元素無法撐開父元素,需要清除浮動

7、浮動元素之間沒有垂直 margin 的合併

例項**_14:

第乙個div元素

第二個div元素

第三個div元素

父級上增加屬性 overflow:hidden

在最後乙個子元素的後面加乙個空的 div,給它樣式屬性 clear:both(不推薦)

使用成熟的清浮動樣式類,clearfix

.clearfix:after,.clearfix:before

​.clearfix:after

​.clearfix

清除浮動的使用方法:

.con2 或者

例項**_15:

第乙個div元素

第二個div元素

第三個div元素

我們可以使用 css 的 position 屬性來設定元素的定位型別,postion 的設定項如下:

relative生成相對定位元素,元素所佔據的文件流的位置不變,元素本身相對文件流的位置進行偏移

例項如下:

例項**:

relative:表示生成相對定位的元素,元素本身所佔據的文件流位置不變,設定元素相對於文件流位置的偏移

absolute生成絕對定位元素,元素脫離文件流,不佔據文件流的位置,可以理解為漂浮在文件流的上方,相對於上乙個設定了相對或者絕對或者固定定位的父級元素來進行定位,如果找不到,則相對於 body 元素進行定位。

absolute:表示生成絕對定位的元素,元素脫離文件流,不佔據文件流的位置,可以理解為漂浮在文件流的上方,相對於上乙個設定了相對或者絕對或者固定定位的父級元素來進行定位,如果找不到,則相對於 body 元素進行定位。

fixed生成固定定位元素,元素脫離文件流,不佔據文件流的位置, 可以理解為漂浮在文件流的上方,相對於瀏覽器視窗進行定位。

該div元素為固定 定位元素

static預設值,沒有定位,元素出現在正常的文件流中,相當於取消定位屬性或者不設定定位屬性

inherit從父元素繼承 position 屬性的值

絕對定位和固定定位的塊元素和行內元素會自動轉化為行內塊元素

定位元素是浮動的正常的文件流之上的,可以用 z-index 屬性來設定元素的層級

第乙個div元素

第二個div元素

第三個div元素

典型定位布局

1、固定在頂部的選單

2、水平垂直居中的彈框

3、固定的側邊的工具欄

4、固定在底部的按鈕

難點: 乙個div在另乙個div中的垂直居中的設定?

(1)利用text-align 實現塊元素水平垂直居中

(2)利用padding設定,且父元素和子元素的大小一致

(3)利用position和margin進行元素水平垂直居中

(4)利用position進行元素的水平垂直居中

(5)適用於的居中

alt="英萊特it學院" //>

效果:

經過對前面知識點的鞏固和加深,我們可以使用前面學習到的知識來製作實際開發中碰到的一些典型的布局,以此來達到綜合應用知識的目的。

1、特徵布局:翻頁(所需知識點:盒模型、內聯元素)

2、特徵布局:導航條 01(所需知識點:盒模型、行內元素布局)

3、特徵布局:導航條 02(所需知識點:盒模型、浮動、定位、字型對齊)

4、特徵布局:巨幕導航(所需知識點:盒模型、浮動、定位、對齊...)

6、特徵布局:新聞列表(所需知識點:盒模型、浮動)

CSS學習第三天

定位布局 相對定位 相對於自身的位置進行偏移position需要搭配left right top bottom position relative 絕對定位 相對於有position屬性的父元素定位,如果父元素沒有position屬性就會再向上找父元素,最後一直找到body元素 position a...

LUA基礎學習第三天

物件導向 metatable mytable 將metable設定為mytable的元素,類似metatable為父類,繼承 setmetatable mytable,metatable 當表中不存在該目標key時,通過index可以在元表中進行查詢 q1 當表中存在該目標key時,不會去執行 in...

c 基礎學習第三天

對第二天所學內容深入 工具vs2005 ps 再對面向過程程式設計和物件導向程式設計進行解釋。例如 八戒吃西瓜 1 八戒.吃 西瓜 物件導向,第一位是物件 2 吃 八戒,西瓜 面向過程,第一位是函式 吃這個動作即是函式來實現的 原有 存在的一些問題 當我們建立物件後,物件就應該具有相應的屬性,而不是...