零基础学前端之CSS盒模型

在网站布局中,我们会使用各种各样的元素,这些元素本质上就是一个个小的容器,也称之为盒子,盒子里面可以放置文本,图片,或者其他元素。

什么是 CSS 盒模型呢?

CSS 盒模型本质上是一个包裹每个 HTML 元素的盒子,包含 margin、border、padding 和 content 四个部分。

浏览器就是通过盒模型,来计算元素在网页中占据的空间大小的。

前面我们介绍过这些盒模型的要素:Content,表示盒子的内容,包含文本、图像等等。Padding,表示填充内容周围的一个区域,它是透明的。Border,表示围绕填充和内容的边框。Margin,表示边框以外的区域,它也是透明的。

我们来举个例子。

创建一个 019-css-box-model 文件夹,在文件夹里创建一个 box-model-1.html 文件和一个box-model-1.css 文件。

构建 html 基础代码,引入样式文件。为了便于比较效果,我们定义两个 div 元素,添加不同的类名,补全文本。

HTML

<div class="box1">

    盒子模型组成部分:内容,内边距,边框,外边距

</div>

<div class="box2">

    盒子模型组成部分:内容,内边距,边框,外边距

</div>

CSS

* {

  margin:0;

  padding:0

}

div {

  width: 200px;

  height: 200px;

}

.box1 {

  background-color: orange;

  border:20px solid gray;

  padding:20px;

  margin:20px;

}

.box2 {

  background-color: yellow;

}

打开 CSS 文件,定义通配符选择器,声明样式 margin: 0,padding: 0。取消所有元素默认的边距和填充样式。

定义 div 选择器,声明样式:width: 200px,height: 200px。为两个 div 元素添加宽度和高度。

定义 .box1 选择器,声明样式:background-color: orange。

定义 .box2 选择器,声明样式:background-color: yellow。

在浏览器里预览效果,两个有背景颜色的盒子就做好了。

给 box1 添加样式:border: 20px solid gray,为橙色的盒子增加一个边框。

对比黄色的盒子,橙色盒子总宽度增加了 40px,总高度也增加了 40px。

继续给 box1 添加样式:padding: 20px。

此时橙色的盒子继续变大。对比黄色的盒子,宽度和高度又增加了40px。

继续给 box1 添加样式:margin: 20px。

这时我们发现,因为添加了外边距,橙色盒子的位置发生了偏移。

通过这个例子我们发现,给元素添加内填充、边框以及外边距之后,盒子会变大并发生位置变化。

那么,如何在所有浏览器中正确设置一个元素的宽度和高度呢?这对于精确的页面布局,意义重大!

计算盒子的宽度和高度,请牢记这两个公式:

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

再次强调:当应用 CSS 设置一个元素的 width 和 height 属性时,只是设置了元素内容区域的宽度和高度。要计算一个元素的完整尺寸,必须要加上填充、边框和边距。

我们将上面这种计算元素大小的盒模型,称作标准盒模型。

那能不能给元素设置了 margin 和 padding 属性后,元素本身的宽高就固定为设置的这个值呢?这就要应用另外一种盒模型,叫做怪异盒模型。

给元素声明 box-sizing 属性,取值为 border-box,这个元素就按照怪异盒模型来呈现大小了。

我们先来做个例子。

在 019-css-box-model 文件夹下,创建一个 box-model-2.html 文件和一个box-model-2.css 文件。

构建 html 基础代码,引入样式文件。为了便于比较效果,我们还是定义两个 div 元素,添加不同的类名,补全文本。

HTML

<div class="box1">

    我是一个div,用来演示怪异盒子

</div>

<div class="box2">

    我是一个div,用来进行做比较

</div>

CSS

*{

    margin:0;padding:0

}

div{

    width: 200px;

    height:200px;

}

.box1{

    background-color: orange;

    box-sizing: border-box;

    border:20px solid gray;

    padding:20px;

    margin:20px

}

.box2{

    background-color: yellow;

}

打开 CSS 文件,定义通配符选择器,声明样式 margin: 0,padding:0。取消所有元素默认的边距和填充样式。

定义 div 选择器:声明样式:width: 200px,height: 200px。

定义 .box1 选择器,声明样式:background-color: orange。

定义 .box2 选择器,声明样式:background-color: yellow。

在浏览器里预览效果,两个有背景颜色的盒子就做好了。

给 box1 添加样式:box-sizing: border-box,触发怪异盒模型。继续添加样式 border: 20px solid gray,padding:20px。

可以看到,box1 添加了边框和内边距,但是大小并没有改变,宽高仍然是200px。显而易见,内容的大小被压缩了。

继续为 box1 添加样式:margin: 20px。

大家可以猜一下,外边距会不会继续压缩内容呢?

仔细观察一下,box1 位置发生了偏移,观察一下容器的大小,并没有变化。

所以,怪异盒模型宽度和高度的计算公式为:

盒子的宽度 = CSS样式设置的 width 值 + 左边距 + 右边距

盒子的高度 = CSS样式设置的 height 值 + 左边距 + 右边距

实际上,box-sizing 属性还有一个值: content-box,就是用来触发元素的标准盒模型。这也是元素盒模型的默认值,如果没有给元素设置 box-sizing 属性,容器的大小就按照标准盒模型来计算。

回到样式代码,将 box1 的 box-sizing 属性值修改为 content-box。

我们发现,容器总宽高变为了 320px。

注释掉box-sizing: content-box,容器的总宽高仍然是 320px。

HTML

<!--回答问题: -->

<div class='box'></div>

<style>

    div {

        width:100px;

        height:100px;

        background-color:orange;

        box-sizing:content-box;

        border:10px solid gray;

    }

    .box {

        width:200px;

        padding:200px;

        border-top:10px solid yellow;

        margin:20px 30px;

    }

</style>

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,658评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,482评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,213评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,395评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,487评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,523评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,525评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,300评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,753评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,048评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,223评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,905评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,541评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,168评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,417评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,094评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,088评论 2 352

推荐阅读更多精彩内容

  • 盒模型 边框属性 什么是边框?边框就是环绕在标签宽度和高度周围的线条 格式连写(同时设置四条边)border: 边...
    绚丽多彩的白阅读 325评论 0 0
  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 1,284评论 0 3
  • Html 标签 斜体 粗体 单独的样式 引用文本 长文本引用 换行 空格 分割线 地址信息 单行代码 多行代码 无...
    SunnySky_阅读 553评论 0 5
  • 1.CSS盒模型 盒子模型有两种,分别是标准盒子模型和IE盒子模型。 CSS 把盒模型分为两种基本形态:Block...
    莫失丿莫忘阅读 544评论 0 2
  • 盒子模型 如果你看过很多教程依然学不会盒子模型,那么请你耐心看完这篇. 盒子模型3D层次结构: 从第一层到第五层依...
    info_gu阅读 2,495评论 0 12