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可以對(duì)HTML代碼的每個(gè)元素都進(jìn)行格式化 </p>
  <p>版權(quán)所有，下載吧</p>
  </body>
  </html>

CSS盒子(CSS box)的構(gòu)成

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

CSS邊框(border)

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

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

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

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

其實(shí)CSS中還有一些屬性支持這樣的寫(xiě)法，比如之前學(xué)過(guò)的font。下面讓我們來(lái)看看如何控制某一側(cè)的邊框?qū)傩?。我們?yōu)閎oxhead div添加一個(gè)1像素的虛線下側(cè)邊框，查看效果。修改的代碼如下：

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

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

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

填充屬性定義的是內(nèi)容(content)與邊框(border)的距離，下面我們來(lái)為boxhead div添加一個(gè)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;
     }

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

CSS邊界屬性(marging)

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

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

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

CSS盒子模型實(shí)例


image.png


CSS盒子模型示意圖

CSS盒子模型實(shí)例


 


正常的HTML代碼顯示效果


image.png

發(fā)表評(píng)論(共0條評(píng)論)
請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī)，評(píng)論內(nèi)容只代表網(wǎng)友觀點(diǎn)，發(fā)表審核后顯示！

版權(quán)聲明：

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

2 本站將不對(duì)任何資源負(fù)法律責(zé)任，所有資源請(qǐng)?jiān)谙螺d后24小時(shí)內(nèi)刪除。

3 若有關(guān)在線投稿、無(wú)法下載等問(wèn)題，請(qǐng)與本站客服人員聯(lián)系。

4 如侵犯了您的版權(quán)、商標(biāo)等，請(qǐng)立刻聯(lián)系我們并具體說(shuō)明情況后，本站將盡快處理刪除，聯(lián)系QQ:2499894784

返回頂部