3月27日知識點梳理

2021-10-04 12:10:08 字數 2762 閱讀 1952

內聯元素裡面有個特殊的存在:

input預設的display的值為inline-block

vertical-align

讓子元素在父元素裡面左右垂直居中(記流程)

1:給父元素新增text-align:center (左右居中)

2:給當前元素新增

display:inline-block;

vertical-align:middle;

3:在當前元素後面(不要回車),新增乙個空的span

給span設定樣式:

display:inline-block;

width:0;

height:100%;

vertical-align:middle;

子元素有浮動,父元素必須保證有高度!

元素型別的轉換:

display屬性:

屬性值:

block

inline

none

大部分塊狀元素預設的display的值block,其中li預設的值 list-item (列表元素)

大部分內聯元素預設的display的值inline,其中input預設的值 inline-block(行內塊元素)

內聯元素裡面特殊的乙個:行內塊元素(內聯塊元素)

特點:1: 可以設定寬高

2:在一行內逐個顯示

3:當前元素的display的值為inlin-block 能支援vertical-align屬性

vertical-algin:; 垂直對齊。

topbottom

middle

baseline

讓乙個元素在父元素裡面左右上下居中。

1:給父元素新增text-align:center (左右居中)

2:給當前元素新增

display:inline-block;

vertical-align:middle;

3:在當前元素後面(不要回車),新增乙個空的span

給span設定樣式:

display:inline-block;

width:0;

height:100%;

vertical-align:middle;

行內塊元素:

input

img當作行內塊使用 -> 特殊的存在:擁有行內塊的特點。

img預設情況下:在瀏覽器中display值為inline

元素型別的分類:

塊狀元素、內聯元素、可變元素

元素型別的轉換:

display屬性:

屬性值:

block

inline

inline-block

none

list-item

行內塊元素:input display為inline-block

img標籤:瀏覽器預設解析的display的值inline

標籤的巢狀規則:

1:盡量讓塊狀元素作為父元素(容器)存在

2: 內聯元素的子元素盡量也是內聯元素

3: p標籤中不能出現h1 - h6

4:p標籤 h1 - h6 不能互相巢狀

預設的display的值為inline 為什麼能直接新增大小??

從另乙個角度對所有的標籤進行分類。

分為:置換元素與非置換元素

置換元素:

典型的置換元素:img\input 依賴標籤的屬性或者元素自身型別,來決定當前元素在頁面中顯示的狀態。

因為是置換元素所以能新增大小。因為置換元素在頁面顯示過程中,生成乙個框(框架),這個框能新增大小的。

非置換元素:不是置換元素的都是非置換元素。

定位:讓元素的位置放生改變。

例子:把大象放冰箱需要幾步?

第一步:把大象拿起來

第二步:確定參照物(冰箱)

第三步:確定具體的座標

班級給盧本偉調換座位?

第一步:讓他離開現在的位置(把他拿起來)

第二步:參照物:隔壁教室

第三步:座標:坐在隔壁教室的門口。

css定位需要幾步:

1: 讓元素知道自己要做位置的變動。

2:確定誰是參照物

3:指定固定的座標

定位屬性:

position屬性:設定或檢索元素定位方式。

(如果元素有了position屬性,元素就知道自己要做位置的移動了)

position的屬性值:(屬性值才是告訴元素參照物是誰)

指定座標:left\right\top\bottom

position的屬性值:

1: position:static 【靜態定位】 (預設值:新增和不設定的效果一樣的)

2: position:absolute 【絕對定位】

a: 絕對定位的參照物:

已經有定位的父元素為參照物

如果父元素都沒有定位或者沒有父元素,以整個文件為參照物。

b: 絕對定位的特點:

不佔據空間,脫離布局流

今天老師帶領我們學習新課程 元素型別的分類: 塊狀元素、內聯元素、可變元素,元素型別的轉換,讓子元素在父元素裡面左右垂直居中,行內塊元素:input display為inline-block ,置換元素與非置換元素。雖然也能聽得懂, 但是思維邏輯跟不上,案例方面還有數**算減行高減間距不太明白等等。到自己單獨作的時候,卻是有一種無從下手的感覺。也不知道能不能學會這一行,心理也是有一點擔憂。只能硬著頭皮學下去實在不行的話就留級,因為我想要改變以後的生活,不得不砥礪前行,好想線下上課主要是家裡有瑣事打擾,想要全身心投入學習中!總感覺老師講的太快了,有些跟不上,希望老師能多給些練習的時間。

3月26日知識點梳理

1 元素型別分類 塊狀元素 內聯元素 可變元素 內聯塊元素放在內聯這一類裡面 2 每類元素各自的特點 3 每個標籤屬於哪一類!4 元素型別的轉換 display屬性 block inline none css的顯示對標籤分類 塊狀元素 內聯元素 行內元素 爭議點 第三類 a 可變元素 b 行內塊元素...

3月27日 題解

基本思路就模擬整個過程,每次進行兩兩比較,贏得一分,輸了的就不管。sort其實就是快速排序,而快速排序其實就是二分的思想 穩定的話o nlogn 左右。但是仔細想想此題 每次需要更新的值,都是相鄰兩個人變化後的分數 而相鄰的分數,有些是不會改變位置的,而快速排序則是每次全部修改,必然會造成浪費。雖然...

Linux知識點梳理

使用者名稱 主機名 root hostname 使用者名稱 主機名稱 符號含義 當前使用者屬於root使用者 當前使用者屬於普通使用者 注意 對系統進行配置管理時,如要root使用者 檢視主機名稱 hostname設定主機名稱 hostname hadoop senior.com注意 該方式設定,當...