css中如何使用border屬性與display屬性

時間 2019-12-25

標籤 css 如何使用 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個屬性不寫就不會顯示邊框。html
設置元素邊框方向實踐
代碼塊瀏覽器

<!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>

結果圖ui

display屬性介紹

display屬性它是顯示的意思，display屬性能夠將行內元素與塊級元素之間相互轉換，將隱藏的元素設置顯示狀態或將顯示的元素設置隱藏狀態。
display屬性值說明表以下：

屬性值	描述
inline	將塊級元素轉換爲行內元素。
block	做用：一、將行內元素轉換爲塊級元素。二、將隱藏的元素設置爲顯示狀態。
none	將顯示的元素設置爲隱藏狀態。

display屬性實踐

使用display屬性的屬性值爲block將span標籤設置寬高度而且設置一個背景顏色。
代碼塊spa

<!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>

結果圖code

注意：若是行內元素使用了display: block;，就擁有了塊級元素特色。htm
使用display屬性的屬性值爲inline將h1標籤轉換爲行內元素。blog
代碼塊繼承

<!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>

結果圖it

注意：若是塊級元素使用了display: inline;，就擁有了行內元素特色。table

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。