一、CSS盒子模型概述

css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

content：内容的实际空间

padding：边框和内容之间的空间

margin：盒子与盒子之间的空间

border：边框

二、盒子模型的类型

盒子模型分为IE盒子模型和标准盒子模型

起因

为什么会有IE盒子模型呢？当年微软的IE浏览器占据超过80%市场份额的时候，想自己独立制定一套浏览器标准，其中就包括IE的盒模型。

但是其他诸如Mozilla，Google等公司不同意IE的做法，他们遵循的是W3C的标准来定制浏览器，也就是W3C标准盒模型，因此就造成了现在浏览器不同的CSS盒模型了。

1、IE盒子模型（width包括了padding）

2、标准盒子模型

1、区分比较简单：IE模型：width=boder*2+padding*2+content

　　　　     　　　标准模型：width=content

2、选择

实际当中，我们选择哪个模型呢？当然是标准模板了。

3、怎么操作？

在网页上定义：<!DOCTYPE html>

三、实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            margin:0;

        }

        div {

            width:40px;

            height:40px;

            border:2px dashed red;

            margin-top:20px;

            padding-left:10px;

            padding-top:20px;

            padding-right:30px;

            padding-bottom:40px;

        }

    </style>

</head>

<body>

    <div>

        aaa

    </div>

</body>

</html>

　　

我们定义了一个div，然后设定高度、宽度、边框、margin、padding参数，从浏览器上我们可以清晰的看到盒子模型。

CSS快速入门-盒子模型的更多相关文章

  1. CSS快速入门（四）

    目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...

  2. css中的盒子模型

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

  3. 【CSS学习】--- 盒子模型

    一.前言:这篇只作为本人的笔记,以后慢慢再补充. 页面中的所有元素都可以被看作一个一个的“盒子”.这些盒子都包含了:内容(content).内边距(padding).边框(border)以及外边距(m ...

  4. CSS学习之盒子模型

    1. 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...

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

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

  6. CSS Flexbox 弹性盒子模型

    CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...

  7. 前端开发HTML&css入门——盒子模型以及部分CSS样式

    CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相 ...

  8. HTML/CSS快速入门

    Web概念 JavaWeb 使用java语言开发基于互联网的项目 软件架构 C/S架构:Client/Server 客户端/服务器 用户本地有一个客户端程序,在远程有一个服务端程序 如QQ,英雄联盟. ...

  9. Html与CSS快速入门03-CSS基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...

随机推荐

  1. iOS手势处理

    iOS手势处理 iOS手势有着如下几种: UITapGestureRecognizer UIPinchGestureRecognizer UIRotationGestureRecognizer UIS ...

  2. UNIX高级环境编程（5）Files And Directories - 文件相关时间，目录文件相关操作

     1 File Times 每个文件会维护三个时间字段,每个字段代表的时间都不同.如下表所示: 字段说明: st_mtim(the modification time)记录了文件内容最后一次被修改的时 ...

  3. 第一次项目冲刺（Alpha版本）2017/11/17

    一.当天站立式会议 会议内容 1.对数据库的设计的进一步讨论 2.讨论SSH一些配置细节 3.分配今天的任务 二.任务分解图 三.燃尽图 四.心得 刚接触冲刺,一开始任务没有分布很多,大家要一些熟悉的 ...

  4. jQuery复制table header到表格的最下面

    为了让table具有更好的可读性,我们可以将表格的header信息克隆一份到表格的底部,这种特效通过JQuery就很容易实现: 1 2 3 4 5 var $tfoot = $(''); $($('t ...

  5. MySQL主从.md

    MySQL Replication 概述 Mysql内建的复制功能是构建大型,高性能应用程序的基础.将Mysql的数据分布到多个系统上去,这种分布的机制,是通过将Mysql的某一台主机的数据复制到其它 ...

  6. 那些不明不白的$符号设计--Sass和Emmet，变量设计原理相通

    以前看到php变量的定义,直接使用$符号开始,怎么看都不习惯.后来呀,在使用Emmet的过程中,又接触到了$符号.今天,在学习Sass的过程种,再一次接触到$符号,兴致所致,不由得想写一篇,对比一下搞 ...

  7. 优酷上传SDK解析(Python)

    1.优酷上传 1)调用优酷的sdk完成优酷视频的上传首先需要将实例化YoukuUpload类实例化,传入的参数为(client_id,access_token,文件地址) 实例化时执行__init__ ...

  8. Day13 泛型

    泛型 泛型定义 在一个类型(类,接口,方法)之后,定义一个类型参数. 原生类型:类型后面没有指定具体的类型参数. 好处 使用泛型的好处在于,它在编译的时候进行类型安全检查,并且在运行时所有的转换都是强 ...

  9. HustOJ平台搭建

    HustOJ平台搭建非常简单,首先为了排除一些不必要的故障,可以使用阿里云的服务器更新系统盘让系统盘初始化保持在没有其他包依赖的环境下及其使用root用户. 1.针对Ubuntu14.04(根据官方文 ...

  10. Rserve详解,R语言客户端RSclient【转】

    R语言服务器程序 Rserve详解 http://blog.fens.me/r-rserve-server/ Rserve的R语言客户端RSclient https://blog.csdn.net/u ...