有趣的CSS盒子模型--【牛腩新闻发布系统】_html/css

有趣的CSS盒子模型--【牛腩新闻发布系统】_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:49:03

原创

1161人浏览过

前言

　　传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用css排版后，通过由css定义的大小不一的盒子和盒子嵌套来编排网页。css盒子模型是div排版的核心。

　　说白了就是以前没用css盒子模型，html中的元素就像一堆散乱的苹果；用了之后，就变成整箱整箱的苹果摞到一起。这种方式排版的网页，代码简洁，更新方便，容易兼容多种浏览器。

豆包大模型

字节跳动自主研发的一系列大型语言模型

834

查看详情

立即进入“豆包AI人工智官网入口”；

立即学习“豆包AI人工智能在线问答入口”；

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效果图

结语

　　有些貌似复杂的东西，会在我们一点一点分析和实践中，变的生动而有趣。实践出真知，自古如此。