想必初学者对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. Searching the String - ZOJ 3228（ac自动机）

    题目大意:首先给你一下母串,长度不超过10^5,然后有 N(10^5) 次查询,每次查询有两种命令,0或者1,然后加一个子串,询问母串里面有多少个子串,0表示可以重复,1表示不可以重复.   分析:发 ...

  2. A - Til the Cows Come Home

    裸的最短路,试一下刚看的spfa,虽然没有看代码,不过明白了大致的思想,先写一下试试吧,而且是个稀疏图,应该会很快吧. SPFA 算法采用图的存储结构是邻接表,方法是动态优化逼近法.算法中设立了一个先 ...

  3. Xamarin开发教程如何使用Xamarin开发Android应用

    Xamarin开发教程如何使用Xamarin开发Android应用 如何使用Xamarin开发Android应用 在了解了Xamarin和Andriod系统之后,下面我们需要了解一下如何使用这些工具和 ...

  4. LinearLayout增加divider分割线

    在android3.0及后面的版本在LinearLayout里增加了个分割线 1 2 android:divider="@drawable/shape"<!--分割线图片-- ...

  5. MYSQL 体系结构图-unzip_LRU

  6. cocos2d-x项目过程记录(cocos2d-x的新知)

    1.给CCMenuItem带上点击参数(这是CCNode的一个属性) CCMenuItem *item = CCMenuItemSprite::create(unselectedPic, select ...

  7. android studio c++ 自动补全

    这两天弄起来了Android ndk,可这东西的配置实在是个问题.对于Eclipse可以通过makefile进行编译,也比较成熟.但是对Android studio来说就蛋疼了,官方是想通过gradl ...

  8. chmod -x chmod的N种解法

    声明:该文章摘自陈皓的酷壳. 问题: 如果某天你的Unix/Linux系统上的chomd命令被某人去掉了x属性(执行属性),那么,你如何恢复呢? 参考答案: 1)重新安装.对于Debian的系统: s ...

  9. ZOJ 3822 Domination(概率dp)

    一个n行m列的棋盘,每天可以放一个棋子,问要使得棋盘的每行每列都至少有一个棋子 需要的放棋子天数的期望. dp[i][j][k]表示用了k天棋子共能占领棋盘的i行j列的概率. 他的放置策略是,每放一次 ...

  10. Android的GridView和Gallery结合Demo

    Android的GridView和Gallery结合Demo Demo介绍:首页是一个GridView加载图片,竖屏时显示3列图片,横屏时显示4列图片;并且对图片进行大小限制和加灰色边框处理. 点击某 ...