今天就跟大家聊聊有關(guān)border與display屬性怎么在css中使用,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
創(chuàng)新互聯(lián)公司長期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺(tái),與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為伊川企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè),伊川網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
border屬性介紹
border
屬性設(shè)置元素邊框。
邊框3
個(gè)要素如:粗細(xì)、線型、顏色。
邊框線型屬性值說明表如:
屬性指 | 描述 |
---|---|
none | 定義無邊框。 |
hidden | 與 "none" 相同。不過應(yīng)用于表時(shí)除外,對于表,hidden 用于解決邊框沖突。 |
dotted | 定義點(diǎn)狀邊框。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線。 |
dashed | 定義虛線。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線。 |
solid | 定義實(shí)線。 |
double | 定義雙線。雙線的寬度等于 border-width 的值。 |
groove | 定義 3D 凹槽邊框。其效果取決于 border-color 的值。 |
ridge | 定義 3D 壟狀邊框。其效果取決于 border-color 的值。 |
inset | 定義 3D inset 邊框。其效果取決于 border-color 的值。 |
outset | 定義 3D outset 邊框。其效果取決于 border-color 的值。 |
inherit | 規(guī)定應(yīng)該從父元素繼承邊框樣式。 |
邊框方向?qū)傩灾嫡f明表如:
屬性 | 描述 |
---|---|
border-top | 設(shè)置元素上邊框。 |
border-bottom | 設(shè)置元素下邊框。 |
border-left | 設(shè)置元素左邊框。 |
border-right | 設(shè)置元素右邊框。 |
邊框?qū)嵺`
實(shí)踐代碼:
邊框 微笑是最初的信仰
結(jié)果圖
注意:邊框顏色可以省略不寫,默認(rèn)為黑色。如果其他2個(gè)屬性不寫就不會(huì)顯示邊框。
設(shè)置元素邊框方向?qū)嵺`
代碼塊
邊框 微笑是最初的信仰
結(jié)果圖
display屬性介紹
display
屬性它是顯示的意思,display
屬性可以將行內(nèi)元素與塊級(jí)元素之間相互轉(zhuǎn)換,將隱藏的元素設(shè)置顯示狀態(tài)或?qū)@示的元素設(shè)置隱藏狀態(tài)。
display
屬性值說明表如下:
屬性值 | 描述 |
---|---|
inline | 將塊級(jí)元素轉(zhuǎn)換為行內(nèi)元素。 |
block | 作用:1、將行內(nèi)元素轉(zhuǎn)換為塊級(jí)元素。2、將隱藏的元素設(shè)置為顯示狀態(tài)。 |
none | 將顯示的元素設(shè)置為隱藏狀態(tài)。 |
display屬性實(shí)踐
使用display
屬性的屬性值為block
將span
標(biāo)簽設(shè)置寬高度并且設(shè)置一個(gè)背景顏色。
代碼塊
將span標(biāo)簽轉(zhuǎn)換為塊級(jí)元素 微笑是最初的信仰
結(jié)果圖
注意:如果行內(nèi)元素使用了display: block;
,就擁有了塊級(jí)元素特點(diǎn)。
使用display
屬性的屬性值為inline
將h2
標(biāo)簽轉(zhuǎn)換為行內(nèi)元素。
代碼塊
將h2標(biāo)簽轉(zhuǎn)換為行內(nèi)元素 微笑是最初的信仰
結(jié)果圖
注意:如果塊級(jí)元素使用了display: inline;
,就擁有了行內(nèi)元素特點(diǎn)。
看完上述內(nèi)容,你們對border與display屬性怎么在css中使用有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。