Dreamweaver 教程-CSS盒子模型

2022-05-05發(fā)布者：ylm大?。?/span> 下載：0

文件大小:

軟件介紹

CSS盒子模型示例代碼：

<html >
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>下載吧CSS教程盒子模型</title>
  <style type="text/css">
  <!－－
  h1, p, strong, em {
           border: 3px solid orange;
           margin: 5px;
           padding: 5px;
           width: 450px;
           line-height: 150%;
           background-color: green;
           color: white;
  }
  －－>
  </style>
  </head>
  <body>
  <h1>下載吧CSS</h1>
  <p>這是下載吧CSS教程盒子示范<strong>粗體</strong> 和 <em>斜體</em>。 CSS可以對HTML代碼的每個元素都進行格式化 </p>
  <p>版權所有，下載吧</p>
  </body>
  </html>

CSS盒子(CSS box)的構成

內容(content)、填充(padding)、邊框(border)和邊界(margin)。盒子的內容是必需的，而填充、邊框和邊界都是可選的。如果把CSS的盒子看做現實生活中的盒子，那么內容就是盒子里裝的貨物；而填充就是怕貨物損壞而添加的泡沫或者其它抗震的東西；邊框就是盒子本身了；至于邊界則說明盒子擺放的時候的不能與其他物體緊挨在一起，而必須有一段空隙。當然了，CSS中的盒子是平面的。

CSS邊框(border)

下面的例子均是在例子的基礎上進行修改。首先為box div添加邊框。代碼修改如下：

.box {
     background-color: #EEFAFF;
     width: 30%;
     float: left;
     border: 1px solid #000000;
     }

查看修改后的頁面，可以看到box的外邊多了一條1像素寬的黑色實線邊框。在border: 1px solid #000000;一句中，我們一起為border指定了三個屬性值，其實它等效與下面的CSS語句：

border-style:solid;
  border-color:#000000;
  border-width:1px;

其實CSS中還有一些屬性支持這樣的寫法，比如之前學過的font。下面讓我們來看看如何控制某一側的邊框屬性。我們?yōu)閎oxhead div添加一個1像素的虛線下側邊框，查看效果。修改的代碼如下：

.boxhead {
  font-size: 14px;
  font-weight: bold;
  background-color: #AEC6FD;
  border-bottom:1px dashed #000000;
  text-align: center;
  width: 100%;
  color: #FFFFFF;
  }

上面的例子只用到了兩種邊框，下面來看看其它幾種樣式的邊框。

<p style="border:dotted">&nbsp;</p>
  <p style="border:double"></p>
  <p style="border:groove"></p>
  <p style="border:inset"></p>
  <p style="border:outset"></p>
  <p style="border:ridge"></p>

CSS填充屬性(padding)

填充屬性定義的是內容(content)與邊框(border)的距離，下面我們來為boxhead div添加一個5像素的填充。

.boxhead {
     font-size: 14px;
     font-weight: bold;
     background-color: #AEC6FD;
     border-bottom:1px dashed #000000;
     text-align: center;
     width: 100%;
     color: #FFFFFF;
     padding:5px;
     }

看看修改之后的頁面，是不是boxhead div中的內容距離邊框有了一段距離？與邊框屬性(border)一樣，填充屬性(padding)也可以只設定某一邊。例如：padding-left、padding-bottom。

CSS邊界屬性(marging)

為了更好的理解邊界(marging)屬性，我們現在試著為網頁多添加幾個box，然后再看看網頁的外觀。你會發(fā)現box都連在了一起，也許你不喜歡這樣的布局。那么我們就為他們設置邊界屬性吧，需要修改的代碼如下：

.box {
     background-color: #EEFAFF;
     width: 30%;
     float: left;
     border: 1px solid #000000;
     margin:5px;
     }

修改之后的頁面所有的box之間都有了5個像素的間隔，這就是邊界屬性的作用。當然了，邊界屬性與其他兩個構成盒子的屬性一樣都可以單獨定義某一個方向。

CSS盒子模型實例

CSS盒子模型示意圖

CSS盒子模型實例

正常的HTML代碼顯示效果

發(fā)表評論(共0條評論)

版權聲明：

1 本站所有資源（含游戲）均是軟件作者、開發(fā)商投稿，任何涉及商業(yè)盈利目的均不得使用，否則產生的一切后果將由您自己承擔！

2 本站將不對任何資源負法律責任，所有資源請在下載后24小時內刪除。

3 若有關在線投稿、無法下載等問題，請與本站客服人員聯系。

4 如侵犯了您的版權、商標等，請立刻聯系我們并具體說明情況后，本站將盡快處理刪除，聯系QQ:2499894784

熱門軟件

最近更新