css元素之間轉換

2021-10-01 14:29:23 字數 734 閱讀 3167

隱藏標籤元素,display:none;只是乙個開頭 ,後面的和這個屬性都有關係!

講解的是型別之間轉換!我們做網頁的時候,都是分塊級元素,行級元素,行塊級元素,但是它們之間是怎麼轉換的呢?

塊級元素轉換成行內元素和行內塊元素

display:inline;            將塊級元素轉化成行能元素,擁有行內元素的所有特點

display:inline-block    將塊級元素轉換成行內塊級元素,擁有行內塊元素的所有特點

display:none;             將自己隱藏

行級元素轉換成塊級元素和行內塊級元素

display:block              將行內元素轉換成塊級元素,擁有塊級元素的所有特點

display:inline-block     將行內元素轉換成行內塊元素,擁有行內塊元素的所有特點

display:none;             將自己隱藏

行內塊級元素轉換成行內元素和塊級元素

display:inline;              將行內塊級元素轉換成行內元素,擁有行內元素的所有特點,但是這裡會出現乙個類似錯誤的情況,本來的行內元素是不支援寬和高的,但是這個行內塊轉換成行內元素是支援寬和高的,同時又有行內元素的所有特點!

display:block;             將行內塊元素轉換成塊級元素,擁有塊級元素的所有特點!

display:none;              將自己隱藏

css元素型別以及型別之間的轉換

塊狀元素 內聯元素 行內元素 可變元素 注 行內塊元素歸在內聯元素這一類裡面 塊狀元素特點 1 在頁面以矩形區域顯示。2 自上而下排列,獨佔一行。3 可直接加寬高 4 一般情況下,作為其他元素或內容的容器 內聯元素特點 1 在頁面中最小單位也是矩形 2 在一行內逐個排列 3 不可以直接新增寬高,大小...

css父元素和子元素之間margin top的問題

問題 父元素的盒子包含乙個子元素盒子,給子元素盒子乙個垂直外邊距margin top,父元素的盒子也會受到子元素的margin top值的影響。原因 所有毗鄰的兩個或者多個元素的margin將會合併為乙個margin共享之。毗鄰的定義為 同級或者巢狀的盒元素,並且它們之間沒有非空內容。padding...

css元素型別的轉換

day12 1 元素型別的轉換 display屬性 display屬性 屬性值 block inline none 大部分塊狀元素預設的display的值為block,其中li預設的值 list item 列表元素 大部分內聯元素預設的display值為inline,其中input預設的值為 inl...