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

为了方便方便观看！在第一个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. 希尔排序（Shell's Sort）的C语言实现

    原创文章,转载请注明来自钢铁侠Mac博客http://www.cnblogs.com/gangtiexia 希尔排序(Shell's Sort)又称“缩小增量排序”(Diminishing Incre ...

  2. Codeforces 301_div.2_Ice Cave（BFS走冰块）

    Ice Cave Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Descripti ...

  3. 在centos集成服务器上安装imap扩展

    yum install libc-client-devel.x86_64(如果不行就yum install libc-client-devel)ln -s /usr/lib64/libc-client ...

  4. C语言学习笔记--类型定义&联合

    一.类型定义 C语言自定义数据类型 (typedef) C语言提供一个叫做typedef的功能来声明一个已有的数据类型的新名字. typedef int Length; 使得Length成为int类型 ...

  5. IOS笔记 1

    < ![CDATA[ 笔记 UIWindows 与UIView的关系iOS的坐标系统视图层次结构视图坐标(Frame和Bounds区别)UIView的常用属性和方法坐标系统的变换UIView内容 ...

  6. Java进阶代码

    本文重在温习……不过初学以及进阶高手不可错过 1.  public static void arraycopy(全小写)(object src,int srcPos,object dest,int d ...

  7. Word中封面的问题

    老师给了封面,当从一个文档复制到另一个文档时格式变了,即便用格式刷也解决不了一些问题,那么就把正文复制到带有封面的文档,把老师的其他内容删掉.

  8. linux mount / umount 命令的基本用法

    linux mount / umount 命令的基本用法 及 开机自动挂载 格式:mount [-参数] [设备名称] [挂载点] 其中常用的参数有: -a 安装在/etc/fstab文件中类出的所有 ...

  9. SDUT2484 算术表达式的转换(表达式树)

    题目链接. 分析: 转换成表达式树,然后先序.中序.后序遍历. AC代码如下: #include <stdio.h> #include <string.h> #define m ...

  10. HBase Split

    Region Split请求是在Region MemStore Flush之后被触发的: boolean shouldCompact = region.flushcache(); // We just ...