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

为了方便方便观看！在第一个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. Expires、Last-Modified、Etag缓存控制

    当请求一个页面时,如果浏览器使用本地缓存,因此我们经常会看到一个HTTP请求为304状态.或者显示200状态,在chrome下标注是from cache,在火狐下会标注BFCache: 我们希望在服务 ...

  2. python设计模式之装饰器模式

    装饰器模式 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构.这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装. 这种模式创建了一个装饰 ...

  3. putty登录远程数据库Oracle

    ssh username@127.0.0.1 password oracle -su plusql /nolog dbname/dbpassword sql:exit oracle:$exit ssh ...

  4. Swift互用性：与 Cocoa 数据类型共舞（Swift 2.0版）-b

    本节内容包括: 字符串(Strings) 数值(Numbers) 集合类(Collection Classes) 错误(Errors) Foundation数据类型(Foundation Data T ...

  5. spring 日志

    spring日志结构

  6. UOJ 52 元旦激光炮

    http://uoj.ac/problem/52 题意:每次可以得到3个序列中 思路:每次分别取出三个序列的K/3长度的位置,取最小的那个,然后每次减掉它,总复杂度是Nlog3N #include & ...

  7. Keil C51总线外设操作问题的深入分析

    阅读了<单片机与嵌入式系统应用>2005年第10期杂志<经验交流>栏目的一篇文章<Keil C51对同一端口的连续读取方法>(原文)后,笔者认为该文并未就此问题进行 ...

  8. <<开源硬件创客 15个酷应用玩转树莓派>>

    本书共分18章,前3章是本书的基础章节,主要介绍了树莓派的一些基本情况和基本操作,来让读者了解树莓派的前世今生,掌握树莓派基本的使用方法.第4~18章主要介绍15个以树莓派为载体的酷炫应用,大家可以按 ...

  9. 第一个Windows程序

    今天,我们的任务就是和大家一起开发第一个Windows程序,这个程序的功能非常简单,就是弹出一个对话框,但是简单的程序可以帮助大家建立信心. 例1 第一个Windows程序 /* ********** ...

  10. 关于开发板不能ping通外网IP

    最近在做远程监控的项目,打算用开发板给一个网站发送数据包.不过发现开发板只能ping通同一局域网内的ip,外网的ip不能ping通.纠结了半天发现是网关没有设置的原因.下面来说说如何解决这个问题. 首 ...