想必初学者对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. [置顶] SpecDD系列：6个确保您执行“充分”QA测试的技巧

    确保团队执行 “足够的” 测试覆盖面是非常困难的,尤其是对敏捷开发团队来说.对于初学者而言,一个开发Sprint中要完成多少的质量保证工作才够呢?我们知道,敏捷的标准是在开发Sprint结束的时候要完 ...

  2. 关于ETL的几种运行

    一:代码部分 1.新建maven项目 2.添加需要的java代码 3.书写mapper类 4.书写runner类 二:运行方式 1.本地运行 2. 3. 三:本地运行方式 1.解压hadoop到本地 ...

  3. jiaocheng https://github.com/CarpenterLee/JCFInternals

    https://github.com/CarpenterLee/JCFInternals

  4. 九度OnlineJudge之1001：A+B for Matrices

    题目描述: This time, you are supposed to find A+B where A and B are two matrices, and then count the num ...

  5. MySQL Replication, 主从和双主配置

    MySQL Replication, 主从和双主配置 MySQL的Replication是一种多个MySQL的数据库做主从同步的方案,特点是异步,广泛用在各种对MySQL有更高性能,更高可靠性要求的场 ...

  6. VC++获取网卡MAC、硬盘序列号、CPU ID、BIOS编号

    以下代码可以取得系统特征码(网卡MAC.硬盘序列号.CPU ID.BIOS编号) BYTE szSystemInfo[4096]; // 在程序执行完毕后,此处存储取得的系统特征码 UINT uSys ...

  7. RabbitMQ和kafka从几个角度简单的对比--转

    业界对于消息的传递有多种方案和产品,本文就比较有代表性的两个MQ(rabbitMQ,kafka)进行阐述和做简单的对比, 在应用场景方面, RabbitMQ,遵循AMQP协议,由内在高并发的erlan ...

  8. TCP/IP协议原理与应用笔记06：OSI参考模型全称

    1. ISO是一个组织,OSI是一个模型. 2. OSI不是协议,是网络体系结构的概念模型 3. OSI参考模型全称为: Open System Interconnection Reference M ...

  9. sql查阅每一月的数据

    因为项目中需要做数据报表的功能,需要统计每个月的销售额.我找到下面的sql语句.后来经过自己的测试,发现第二句才是可以用的, //String sql="SELECT year(buydat ...

  10. Mysql 中和同to_char 一样用法的函数

    STR_TO_DATE() $sql = " SELECT "; $sql .= " m_img,m_content,STR_TO_DATE(m_time,\" ...