處理元素邊框與display

2021-10-02 08:22:44 字數 928 閱讀 4918

很多情況下,都需要給元素設定邊框,使頁面看起來層次分明更加美觀

但是,往往設定邊框又不是每條邊都需要;

.box

#bt="box"

>

<

/div>

="box"

>

<

/div>

="box"

>

<

/div>

="box" id=

"bt"

>

<

/div>

ps:行元素與塊元素

塊元素獨佔一行,但是在實際的頁面布局中這種情況是很少的

為了處理這種情況加入了display這條屬性(元素顯示方式)

display屬性設定可以達到是塊元素同行顯示的效果,

但在同行顯示的同時兩個元素之間會有一段明顯的間隔

方法一:

刪除標籤之間的空格和換行;

**可讀性差

方法二:

將父元素的字型設定為0px,

通過繼承性,也會影響自身的字型大小

同時可能導致布局混亂(em之類參考父元素字型的值無法使用)

方法三:

給父級(-6px)和自身(0px) 設定詞間距或字母間距

後續問題較小。 但是需要給每乙個元素設定。比較繁瑣

方法四:

刪除掉閉合標籤 (不推薦使用)

部分情況下,直接出現兩個元素重疊,所以不推薦使用

display 常用元素標籤含義

display 容器 專案主軸 交叉軸 容器的內容 display flex display設定為 flex 則當前標籤為容器,子元素為專案。功能 所有子元素在一行顯示。設定主軸方向 flex direction flex direction row 主軸 從左往右 flex direction r...

塊級元素 行內元素 display屬性

定義位址 定義 標題 定義列表中定義條目 定義文件中的分割槽或節 定義列表 定義列表中的專案 定義乙個框架集 建立 html 表單 定義最大的標題值描述 none 此元素不會被顯示。block 此元素將顯示為塊級元素,此元素前後會帶有換行符。inline 預設。此元素會被顯示為內聯元素,元素前後沒有...

學習筆記 html元素之display

行級元素 與其他元素在同一行上,內容文字或者的寬度不可以改變 對行級元素使用寬高是無效的 height 100px width 200px 左右邊距 margin right margin right有效 上下邊距 margin bottom margin top無效 padding left ri...