內聯元素裡面有個特殊的存在:
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注意 該方式設定,當...