有趣的CSS盒子模型——【牛腩新闻发布系统】

浏览数：54 / 时间：2015年06月09日

前言

　　传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用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效果图

技术分享