想必初学者对CSS盒模型总是很困惑吧。下面一分钟让你彻底明白盒模型:

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

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

     <head>

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

         <title>3</title>

         <style type="text/css">

             .simple{

                 width: 500px;

                 margin: 20px auto;

                 border-style:solid;

                 border-color: #0073CC;

                 background-color: red;

             }

             .fancy{

                 width: 500px;

                 margin: 20px auto;

                 padding:50px;

                 border-width: 10px;

                 border-style:solid;

                 border-color: #0068C9;

                 background-color: #10B722;

             }

         </style>

     </head>

     <body>

         <div class="simple">

             我小一些

         </div>

         <div class="fancy">

             我大一些

         </div>

     </body>

 </html>

　　下面我们来看显示效果:

再看FireFox的盒模型:

下面我们结合起来看:

看完这几张图之后，想必已经明白了吧。width,heigh代表内容(content)的长度和高度,padding是content与border的的距离.background-color的作用范围是 content+padding

一分钟让你明白CSS中的盒模型的更多相关文章

  1. 浅谈css中的盒模型（框模型）

    css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...

  2. 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

    html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...

  3. CSS中的盒模型

    CSS的盒模型描述了一些长方形盒子,这些长方形盒子被用来表示文档树中的元素,并根据视觉格式化模型进行定位. 1. 盒子的尺寸 每个盒子都有一个content区域(比如文本.图片等)和可选的包围cont ...

  4. css中的盒子模型

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

  5. css高级选择器&盒模型

    css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...

  6. 李洪强和你一起学习前端之(6)css行高,盒模型,外边距

    李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...

  7. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

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

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

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

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

随机推荐

  1. 什么是ARC

    arc就是自动引用计算.英文名Automatic Reference Counting.在一开始的IOS开发中,内存管理是需要手动的,对某个资源的引用,引用后就对其计算+1,当不再使用就-1,当计算为 ...

  2. openfire for mac 无法启动

    http://blog.csdn.net/winer888/article/details/49886281 ①:sudo chmod -R 777 /usr/local/openfire/bin ② ...

  3. J2EE 关于WebLogic下应用使用URL.openConnection获取连接返回 HttpsURLConnection与SOAPHttpsURLConnection的问题

    J2EE 关于WebLogic下应用使用URL.openConnection获取连接返回 HttpsURLConnection与SOAPHttpsURLConnection的问题 2012年03月09 ...

  4. Effective C++ 总结（三）

    五.实现  条款26:尽可能延后变量定义式的出现时间 如果你定义了一个变量且该类型带一个构造函数或析构函数,当程序到达该变量时,你要承受构造成本,而离开作用域时,你要承受析构成本.为了减少这个成本,最 ...

  5. jQuery中在当前页面弹出一个新的界面

    W.$.dialog({ content:'url:wswgrkbillController.do?snh&id='+b+'&bh='+c+'&ck='+d+'&sl= ...

  6. ZOJ3527

    题意:给你一个有向图,一共N个顶点,且每个顶点只有一个前驱或后继,在顶点上建立圣地,那么就可以获得一个信仰值,如果在这个顶点的后继节点上也建立圣地,那么将改变一定的信仰值,求解能获取的最大信仰值. 思 ...

  7. 图片标签的alt与title区别

    一.img标签alt属性 1.alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户,以及视觉障碍的用户和使用屏幕阅读器的用户.当图片不显示的时候,图片的替换文字. 2.alt属性值得长度必 ...

  8. css 圆角效果

    http://intacto10years.com/index_start.php<div style="width:800px; height:1300px;">&l ...

  9. 说说RMAN里的obsolete

    RMAN> report obsolete; RMAN retention policy will be applied to the commandRMAN retention policy ...

  10. 基于ThinkPHP+AJAX的省市区三级联动

    练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...