元素的轉換及定位

2021-10-04 12:21:04 字數 1423 閱讀 3284

元素型別的轉換:

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...