盒子的display屬性

2022-09-02 02:12:12 字數 398 閱讀 8655

box-1

box-2

box-3

box-4

box-5

box-6

box-7

box-8

這樣就把本來"塊"div 變成"行"了

把"行"變成"塊".

display:none是隱藏了當前行或塊

顯示的效果跟預設有差別,測試對比看看

對行內元素,需要注意如下:

•設定寬度width   無效。 

•設定高度height  無效,可以通過line-height來設定。

•設定margin 只有左右margin有效,上下無效。 

•設定padding 只有左右padding有效,上下則無效。注意元素範圍是增大了,但是對元素周圍的內容是沒影響的

CSS 12 CSS盒子的display屬性

前面依次說到盒子的float 浮動 clear 消除盒子浮動對其他的影響 position 定位 屬性,本次了解一下display屬性,這個是非常有用的乙個屬性。1 定義html部分內容,但不定義css box 1 box 2 box 3 box 4 box 5 box 6 box 7 box 8 ...

display屬性(重點)

行內元素 塊級元素 在以前的html知識中,我們已經將標籤分過類,當時分為了 文本級 容器級。從html的角度來講,標籤分為 現在,從css的角度講,css的分類和上面的很像,就p不一樣 我們可以通過display屬性將塊級元素和行內元素進行相互轉換。display即 顯示模式 一旦,給乙個塊級元素...

display屬性解析

此元素不會被顯示 此元素將顯示為塊級元素,此元素前後會帶有換行符。預設。此元素會被顯示為內聯元素,元素前後沒有換行符。行內塊元素。css2.1 新增的值 此元素會作為列表顯示。此元素會根據上下文作為塊級元素或內聯元素顯示。此元素會作為塊級 來顯示 類似 前後帶有換行符。此元素會作為內聯 來顯示 類似...