溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關border與display屬性怎么在css中使用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
border屬性介紹
border屬性設置元素邊框。
邊框3個要素如：粗細、線型、顏色。
邊框線型屬性值說明表如：
| 屬性指 | 描述 |
|---|---|
| none | 定義無邊框。 |
| hidden | 與 "none" 相同。不過應用于表時除外，對于表，hidden 用于解決邊框沖突。 |
| dotted | 定義點狀邊框。在大多數瀏覽器中呈現為實線。 |
| dashed | 定義虛線。在大多數瀏覽器中呈現為實線。 |
| solid | 定義實線。 |
| double | 定義雙線。雙線的寬度等于 border-width 的值。 |
| groove | 定義 3D 凹槽邊框。其效果取決于 border-color 的值。 |
| ridge | 定義 3D 壟狀邊框。其效果取決于 border-color 的值。 |
| inset | 定義 3D inset 邊框。其效果取決于 border-color 的值。 |
| outset | 定義 3D outset 邊框。其效果取決于 border-color 的值。 |
| inherit | 規定應該從父元素繼承邊框樣式。 |
邊框方向屬性值說明表如：
| 屬性 | 描述 |
|---|---|
| border-top | 設置元素上邊框。 |
| border-bottom | 設置元素下邊框。 |
| border-left | 設置元素左邊框。 |
| border-right | 設置元素右邊框。 |
邊框實踐
實踐代碼：
<!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>結果圖
注意：邊框顏色可以省略不寫，默認為黑色。如果其他2個屬性不寫就不會顯示邊框。
設置元素邊框方向實踐
代碼塊
<!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>結果圖
display屬性介紹
display屬性它是顯示的意思，display屬性可以將行內元素與塊級元素之間相互轉換，將隱藏的元素設置顯示狀態或將顯示的元素設置隱藏狀態。
display屬性值說明表如下：
| 屬性值 | 描述 |
|---|---|
| inline | 將塊級元素轉換為行內元素。 |
| block | 作用：1、將行內元素轉換為塊級元素。2、將隱藏的元素設置為顯示狀態。 |
| none | 將顯示的元素設置為隱藏狀態。 |
display屬性實踐
使用display屬性的屬性值為block將span標簽設置寬高度并且設置一個背景顏色。
代碼塊
<!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標簽轉換為塊級元素</title>
<style>
.box{
width: 200px;
height: 100px;
display: block;
background-color: red;
}
</style>
</head>
<body>
<span class="box">微笑是最初的信仰</span>
</body>
</html>結果圖
注意：如果行內元素使用了display: block;，就擁有了塊級元素特點。
使用display屬性的屬性值為inline將h2標簽轉換為行內元素。
代碼塊
<!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>將h2標簽轉換為行內元素</title>
<style>
.box{
width: 200px;
height: 100px;
display: inline;
background-color: red;
}
</style>
</head>
<body>
<h2 class="box">微笑是最初的信仰</h2>
</body>
</html>結果圖
注意：如果塊級元素使用了display: inline;，就擁有了行內元素特點。
看完上述內容，你們對border與display屬性怎么在css中使用有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
