盒子模型浅析

2018-06-24 02:27:20来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

上篇文章总结了块级元素和行内元素

这篇文章总结了有关盒子模型的知识,助于梳理知识

首先,什么是盒子模型
我们知道,html文档中,基本上每个元素都可以看作一个盒子,我们称之为盒子模型。

盒子模型的组成
盒子模型包含四个重要的部分:
content(width、height):盒子内容宽高
padding:内边距(填充)
border:边框
margin:外边距

重点:对于盒子来说,设置的宽高和真实占有宽高是不一样的
如图(一般我们以标准盒子模型为主学习)

 

在标准盒子模型中,我们用css属性中的设置width,height其实是内容content的宽高,如果增加边距和边框将会增加盒子的宽度(也就是说,如果padding,margin,border都为0的话,盒子真实占有宽度和内容宽度是一样的)。
在IE盒子模型中,我们设置的width、height指的是盒子真实占有宽高,即如content+border+padding的宽高。

PS:
在浏览器,有一些元素有着默认的设置margin,padding,border,这也是我们写css时一般加入*{margin:0;padding:0}重置样式的原因。

注意,盒子模型是立体的,即组成盒子的每个部分有着各自的层次
border----->content+padding----->background-image----->background-color----->margin 如下图:

 


即:
第1层:盒子的边框(border),
第2层:元素的内容(content)、内边距(padding)
第3层:背景图(background-image)
第4层:背景色(background-color)
第5层:盒子的外边距(margin)

那么这些层级有什么用呢?
通过这些层级显示,我们可以知道优先级的问题:
比如同时设置背景图和背景色时,背景图将会在背景色上方显示

原情况(有背景图无背景色):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        .box {
            width:400px;
            height: 200px;
            margin:100px auto;
            background-image: url(1.jpg);
            /*background-color: gray;*/
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

效果图:

没有背景图只有背景色时:

有背景图有背景色时:

背景色被背景图直接覆盖了。

 

如何查看网页中的元素的盒子具体情况??
此处以chrome浏览器为例,其他浏览器大同小异:
使用F12查看网页源代码,选择一个元素,点击右边界面的'Computed'选项卡即可:

 

参考文章:

CSS盒模型详解(图文教程)

深入理解css盒子模型

CSS学习笔记——盒模型,块级元素和行内元素的区别和特性

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:课时57.HTML被废弃的标签(掌握)

下一篇:课时45.表单标签-按钮(掌握)