CSS Box Model 盒模型

最新推荐文章于 2024-03-01 11:37:06 发布

一波万波

最新推荐文章于 2024-03-01 11:37:06 发布

阅读量210

点赞数

分类专栏： css 文章标签： css盒子模型

本文链接：https://blog.csdn.net/yibowanbo/article/details/79690548

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

盒子模型

最简单的就是四个属性：内容(content)、内边距(padding)、边界(border)、外边距(margin)，我们可以抽象转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。

box

当然，我们从最基本的谈起：

内容(content)

内容(content)由2个属性 width 与 hight 组成的，width 和 height 设置内容框（content box）的宽度和高度。内容框是框内容显示的区域——包括框内的文本内容，以及表示嵌套子元素的其它框。

内边距(padding)

padding 表示一个 CSS 框的内边距 ——这一层位于内容框的外边缘与边界的内边缘之间。该层的大小可以通过简写属性padding 一次设置所有四个边，或用 padding-top、padding-right、padding-bottom 和 padding-left 属性一次设置一个边。

边界（border）

CSS 框的边界（border）是一个分隔层，位于内边距的外边缘以及外边距的内边缘之间。边界的默认大小为0——从而让它不可见——不过我们可以设置边界的厚度、风格和颜色让它出现。 border 简写属性可以让我们一次设置所有四个边，例如 border: 1px solid black;

外边距（margin）

外边距（margin）代表 CSS 框周围的外部区域，称为外边距，它在布局中推开其它 CSS 框。其表现与 padding 很相似；简写属性为 margin，单个属性分别为 margin-top、margin-right、margin-bottom 和 margin-left。

(w3c)标准盒子和IE(怪异)盒子也有不同

box

由上面看标准盒子的content是不包括其他内容，而IE盒子是包括border，以及padding

CSS3的box-sizing

box-sizing语法

box-sizing ： content-box || border-box || inherit;

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用IE(怪异)模式解析计算；
标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

ie-box1
model

css 盒子模型的面试题：

1、请你谈谈对css盒子模型的认识？

四个属性：内容(content)、内边距(padding)、边界(border)、外边距(margin)，上面有详细解释。

2、标准模型与IE模型的区别？

标准模型与IE模型的区别就是宽和高的计算方式不同，标准的宽度就是content，不包括padding和border，ie的高是content + padding + border的，上面有详细介绍。

3、css是如何设置盒子模型的？

box-sizing ： content-box || border-box || inherit;

4、js如何设置获取盒模型对应的宽和高？

方法一：dom.style.width/height // 只能获取到内嵌样式的宽高，而对于其他的形式是获取不到的，也就是js直接.style.width 取到空白的bug
方法二：dom.currentStyle.width/hight // 渲染以后的宽高只能IE支持
方法三：dom.getComputedStyle(dom).width/height // 计算一个元素的绝对高度
方法四：dom.getBoundingClientRect().width/height // 这个方法能获取当前元素css的最终属性值
box.getBoundingClientRect().width;获得元素的宽高,说一点在标准盒子模型下，他获取到的盒子的宽度是content-width+border+padding 而在IE盒子模型下他获取到的是你设置的宽度，因为在IE盒子模型下padding和border是算在width里的

var box=document.getElementById('box');
//  这个属性有四个值top、right、left、bottom
//  它是代表和页面上边和左边的距离
box.getBoundingClientRect().top;  //  元素上边到视窗上边的距离
box.getBoundingClientRect().right //  元素右边到视窗左边的距离
box.getBoundingClientRect().bottom; //  元素下边到视窗上边的距离
box.getBoundingClientRect().left; //  元素左边到视窗左边的距离

5、BFC是什么

Block Formatting Context，中文直译为块级格式上下文。BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，也有人说：可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

5.1、如何创建BFC？

一个BFC是一个HTML盒子并且至少满足下列条件中的任何一个：
float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
overflow的值不为visible

5.2、BFC的作用

清除内部浮动
- 我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden

5.3、垂直margin合并

<!-- margin 边距 -->
  <div class="parent">
    <div class="children"></div>
  </div>

<style>
  html, body{
    margin: 0;
    padding: 0;
  }
  .parent{
    background: #f00;
  }
  .children{
    height: 100px;
    width: 100px;
    background: #0f0;
    margin-top: 10px;
  }
</style>

bfc

bfc2

在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。折叠的结果：
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时，折叠结果是两者的相加的和。
- 这个同样可以利用BFC解决。关于原理在前文已经讲过了