The CSS Box Model

原创 2015年11月21日 13:40:46

简单介绍下css和模型

前言:走进盒子,看看里面的世界……

Box Model

二维盒子

大多数初学者心中的盒子都是二维的,就像下面这样

box model

那么你在firebug下面看到的就是这样的

firebug box model

具体代码就实是下面这样

<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>margin3</title>
        <style style="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            .margin3-box{
                margin: 10px;
                background-color: blue;
                border: 10px solid #0f9;
                padding: 10px;
                width: 240px;
                height: 240px;
            }
        </style>
    </head>
    <body>
        <div class="margin3-box"></div>
    </body>
    </html>

firebug下的情况:

firebug margin test

我们通常使用下列的方式来计算盒子的大小:

size number
Box of Width width + padding-left + padding-right + border-left + border-right
Box of Height height + padding-top + padding-bottom + border-top + border-bottom
三维盒子

3d box model

如何设置我们的盒子呢?

  • 如果你没有设定margin、padding或者是border,系统就会默认为0,但有的浏览器有自己的默认值(这些默认值不一定是0,所以我建议无论是否要使用这些值,请将他们他们重置为默认值)
我们来看看几个比较特殊的例子
1、 默认width的块级盒子且position = [static | relative | absolute]
  • 如果你没有声明一个宽度( Box of Width ),而且这个盒子的位置是静态(static),或者是相对的(relative),那么这个盒子(Box of Width)的宽度将会100%的填充在padding、border、width中,其是向内部延伸,而不是向外部。但是如果你明确的设置了一个盒子的宽度,那么这个盒子的填充通常将会是向外部。

如果不是太明白,可以将下面的代码复制进你喜欢的编辑器内,并运行它

<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>margin2</title>
        <style style="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            .margin2-box{
                margin: 10px;
                background-color: blue;
                border: 10px solid #0f9;
                padding: 10px;
                width: 1000px;
            }
            .static{
                position: static;
                margin: 10px 0 10px 300px ;
                background-color: red;
                border: 10px solid #0f0;
                padding: 10px;
                /*top: 20px; 
                left: 20px;*/
            }
            .relative{
                position: relative;
                margin: 10px;
                background-color: red;
                border: 10px solid #0f0;
                padding: 10px;
                /*top: 20px; 
                left: 20px;*/
            }
            .absolute{
                position: absolute;
                margin: 10px;
                background-color: red;
                border: 10px solid #0f0;
                padding: 10px;
                top: 20px;
                left: 20px;
            }
        </style>
    </head>
    <body>
        <div class="margin2-box">
            <div class="margin2-demo static"><pre>.static{
    position: static;
    margin: 10px 0 10px 300px;
    background-color: red;
    border: 10px solid #0f9;
    padding: 10px;
    /*top: 20px; 
    left: 20px;*/
}</pre></div>
            <div class="margin2-demo relative"><pre>.relative{
    position: relative;
    margin: 10px;
    background-color: red;
    border: 10px solid #0f9;
    padding: 10px;
    /*top: 20px;
    left: 20px;*/
}</pre></div>
            <div class="margin2-demo absolute"><pre>.absolute{
    position: absolute;
    margin: 10px;
    background-color: red;
    border: 10px solid #0f9;
    padding: 10px;
    top: 20px;
    left: 20px;
}</pre></div>
            <div class="margin2-demo"></div>
        </div>
    </body>
    </html>

效果图应该是这样的(为了让效果更易于明白,我把static的盒子margin-left设置为300px)

no width box

当你运行了这段代码,是不是更明白了呢

position属性为absolute的盒子的宽度是被内容撑大的,但是最终结果不尽如人意,原文处作者是这样解释的:

Absolutely positioned boxes that have no width set on them behave a bit strangely. Their width is only as wide as it needs to be to hold the content. So if the box contains a single word, the box is only as wide as that word renders. If it grows to two words, it’ll grow that wide.

no width and position absolute box

This should continue until the box is 100% of the parent’s width (the nearest parent with relative positioning, or browser window) and then begin to wrap. It feels natural and normal for boxes to expand vertically to accommodate content, but it just feels strange when it happens horizontally. That strange feeling is warranted, as there are plenty of quirks in how different browsers handle this, not to mention just the fact that text renders differently across platforms.

no width and position absolute box2

2、默认width且浮动的块级盒子
<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>margin4</title>
        <style style="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            .margin4-box{
                margin: 10px auto;
                background-color: blue;
                border: 10px solid #0f9;
                padding: 10px;
                width: 360px;
                height: 240px;
            }
            .margin4-box div:first-child{
                float: left;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="margin4-box">
            <div>
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
                hello world!
            </div>
        </div>
    </body>
    </html>

这里写图片描述

同样精准的行为也在没有设定宽度的浮动元素上被发现。这个盒子仅仅和他容纳的内容一样宽,直到和他的父亲元素一样(并不需要去进行相对位置摆放)。由于这些缺少Width属性的盒子有易碎的性质,所以我们不能轻易的拿走他们依赖的关键脚本,像是在整体的页面布局中。如果你悬浮一些列去当工具条,依靠一些元素(像是图片)去对保持宽度负责,那我想你是在找麻烦。

3、内联级元素

我们很容易就将块级元素抽象化为一个盒子,但是我们往往没有想到联机元素也是一个盒子,事实上确实如此。请将他们想象成一个非常非常长且非常非常细小的矩形,这些小矩形缠绕在每一行中。他们和其他的盒子一样,同样拥有margin, padding, border属性。

这种包装使得他变得模糊起来。也许你认为一个左边缘将一个盒子推到了右边是不可信的,但是这个第一行是作为这个盒子的开始。将背景属性设置为透明将能使你更加清晰的使用它。

参考以下博文:(感谢原博主的分享)

CHRIS COYIER原著
耀耀翻译版

节束语:人类绝大多数资料(原著)是英文文献,所以说学好你的英语吧,骚年们!不要尝试翻译,不要尝试翻译,不要尝试翻译!对比原著和翻译版你就知道了。。。。。。

相关文章推荐

HTML和CSS的关键:盒子模型(Box model)

本文作为属性篇的最后一篇文章, 将讲述html和css的关键—盒子模型(box model). 理解box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css...
  • CROSSCI
  • CROSSCI
  • 2012年05月14日 14:59
  • 352

java awt GridBagLayout同CSS框模型 (Box Model)的比较

GridBagLayout功能强大但是有点复杂,我想从使用它所要达到的效果的角度加以思考,然后和CSS框模型比较, 我发现会更容易理解其各个配置属性的意义。下面是一些很好的链接: css框模型:ht...

CSS 盒子模型(Box Model)和轮廓(outline)

所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我...

iOS-StoryBoard 布局对比 CSS 的 Box Model 布局

在 iOS 端,布局分为可视化布局和纯代码布局;目前,主流是可视化,方便快捷,简单直观,节省时间,功能更多 在网页端,一般使用 CSS 的 Box Model 框模型进行布局,个人感觉没有移动端可视...
  • Mazy_ma
  • Mazy_ma
  • 2017年06月19日 17:23
  • 243

The CSS Box Model

The CSS Box ModelAll HTML elements can be considered as boxes. In CSS, the term "box model" is used ...
  • Koupoo
  • Koupoo
  • 2011年07月15日 13:55
  • 380

读The CSS Box Model有感

读The CSS Box Model有感   http://my.oschina.net/limichange/blog/72992 看到网上有一篇深入理解盒模型的文章,也想自己动手写一下自己的...

【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之二:控制框(Controlling Box)的形成

关于可视化模型的包含块,已经在“说说标准”系列中跟大家分享过了。 这次,跟大家分享另一个比较重要的概念,这个概念也许大家会很熟悉,因为经常挂在嘴边,这就是,块元素和块框,行内元素和行框,以及 d...

【分享】说说标准——你真的了解盒子模型(box model)吗?

首先,想像一下,页面的构成元素都有什么?恩~~,SPAN DIV TABLE INPUT IMG 等等等等。 这些元素在页面上都是怎么放置的呢?像 SPAN IMG INPUT 这样的元素是行内元素...

盒子模型(Box Model)

盒子模型(Box Model) ■ 盒子模型——概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具...

Box Model 盒子模型

Box Model盒子模型,是初学者在学习HTMl5时会学到的一个重要的模型,也有一些人称它为框模型,因为盒子是属于3维,而框是平面的。称之为盒子模型,是因为其结构和盒子十分相似,其最外面是margi...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:The CSS Box Model
举报原因:
原因补充:

(最多只允许输入30个字)