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將h1標簽轉換為行內元素， -
代碼塊
<!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標簽轉換為行內元素</title>
<style>
.box{
width: 200px;
height: 100px;
display: inline;
background-color: red;
}
</style>
</head>
<body>
<h1 class="box">微笑是最初的信仰</h1>
</body>
</html>
-
結果圖
-
注意：如果塊級元素使用了
display: inline;，就擁有了行內元素特點，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/88325.html
標籤：Html/Css
上一篇：關于換行以及換行屬性