【web】--有趣的CSS盒子模型

ZeroWM發表於2015-02-25
WebCSS模型


前言

　　傳統的表格排版是通過大小不一的表格和表格巢狀來定位排版網頁內容，改用css排版後，通過由css定義的大小不一的盒子和盒子巢狀來編排網頁。css盒子模型是div排版的核心。

　　說白了就是以前沒用css盒子模型，html中的元素就像一堆散亂的蘋果；用了之後，就變成整箱整箱的蘋果摞到一起。這種方式排版的網頁，程式碼簡潔，更新方便，容易相容多種瀏覽器。


    



css盒子模型元素和計算

　　通過定義一系列與盒子相關的屬性（內容content、填充padding、邊框border、邊界margin）來控制各個盒子乃至整個HTML文件的表現效果和佈局結構，每個屬性都包括上、右、下、左（順時針）。

　　下面的是一個標準盒子模型的詳圖：



　　由上圖可知：

盒子實際寬度：margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

盒子實際高度：margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom 



例項

　　下面是我做的一個小DEMO,css程式碼和firebug效果圖是對上面盒子模型計算的一個驗證。以火狐為例，Ｆ12對應的HTML下的佈局就是對盒子模型的視覺化應用。


　　DEMO.aspx程式碼

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DEMO.aspx.cs" Inherits="牛腩新聞釋出系統WM.DEMO" %>

<!DOCTYPE html>


<!---
	建立人：王美
	建立時間：2015-02-25 11:25:35
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="css/common.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="box">nice to meet you!</div>
                 
        

    </div>
    </form>
</body>
</html>


　　common.css程式碼
 

/*
    建立人：王美
    */
/*實驗1*/

.box{
   background:black;
   color:white ;
   width:100px;
   height:100px;
   padding :10px;
   border:20px solid pink;
   margin:30px;
   float:right ;
}


　　效果圖、firebug效果圖




結語

　　有些貌似複雜的東西，會在我們一點一點分析和實踐中，變的生動而有趣。實踐出真知，自古如此。



相關文章