淺析css中使用border屬性與display屬性的方法
發(fā)布時(shí)間：2019-12-25 14:20:43 作者：佚名 
我要評論
我要評論這篇文章主要介紹了css中使用border屬性與display屬性的方法，本文通過實(shí)例代碼圖文的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
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)Ｊ絛isplay屬性,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-12
