盒子模型浅析

番茄西红柿发布于2019-04-23 13:38 / 3164人阅读

摘要：上篇文章总结了块级元素和行内元素这篇文章总结了有关盒子模型的知识，助于梳理知识首先，什么是盒子模型我们知道，文档中，基本上每个元素都可以看作一个盒子，我们称之为盒子模型。在盒子模型中我们设置的指的是盒子真实占有宽高即如的宽高。

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

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

首先，什么是盒子模型
我们知道，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学习笔记——盒模型，块级元素和行内元素的区别和特性

GPU云服务器云服务器盒子模型源码浅析 cdn浅析 jdbc连接mysql数据库的方法浅析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2147.html

浅析BFC布局的概念以及作用

摘要：的概念以及作用的概念以及作用的定义的定义直译为块级格式化上下文。是的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。BFC的概念以及作用 BFC的定义： (Block formatting context)直译为块级格式化上下文。它是一个独立的渲染区域，只有Block-level box参与，它规定了内...

荆兆峰 2019-04-23 13:29 评论0 收藏0
浅析BFC

摘要：原文链接说起其实有点像闭包在大多数人印象中的感觉，平时都用过，但在不了解定义的情况下大多数人却又不知道这就是。这种行为只存在于兄弟元素在同一下这种情形。上文提到的可以看下大漠的这篇文章参考理解布局和分钟理解原理原文链接: Fyerls Blog 说起 BFC 其实有点像闭包在大多数人印象中的感觉，平时都用过，但在不了解定义的情况下大多数人却又不知道这就是 BFC。之所以会想了解下什么...

voyagelab 2019-08-29 15:06 评论0 收藏0
浅析BFC

摘要：原文链接说起其实有点像闭包在大多数人印象中的感觉，平时都用过，但在不了解定义的情况下大多数人却又不知道这就是。这种行为只存在于兄弟元素在同一下这种情形。上文提到的可以看下大漠的这篇文章参考理解布局和分钟理解原理原文链接: Fyerls Blog 说起 BFC 其实有点像闭包在大多数人印象中的感觉，平时都用过，但在不了解定义的情况下大多数人却又不知道这就是 BFC。之所以会想了解下什么...

My_Oh_My 2019-08-02 10:14 评论0 收藏0
拓端数据tecdat:DT模型打好用户流失预防针——电信客户流失浅析

摘要：基于以上背景，研究人员对年至今的电信用户流失数据进行分析，并建立预测模型，识别出流失概率很高的客户群体，同时找出哪些用户特征对用户流失会有重大影响。 showImg(https://segmentfault.com/img/bVUMPC?w=747&h=384); 原文链接消费者今天会订阅多个电信服务（电视、付费节目、游戏等）。然而电信供应商提供的服务的差异化程度不高，客户忠诚度成为...

wushuiyong 2019-08-01 17:35 评论0 收藏0
拓端数据tecdat:DT模型打好用户流失预防针——电信客户流失浅析

摘要：基于以上背景，研究人员对年至今的电信用户流失数据进行分析，并建立预测模型，识别出流失概率很高的客户群体，同时找出哪些用户特征对用户流失会有重大影响。 showImg(https://segmentfault.com/img/bVUMPC?w=747&h=384); 原文链接消费者今天会订阅多个电信服务（电视、付费节目、游戏等）。然而电信供应商提供的服务的差异化程度不高，客户忠诚度成为...

wawor4827 2019-06-28 13:44 评论0 收藏0