在我们网页上的每一个元素，一个按钮，一段文本，一张图片等等，浏览器都将它们当做一个“盒子”看待，并把这样的盒子称为盒模型（box model）。使用Chrome的右键>审查元素对某个网页上的元素，就可得到类似这样一张图，这就是盒模型的缩影了。

　　　　　　

　　组成盒模型主要是这几个要素：外边的外边距margin、中间的边框border、里边的内边距padding，再往里就是包围元素实体的宽、高。在padding这个块里面，包括实体元素的宽高，就是背景background横行的地方，一般我们所添加的背景图片、背景颜色会充满padding这里面的一块区域，所以padding变大，背景会跟着扩张，当然前提是没有精确控制背景的位置、平铺方式等参数。

　　CSS的盒子是包括margin的。margin可以正可以负而padding职能为正。记得有一个人给我很好的讲解的padding的使用，相当于是面前有一本书，加一个padding-left等同于加了个占位的空白把书往右边挤了，很形象的解释了这一切。

　　从图中看出，CSS的盒模型是四四方方的，所以对盒子的修饰的margin、border等是有四个方向的。比如margin样式的添加，通常是这样：

    margin: 5px;

    margin: 5px 10px;

    margin: 5px 10px 15px 20px;

　　第一种是上下左右均为5像素，第二种是上下5像素，左右10像素，第三种最具体的，顺序上（margin-top）、右（margin-right）、下（margin-bottom）、左（margin-left）的设置外边距，顺时针，上最先开始。

　　上下外边距是0，左右边距是auto，意在让浏览器自己计算，浏览器根据当前父元素宽度，假定就是body，来把760像素宽的元素放在上面，并计算保证它的左右边距的差值始终为0，所以类名为txt的元素就在网页上居中了。

　　对于块级元素和内嵌元素，块级元素可以设置宽高并且从上到下排列比如div,h标签等等，大家可以在网上搜一下，而内嵌元素如span，img标签，只能从左到右排列，并且不能设置宽高，如要想设置宽高或者从上往下排列只能通过 float或者display转化为块级元素。

　

　　元素背景，很有意思，上面说过，background是跟着padding的大小走的，如果你没有精确控制背景的位置，比如简单设置一个background-color

<html>

  <head>

    <title>background</title>

    <style type="text/css">

    * {

      margin:0;

      padding:0;

      border:0;

    }

    #d1 {

      width:100px;

      height:100px;

      padding: 10px;

      background-color:red;

    }

    </style>

  </head>

  <body>

    <div id="d1"></div>

  </body>

</html>

　　　　　　　　

　　用Chrome的审查元素查看，padding为10px，双击它逐渐增大或减小，就可以看到，background-color是跟着padding走的，padding变大颜色块跟着变大，padding值不能为负。

　　background的简写：

  background:url(images/bg.png) no-repeat 1px 1px #deddd6;

　　挂一个背景图片，图片路径在url参数的括号里，不重复显示，位置在距左内边距（padding）1像素，距上内边距1像素，如果这个图片不存在，则使用最后一个十六进制颜色填充。这里对背景图片做了精确控制，距上边1px，左边1px，这个值可以是百分比，如0%距顶部0像素，50%则是把图片的中间放在元素上，奇妙的是这里的距离值可以给负数，所以可以使得背景图片只在元素中显示一部分，甚至将图片移出元素，可以试试。这点很重要，比如在有的网站的导航时，进入网站是一个图标，鼠标滑过（hover）时换成另一个图标，就可以这样弄。

　　

　　元素的宽高，不设置时，默认为自适应元素的所占的实际宽高值，比如直接p标签贴上一段文本，但是网页上经常分块放置，每一块都是宽高是计算好的，特别是有时真实图片可能太大，用img标签装载一张图，设置一个小的width和height，网页上显示的就是一张缩小后的图片，当然也能放大。所以我们看到的图片大小可能不是真实的图片尺寸。关于宽高的一个常见的现象，就是溢出，比如

<!DOCTYPE html>

<html>

    <head>

        <title>inline test</title>

        <style type="text/css">

            .segment{

                width:200px;

                height:100px;

                margin:0 auto;

                padding:5px;

                border:2px solid #509ddd;

            }

        </style>

    </head>

    <body>

        <p class="segment">

            The human species' use of technology began with the conversion

            of natural resources into simple tools. The prehistorical

            discovery of the ability to control fire increased the

            available sources of food and the invention of the wheel helped humans in

            travelling in and controlling their environment. Recent technological

            developments, including the printing press, the telephone, and the

            Internet, have lessened physical barriers to communication and allowed

            humans to interact freely on a global scale.

        </p>

    </body>

</html>

　　　　效果：

　　对于这种溢出，因为宽高可能设置太小，可以使用overflow属性，它有几个常用值：hidden（隐藏）、scroll（滚动条）、auto（自动，超过宽高范围自动出现滚动条），比如scroll

　　　　　　　 

　　也可以设置hidden，将超过范围的内容隐藏掉，这就完全看情况了。

　　对于边框，它是分隔margin和padding的一道墙，也可以说背景是以它为界的。border的设置跟其他的类似。border属性值的设置有个特点就是，如果没有设置边框线的风格，边框线便不会出现，风格没有默认值，所以可以是border:1px solid;，黑色为默认边框颜色，但不能是border:1px #f00;，border:1px;就更不行了。当然你也可以单独设置样式border-style、宽度border-width、颜色border-corlor，更具体的是针对某一边的设置，如border-top-style，设置顶边框的样式等等。

　　对于margin，也是个有意思的东西，有意思的地方在于，它可以是负值。一般的，我们会设置一个正的margin值来进行“主权宣誓”，让别的元素离它远点，比如：

<!DOCTYPE html>

<html>

    <head>

        <title>margin test</title>

        <style type="text/css">

            .spanA{

                margin:5px;

                padding:5px;

                background-color:#accedd;

            }

            .spanB{

                margin:5px;

                padding:5px;

                background-color:#66cdaa;

            }

        </style>

    </head>

    <body>

        <span class="spanA">Hello</span>

        <span class="spanB">World</span>

    </body>

</html>

　　效果：

　　

　　

　　关于margin还有一点注意的地方就是：边距冲突。

<!DOCTYPE html>

<html>

    <head>

        <title>margin test</title>

        <style type="text/css">

            .back{

                width:760px;

                height:620px;

                margin:0 auto;

                border:2px solid #00a1f4;

            }

            .bloackA{

                width:100px;

                height:20px;

                background-color:red;

                margin-bottom:20px;

            }

            .bloackB{

                width:100px;

                height:20px;

                background-color:blue;

                margin-top:10px;

            }

        </style>

    </head>

    <body>

        <div class="back">

            <div class="bloackA"></div>

            <div class="bloackB"></div>

        </div>

    </body>

</html>

　　如果用Chrome的审查元素，将鼠标放在两个块html代码上，就是这样

　　　　上一个:  下一个:

　　代码里给上一个块设置了20px的margin-bottom，下一个块设置了10px的margin-top，但它们在上下排列的衔接处，并不是30px宽，而只有20px，也就是说下边块的margin-top与上边块的margin-bottom合并了，这便是边距冲突。针对上下方向的margin边距，大的与小的碰到一起时，大的边距会将小的边距合并，所以两个块之间的上下距离并不是简单的边距相加。

浅谈css盒模型的更多相关文章

  1. 浅谈CSS盒子模型

    [摘要]盒子模型是CSS中的一个重要概念,虽然CSS中没有盒子这个单独的属性对象,但它却是CSS中无处不在的一个重要组成部分.掌握盒子模型的原理和使用方法可以极大地丰富HTML元素的表现效果,同时对于 ...

  2. CSS盒模型的深度思考及BFC

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型 ...

  3. 前端笔记（关于css盒模型知识整理）

    我以前整理的文章可能也不是特别深入.所以现在开始尝试即使多花点时间收集整理,也不只发浅层知识,这样对技术的深入理解是很有帮助的. 废话不多说,我们现在开始. 说到css盒模型,这是大多面试基础中会经常 ...

  4. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  5. CSS盒模型

    CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...

  6. 第 16 章 CSS 盒模型[下]

    学习要点: 1.元素可见性 2.元素盒类型 3.元素的浮动 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素可见性 使用 vis ...

  7. 第 16 章 CSS 盒模型[上]

    学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素尺寸 C ...

  8. 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度

    前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...

  9. [k]css盒模型

    box-sizing :  content-box || border-box || inherit 1.content-box:此值为其默认值.元素的宽度/高度(width/height)等于元素边 ...

随机推荐

  1. Async 与 Await 关键字研究

    1        Aynsc 和 Await 关键字的研究 在 .NET 4.0 以后,基于 Task 的异步编程模式大行其道,因其大大简化了异步编程所带来的大量代码工作而深受编程人员的欢迎,如果你曾 ...

  2. Qt中如何 编写插件 加载插件 卸载插件

    Qt中如何 编写插件 加载插件 卸载插件是本文要介绍的内容.Qt提供了一个类QPluginLoader来加载静态库和动态库,在Qt中,Qt把动态库和静态库都看成是一个插件,使用QPluginLoade ...

  3. c# 正则表达式对网页进行内容抓取

    原文 c# 正则表达式对网页进行内容抓取 搜索引擎中一个比较重要的环节就是从网页中抽取出有效内容.简单来说,就是吧HTML文本中的HTML标记去掉,留下我们用IE等浏览器打开HTML文档看到的部分(我 ...

  4. 15 Tricks to Appear Smart in Emails（转）

    英文原文:15 Tricks to Appear Smart in Emails 如果你不关心在邮件中表现聪明,就不要看本文了. 好吧,我们是孤独的. 在公司环境里,与电子通讯的肥沃土壤相比,没有什么 ...

  5. 一篇memcache基础教程

    Memcache是什么Memcache是danga.com的一个项目,最早是为 LiveJournal 服务的,目前全世界不少人使用这个缓存项目来构建自己大负载的网站,来分担数据库的压力.它可以应对任 ...

  6. mysql 分区 按 PARTITION BY RANGE (TO_DAYS(startTime))

    to_days() Given a date date, returns a day number (the number of days since year 0). 给定一个date 日期,返回天 ...

  7. RPATH与RUNPATH

    RPATH与RUNPATH 时间 2011-11-01 21:46:44 Qt Labs China 原文  http://labs.qt.nokia.com.cn/2011/11/01/rpath- ...

  8. Unity 之 Redux 模式（第二篇）—— Rigidbody 改造，摄像机控制

    作者:软件猫 日期:2016年12月8日 转载请注明出处:http://www.cnblogs.com/softcat/p/6144041.html 上一篇文章中存在一个很严重的问题,首先我们先让 M ...

  9. javascript第十五课：DOM

    dom就是文档,就是整个网页的简称,dom里面的标签就是对象 使用javascript进行DHMTL网页开发(Dynamic Html 动态网页) dom就是把html页面模拟成一个对象,顶级对象wi ...

  10. bootstrap之Swipe

    Swipe 我定义为滑动,但它字面的意思又不是,事件的形式类似于小时候拿着一块石头片,朝水面飞过去,假设你手法能够那么就是swipe走的路线,假设你手法不行,接触水面的时候就没再飞起来那就会被人嘲笑的 ...