很多人对盒子模型搞晕头了，下面通过一个简单的代码来分析盒子模型的结构！

为了方便方便观看！在第一个div中画了一个表格，并将其尺寸设置成与div内容大小一样！且设置body的margin和padding的属性都为0px；

本例子采用行内CSS样式！

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>盒子模型</title>

</head>

<body style="margin:0px; padding:0px;">

<div style="width:900px; height::auto">

  <div style="width:900px; height:100px; background-color:#021; color:#FFF; padding:25px; margin:25px;border: 50px solid #0CF; ">

    <table width="900px" height="100px" border="1" cellspacing="0" cellpadding="0" bordercolor="#FF0000">

      <tr >

        <td style="text-align:center; font-size:36px;">Javalittleman</td>

      </tr>

    </table>

  </div>

  <div style="width:30%; height:120px; float:left; background-color:#063; border-color:#039;"></div>

  <div style="width:70%; height:120px;float:left; background-color:#123;"></div>

  <div style="width:900px; height:120px;float:left; background-color:#111;"></div>

</div>

</body>

</html>

把标尺打开！

大家发现了什么没有？

分析如下：

显示效果：

其它设置的table是固定不变的，也就是说内容大小都不会改变的，改变的只是位置！

border：是边框，向外扩张，并可以为其添加颜色属性；

margin：是向外扩张，没有颜色属性，所以我们看到扩张后的颜色是外部的颜色，在本例子中是无色的！

padding：是向内填充的，没有颜色属性，显示的颜色是内部内容设置的颜色！

CSS中的盒子模型详解的更多相关文章

  1. css中的盒子模型

    css中的盒子模型 css中的盒子模型,有两种,一种是“标准 W3C 盒子模型”,另外一种是IE盒子模型.   1.w3c盒子模型 从图中可以看出:w3c盒子模型的范围包括了:margin,borde ...

  2. CSS学习系列1 - CSS中的盒子模型 box model

    css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距.  盒子模型有一个属性box-sizing属性来说明是否包括 ...

  3. css盒子模型详解一

    什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属 ...

  4. CSS中的盒子模型与 box-sizing 属性

    盒子模型是css中一个重要的概念,是开发网页必须要用的布局方法.盒子模型有两种,分别是标准 w3c 盒子模型和 ie 盒子模型. 标准 w3c 盒子模型:包括 magin(外边距).border(边框 ...

  5. css中的盒子模型是什么?

    什么是CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周 ...

  6. CSS中的背景用法详解

    background 属性是CSS中用于设置元素背景的属性,最简单的background属 性名,是针对背景若干设定的合并简写,最早的CSS只能使用单一背景图片,而在现在却可以设置多个背景图片.而不用 ...

  7. ie浏览器css中的行为expression详解

    CSS中的行为——expression (ie only) 最近对CSS中的行为比较感兴趣,虽然是不符合标准的也只有ie才能识别,但是他确实给css的功能扩展了不少.下面是摘自互联网上的文字和例子,因 ...

  8. css3笔记系列-3.css中的各种选择器详解，不看后悔系列

    点击上方蓝色字体,关注我 最详细的css3选择器解析 ​ 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...

  9. CSS中Position 的用法详解。

    记得一年前,到一家公司面试的时候,问我position有哪几个属性,我憋半天才回答出2个,大家估计都清楚,就是我们经常用到的2个(relative,absolute). 最近又用到了好多,深入研究了下 ...

随机推荐

  1. UVA 1594 Ducci Sequence（两极问题）

           Ducci Sequence Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu   D ...

  2. Pku1947 Rebuilding Roads

    题意是给一棵树,问最少删掉几条边.使得剩下的子树中有节点个数为m个的 设f[i][j]表示i号点所在的子树中选了j个点至少需要删去f[i][j]条边. code: #include<cstdio ...

  3. JVM笔记-temp

    jvm源码分析之堆外内存完全解读 http://lovestblog.cn/blog/2015/05/12/direct-buffer/

  4. IPv6套接字地址结构

    IPv6套接字地址结构 struct in6_addr{ unit8_t sa_addr[16]; }; #define SIN6_LEN struct sockaddr_in6{ unit8_t s ...

  5. Android Service 启动和停止服务

    activity_main.xml 定义两个Button控件,start_service和stop_service. <LinearLayout xmlns:android="http ...

  6. 使用thumbnailator 时部分图片抛异常

    net.coobird.thumbnailator.tasks.UnsupportedFormatException: No suitable ImageReader found for source ...

  7. keil中使用_at_绝对地址定位

    使用_at_关键字对存储器进行绝对地址定位程序如下: #include<reg51.h> ] _at_ 0x8000; main() { LED_Data[] = 0x23; } 在kei ...

  8. 全表扫描引发的db file sequential read

    今天我要做一个SQL调优,监控该SQL, 利用ASH 监控 该SQL是在sid=4848 上面跑的 db file sequential read等待事件有3个参数:file#,first block ...

  9. PF_NETLINK应用实例NETLINK_KOBJECT_UEVENT具体实现－－udev实现原理

    PF_NETLINK应用实例NETLINK_KOBJECT_UEVENT具体实现--udev实现原理 相对于linux来说,udev还是一个新事物.然而,尽管它03年才出现,尽管它很低调(J),但它无 ...

  10. /etc/fstab自动挂载文件系统

    打开 /etc/fstab 文件 [root@www ~]# vi /etc/fstab 默认情况下,fstab中已经有了当前的分区配置,内容可能类似: # <file system> & ...