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

返回頂部