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

为了方便方便观看！在第一个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. MLlib-协同过滤

    协同过滤 显示vs隐式反馈 参数调整 实例 教程 协同过滤 协同过滤是推荐系统的常用方法.可以填充user-item相关矩阵中的缺失值.MLlib支持基于模型的协同过滤,即使用能够预测缺失值的一个隐藏 ...

  2. Razor 语法

    Razor 语法 原文:Razor Syntax Reference作者:Taylor Mullen.Rick Anderson翻译:刘怡(AlexLEWIS)校对:何镇汐   什么是 Razor? ...

  3. 基于jsp+servlet图书管理系统之后台用户信息修改操作

    上一篇的博客写的是查询操作,且附有源码和数据库,这篇博客写的是修改操作,附有从头至尾写的代码(详细的注释)和数据库! 此次修改操作的源码和数据库:http://download.csdn.net/de ...

  4. 转：Eclipse Kepler已支持Java 8

    文章来自于:http://www.infoq.com/cn/news/2014/04/eclipse-kepler-support-java8 期待已久的Java 8已于2014年3月19日正式发布, ...

  5. 转一篇：Hyper-V和VMware的高可用实时迁移技术详解

    ESX里以集群的ha.drs.dpm功能实现 HYPER-V里以集群+共享存储实现. ~~~~~~~~~~ 微软公司的Hyper-V虚拟化管理程序一经面世就引发了业界的普遍关注.本文意在对Hyper- ...

  6. org.elasticsearch.bootstrap : JNA not found. native methods will be disabled

    在pom.xml中添加以下依赖,解决elasticsearch的WARN: <dependency> <groupId>com.sun.jna</groupId> ...

  7. Hadoop MapReduce中压缩技术的使用

    Compression and Input Splits   当我们使用压缩数据作为MapReduce的输入时,需要确认数据的压缩格式是否支持切片?   假设HDFS中有一个未经压缩的大小为1GB的文 ...

  8. HDFS基础和java api操作

    1. 概括 适合一次写入多次查询情况,不支持并发写情况 通过hadoop shell 上传的文件存放在DataNode的block中,通过linux shell只能看见block,看不见文件(HDFS ...

  9. delphi对ini文件的操作（转载 万一）

    ini 文件操作记要(1): 使用 TIniFileunit Unit1;interfaceusesWindows, Messages, SysUtils, Variants, Classes, Gr ...

  10. c31 rotc_百度百科

    c31 rotc_百度百科 c31 rotc