淺析css中使用border屬性與display屬性的方法

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í)踐代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>邊框</title> <style> .box{ width: 200px; height: 100px; border: 1px solid red; } </style> </head> <body> <div class="box"> 微笑是最初的信仰 </div> </body> </html>
結(jié)果圖
注意:邊框顏色可以省略不寫,默認(rèn)為黑色。如果其他2個(gè)屬性不寫就不會(huì)顯示邊框。
設(shè)置元素邊框方向?qū)嵺`
代碼塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>邊框</title> <style> .box{ width: 200px; height: 100px; border-top: 2px double red; border-bottom: 2px ridge lawngreen; border-left: 2px inset darkorange ; border-right:2px groove darkblue; } </style> </head> <body> <div class="box"> 微笑是最初的信仰 </div> </body> </html>
結(jié)果圖
display屬性介紹
display
屬性它是顯示的意思,display
屬性可以將行內(nèi)元素與塊級元素之間相互轉(zhuǎn)換,將隱藏的元素設(shè)置顯示狀態(tài)或?qū)@示的元素設(shè)置隱藏狀態(tài)。
display
屬性值說明表如下:
屬性值 | 描述 |
---|---|
inline | 將塊級元素轉(zhuǎn)換為行內(nèi)元素。 |
block | 作用:1、將行內(nèi)元素轉(zhuǎn)換為塊級元素。2、將隱藏的元素設(shè)置為顯示狀態(tài)。 |
none | 將顯示的元素設(shè)置為隱藏狀態(tài)。 |
display屬性實(shí)踐
使用display
屬性的屬性值為block
將span
標(biāo)簽設(shè)置寬高度并且設(shè)置一個(gè)背景顏色。
代碼塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>將span標(biāo)簽轉(zhuǎn)換為塊級元素</title> <style> .box{ width: 200px; height: 100px; display: block; background-color: red; } </style> </head> <body> <span class="box">微笑是最初的信仰</span> </body> </html>
結(jié)果圖
注意:如果行內(nèi)元素使用了display: block;
,就擁有了塊級元素特點(diǎn)。
使用display
屬性的屬性值為inline
將h1
標(biāo)簽轉(zhuǎn)換為行內(nèi)元素。
代碼塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>將h1標(biāo)簽轉(zhuǎn)換為行內(nèi)元素</title> <style> .box{ width: 200px; height: 100px; display: inline; background-color: red; } </style> </head> <body> <h1 class="box">微笑是最初的信仰</h1> </body> </html>
結(jié)果圖
注意:如果塊級元素使用了display: inline;
,就擁有了行內(nèi)元素特點(diǎn)。
總結(jié)
以上所述是小編給大家介紹的css中使用border屬性與display屬性的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
- 這篇文章主要介紹了CSS 標(biāo)簽顯示模式的相關(guān)知識,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-01
- 這篇文章主要介紹了CSS標(biāo)簽中的顯示模式,通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-01
- 這篇文章主要介紹了css display:box 新屬性的相關(guān)資料,需要的朋友可以參考下2018-06-05
- 本篇文章主要介紹了淺談CSS3中display屬性的Flex布局的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-14
- 下面小編就為大家?guī)硪黄獪\談CSS的Display屬性可能的值。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-12
- 這篇文章主要為大家詳細(xì)介紹了基于CSS屬性display:table的表格布局的使用,即CSS display屬性的table表格布局,感興趣的小伙伴們可以參考一下2016-03-25
- 這篇文章主要介紹了CSS標(biāo)簽?zāi)J絛isplay屬性,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-12