元素型別的轉換:
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的值為inline 為什麼能直接新增大小??
從另乙個角度對所有的標籤進行分類。
分為:置換元素與非置換元素
置換元素:
典型的置換元素:img\input 依賴標籤的屬性或者元素自身型別,來決定當前元素在頁面中顯示的狀態。
因為是置換元素所以能新增大小。因為置換元素在頁面顯示過程中,生成乙個框(框架),這個框能新增大小的。
非置換元素:不是置換元素的都是非置換元素。
css定位 需要哪幾步
1 讓元素知道自己知道要做位置變動 position
2 確定參照物 知道在**變動
3 最後確定座標
left/rigth/top/bottom
定位 position 屬性
屬性值 static 預設狀態
absolute 絕對定位
relative 相對定位
fixed 固定
sticky 相對定位和固定
absolute 絕對定位 脫離文件流
1 如果父元素沒有設定定位 則會根據文件
2 不佔據空間
定位 內聯元素與塊元素轉換
1.內聯元素與塊元素 塊元素 明顯特徵是獨佔一行,可以設定寬高 maring和padding可以設定 內聯元素 不獨佔一行,無法設定寬高,maring和padding可以設定水平的 起於凡而非凡 起於凡而非凡 3.絕對定位與相對定位 相對定位 相對與元素自己本身來移動定位 絕對定位 距離父類 有po...
元素型別及轉換
一.元素型別 1.塊級元素 div h1 h6 p 列表 form 特點 佔父元素寬度的一整行,若是設定死寬度,那多餘的位置會用margin填充。可以設定寬高 塊級元素可以包含部分塊級元素及所有的行內元素 應用 若想子元素 塊級元素 在父元素水平居中,對子元素設定margin 0 auto。2.行內...
元素定位 Cypress 元素定位
cypress含有多種定位方式我們無需擔心因為定位導致測試失敗,cypress有獨一無二的定位策略能使你擺脫元素定位的噩夢。cypress專有選擇器 舉例 submitsubmitsubmit獲取元素方法 cy.get data cy submit click cy.get data test su...