欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

border與display屬性怎么在css中使用-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關border與display屬性怎么在css中使用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據(jù)這篇文章可以有所收獲。

為范縣等地區(qū)用戶提供了全套網頁設計制作服務，及范縣網站建設行業(yè)解決方案。主營業(yè)務為網站建設、成都網站制作、范縣網站設計，以傳統(tǒng)方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

border屬性介紹

  • border屬性設置元素邊框。

  • 邊框3個要素如：粗細、線型、顏色。

邊框線型屬性值說明表如：

 
屬性指描述
none定義無邊框。
hidden與 "none" 相同。不過應用于表時除外，對于表，hidden 用于解決邊框沖突。
dotted定義點狀邊框。在大多數(shù)瀏覽器中呈現(xiàn)為實線。
dashed定義虛線。在大多數(shù)瀏覽器中呈現(xiàn)為實線。
solid定義實線。
double定義雙線。雙線的寬度等于 border-width 的值。
groove定義 3D 凹槽邊框。其效果取決于 border-color 的值。
ridge定義 3D 壟狀邊框。其效果取決于 border-color 的值。
inset定義 3D inset 邊框。其效果取決于 border-color 的值。
outset定義 3D outset 邊框。其效果取決于 border-color 的值。
inherit規(guī)定應該從父元素繼承邊框樣式。

邊框方向屬性值說明表如：

 
屬性描述
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>

結果圖

border與display屬性怎么在css中使用

注意：邊框顏色可以省略不寫，默認為黑色。如果其他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>

結果圖

border與display屬性怎么在css中使用

display屬性介紹

display屬性它是顯示的意思，display屬性可以將行內元素與塊級元素之間相互轉換，將隱藏的元素設置顯示狀態(tài)或將顯示的元素設置隱藏狀態(tài)。

display屬性值說明表如下：

 
屬性值描述
inline將塊級元素轉換為行內元素。
block作用：1、將行內元素轉換為塊級元素。2、將隱藏的元素設置為顯示狀態(tài)。
none將顯示的元素設置為隱藏狀態(tài)。

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>

結果圖

border與display屬性怎么在css中使用

注意：如果行內元素使用了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>

結果圖

border與display屬性怎么在css中使用

注意：如果塊級元素使用了display: inline;，就擁有了行內元素特點。

看完上述內容，你們對border與display屬性怎么在css中使用有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

文章標題：border與display屬性怎么在css中使用-創(chuàng)新互聯(lián)
文章鏈接：http://chinadenli.net/article4/cogjoe.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供全網營銷推廣、微信小程序、關鍵詞優(yōu)化、網站策劃、域名注冊、小程序開發(fā)

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

綿陽服務器托管