想必初学者对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. Cookie介绍及JavaScript操作Cookie方法详解

    本文主要为大家简单介绍了以下Cookie的用途.运行机制,以及JavaScript操作Cookie的各种方法,总结的比较全面,希望能给大家带来帮助. 什么是 Cookie “cookie 是存储于访问 ...

  2. 跑步进入全站 HTTPS ，这些经验值得你看看

    随着国内网络环境的持续恶化,各种篡改和劫持层出不穷,越来越多的网站选择了全站 HTTPS.就在前几天,免费提供证书服务的 Let’s Encrypt 项目也正式开放测试,HTTPS 很快就会成为 WE ...

  3. How many ways?? - hdu2157（矩阵快速幂-模板）

    分析:求Map^k,刚开始没有用快速幂,TLE了   代码如下: =================================================================== ...

  4. Lucene简介

    1 lucene简介1.1 什么是lucene    Lucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么拿来就能用,它只是提供 ...

  5. Angular2学习

    1.新建项目 2.新建Model public class TodoItem { public int Id { get; set; } public string Key { get; set; } ...

  6. mongoDB的基本使用----飞天博客

    Mongo的介绍:这个mongoDB官网说的好啊,MongoDB是一个开源的基于document的数据库,并且是优秀的NoSQL数据库,并且它是用C++写滴哈,非常有效率.一些什么特点呢? 全索引支持 ...

  7. poj 3422 (费用流)

    从左上角到有下角k次能获得的最大值. 跟hdu 2686一样的题目,这题一个点可以重复走,只能得到一次值. #include<stdio.h> #include<string.h&g ...

  8. Swift-Dictionary

    1.字典写法 Dictionary<KeyType,ValueType>,KeyType是你想要储存的键,ValueType是你想要储存的值. 唯一的限制就是KeyType必须是可哈希的, ...

  9. [Angular 2] Controlling how Styles are Shared with View Encapsulation

    Style and View Encapsulation is best understood by seeing how each option (Emulated, Native, and Non ...

  10. vim note(4)

    :new 文件名.词尾 新文件. :e 文件名 打开文件. :w 文件名.txt 保存文件. :wq 保存并退出. :x 辍学.假设文件更改被保存 版权声明:本文博主原创文章,博客,未经同意不得转载.