一、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. PSR规范学习笔记

    PSR已经经历了5次变革,如今PSR4就是最新的标准,但是还是有必要了解下5个版本的内容的,于是去php-fig网站看了下英文原版: 大概看了遍,发现这规范很多的必须很多时候只是建议,但是PHP解析器 ...

  2. MacOS（苹果电脑&苹果系统）连接京瓷300i 打印机

    前往京瓷官网下载打印机驱动: http://www.kyoceradocumentsolutions.com.cn/support/mfp/download/taskalfa300i.html 驱动安 ...

  3. September 14th 2017 Week 37th Thursday

    Don't let the past steal your present. 别让过去悄悄偷走了我们的当下. We take what we can get and make the best of ...

  4. U-Mail如何实现邮件营销自动化？

    对于很多企业来说,人力成本可能就是最大的成本支出了,如果能节省这方面成本支出,也就意味着公司增收了,因此很多公司在做营销工作时,都希望营销能够高效率.有系统.有规划.循序渐进的开展,同时还要减轻营销人 ...

  5. Mina使用总结(一)MinaServer

    我们先看一个最简单的Mina Server服务端代码,该段代码实现了服务端Server启动并监听客户端请求 package com.bypay.mina.server; import java.io. ...

  6. php四种基础排序算法的运行时间比较！

    /** * php四种基础排序算法的运行时间比较 * @authors Jesse (jesse152@163.com) * @date 2016-08-11 07:12:14 */ //冒泡排序法 ...

  7. jdbc java程序连接数据库 案例

    package jdbc; import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException; ...

  8. B. Vile Grasshoppers

    http://codeforces.com/problemset/problem/937/B The weather is fine today and hence it's high time to ...

  9. Hadoop源码学习笔记之NameNode启动场景流程一：源码环境搭建和项目模块及NameNode结构简单介绍

    最近在跟着一个大佬学习Hadoop底层源码及架构等知识点,觉得有必要记录下来这个学习过程.想到了这个废弃已久的blog账号,决定重新开始更新. 主要分以下几步来进行源码学习: 一.搭建源码阅读环境二. ...

  10. Kali渗透测试1-Netcat

    What is Netcat? Netcat is a featured networking utility which reads and writes data across network c ...