想必初学者对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. Configuration所有配置简介

    // 内存缓存的设置选项 (最大图片宽度,最大图片高度) 默认当前屏幕分辨率                // .memoryCacheExtraOptions(480, 800) // 硬盘缓存的 ...

  2. Android 解屏幕锁与点亮屏幕(来电时效果)

    PowerManager pm=(PowerManager) getSystemService(Context.POWER_SERVICE); //获取电源管理器对象 PowerManager.Wak ...

  3. Amoeba for MySQL 非常好用的mysql集群软件

    http://docs.hexnova.com/amoeba/ Amoeba for MySQL致力于MySQL的分布式数据库前端代理层,它主要在应用层访问MySQL的时候充当query 路由功能,专 ...

  4. EEPlat 的数据层模式

    EEPlat 的数据库底层架构能够同一时候支持多种数据库的集成应用.同一时候能够支持分布式数据库的集成应用.业务对象通过指定数据源与对应的数据库通过数据源层进行数据交互,数据源层通过数据库种类.自己主 ...

  5. RT：How HTTP use TCP connection

    In HTTP/0.9 (not used anymore), each request uses a separate TCP connection, and the end of a respon ...

  6. 在Linux上怎么安装和配置Apache Samza

    samza是一个分布式的流式数据处理框架(streaming processing),它是基于Kafka消息队列来实现类实时的流式数据处理的.(准确的说,samza是通过模块化的形式来使用kafka的 ...

  7. Python开发【第十三篇】：jQuery--无内容点击-不进去（一）

    Python开发[第十三篇]:jQuery--无内容点击-不进去(一)

  8. codevs1099字串变换（Bfs）

    /* 最少步数问题 妥妥的Bfs 很显然队列里存的是串(可能存个数也可以 就像8数码那样) 然后每次队首元素弄出来 能换的都换一遍 最后每次换完的新串入队前先判断到头了没 最后说一句 String大法 ...

  9. 新闻web小酌

    首页如上 类图如下: 添加新闻的方法(dao): public boolean Add(News news) { boolean flag=false; Connection con =getConn ...

  10. FileWriter类的flush方法的作用

    FileWriter类的flush方法的作用 每次io都会影响性能,将需要写入的内容,放入缓冲区中,然后调用flush方法,将缓冲区内容写入文件中.