盒模型-深入理解盒模型及相关概念

最新推荐文章于 2021-09-08 19:45:56 发布

weixin_33802505

最新推荐文章于 2021-09-08 19:45:56 发布

阅读量420

点赞数

原文链接：https://juejin.im/post/5c8b5be35188252ace1dc813

版权

Created By JishuBao on 2019-03-15 12:38:22
Recently revised in 2019-03-15 12:38:22

欢迎大家来到技术宝的掘金世界,您的star是我写文章最大的动力！GitHub地址

文章简介：

1、盒模型基本概念

2、何为border-box?

3、盒模型的其他属性

4、JS获取宽高

5、边距重叠

6、BFC（边距重叠解决方案）

一、盒模型基本概念

盒模型的组成大家肯定都懂,由里向外content->padding->border->margin。

盒模型是有2钟标准的,一个是标准模型,一个是IE模型。

从俩图不难看出在标准模型中,盒模型的宽高只是内容(content)的宽高。

而在IE模型中盒模型宽高是内容content+填充padding+边框border的总宽高。

二、何为border-box?

背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？为了避免这种问题，可以使用属性box-sizing来调整框模型。使用border-box，来将框模型更改成这个新的模型(即IE模型)**。

注意：回顾一下，框的总宽度是width,padding-right,padding-left,border-right以及border-left属性之和，这就是造成上述背景下，样式不好调整的原因。

box-sizing属性用于更改用于计算元素的宽度和高度默认的CSS盒子模型，可以使用此属性来模拟不正确支持CSS盒子模型规范的游览器行为。

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;
复制代码

三、盒模型的其他属性

1.margin、padding设置为百分比形式：

给div元素的内边距和外边距的各个边设置为5%，意味着“包含元素宽度的5%”，因此，随着示例输出窗口的大小增加，内边距和外边距也增加了。

2.margin可以接受负数，可以用来引起元素框的重叠：

注意:外边距有一个特别的行为被称作外边距塌陷：当俩个框彼此接触时,他们的间距将取俩个相邻边界的最大值,而非俩者的总和。

3.背景剪裁(Background clip)属性:

background-clip:border-box; 背景被剪裁到边框盒。

background-clip:padding-box; 背景被剪裁到内边距盒。

background-clip:content-box; 背景被剪裁到内容框。

4.轮廓(outline)：

一个框的outline是一个看起来像是边界但又不属于框模型的东西。它的行为和边界差不多，但是并不改变框的尺寸（更准确的说，轮廓被勾画于在框边界之外，外边距区域之内）。

相关实例：在引入bootstrap框架时，input在360游览器（兼容模式）下显示，在获得焦点时外边框变蓝，这就是outline造成的影响，去掉只需要添加一个CSS样式即可，input:focus{outline:none;}。

5.CSS框类型，通过display属性来设定元素的框类型：

最常见的display类型是：block,inline,inline-block，即块框（block box）,行内框（inline box）,行内块状框（inline-block box）。

注意：默认状态下display属性值，块级元素display:block，行内元素display:inline。

不常见的类型display类型是：table,flex,grid。

①display:table--允许你像处理table布局那样处理非table元素，而不是滥用HTML的table标签来达到同样的目的；

②display:flex--允许你处理一些困扰CSS已久的一些传统布局问题，如布置一系列弹性等宽容器或者垂直居中内容（目前，flex布局在移动端使用较为广泛）；

③display:grid--给出一种简单实现CSS网络系统的方式，而在传统上它依赖于一些棘手难以处理的CSS网络框架。

6.框的高度

框的高度不遵守百分比的长度；框的高度总是采用框内容的高度，除非指定一个绝对的高度（如：px或者em）,它会比在页面上默认是100%高度更实用。

7.盒的高级属性--设置宽和高的约束

①通过min-width,max-width,min-height,max-height属性，来设置大小约束，以更灵活的方式控制内容盒的大小：

这类情况通常用于响应式网页设计，将一个布局的外层容器的宽度设置为百分比形式。

width:70%;
max-width:1280px;
min-width:480px;
复制代码

然后，添加下句CSS使该容器在它的父容器内居中显示：

margin:0 auto;
复制代码

那么最终呈现的效果是：当父容器在最小和最大宽度限制内时，它将填满整个视口宽度；当父容器超过1280px宽度时，布局将保持在1280px宽，并开始在可用空间内居中。当宽度低于480px时，视口将小于容器，您必须滚动才能看到完全的内容。

②max-width属性的另一个好处是可以将容器内的媒体（如图像和视频）控制在容器内（响应式图片）：

在上述例子中，图像会引起一个问题--起初它的显示正常，但当容器变得比图像更窄时，图像开始溢流容器（因为它是一个固定的宽度）。解决这类问题，可以用以下CSS：

display:block;
margin:0 auto;
max-width:100%;
复制代码

前两条属性display:block,margin:0auto，使它的展示行为像一个块元素并且在父容器内居中。而max-width:100%限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此，当父容器宽度缩小到小于图像的宽度时，图像会一起缩小。(这样，可以让图片最大只能是自己的宽度，成为响应式的图片)

四、JS获取高度

为了方便书写，以下用dom来表示获取的HTML的节点。

1.dom.style.width/height

这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。

2.dom.currentStyle.width/height

这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。

但这种方式只有IE浏览器支持。
3.window.getComputedStyle(dom).width/height

这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。
4.dom.getBoundingClientRect().width/height

这种方式是根据元素在视窗中的绝对位置来获取宽高的。
5.dom.offsetWidth/offsetHeight

这个就没什么好说的了，最常用的，也是兼容最好的。

五、边距重叠

如下图，父元素没有设置margin-top，而子元素设置了margin-top:20px可以看出，父元素也一起有了边距。

六、边距重叠解决方案(BFC)

首先要明确BFC是什么意思，其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”

BFC的原理

1.内部的box会在垂直方向，一个接一个的放置。

2.每个元素的margin box的左边，与包含块border。

3.box的左边相接触（对于从做往右的格式化，否则相反）。

4.box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠。

5.bfc的区域不会与浮动区域的box重叠。

6.bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的。

7.计算bfc高度的时候，浮动元素也会参与计算。

怎么去创建bfc

1.float属性不为none（脱离文档流）

2.position为absolute或fixed

3.display为inline-block,table-cell,table-caption,flex,inine-flex

4.overflow不为visible

5.根元素

应用场景

1.自适应两栏布局

2.清除内部浮动

3.防止垂直margin重叠

看一个垂直margin重叠例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .top{
            background: #0ff;
            height:100px;
            margin-bottom:30px;
        }
        .bottom{
            height:100px;
            margin-top:50px;
            background: #ddd;
        }
    </style>
</head>
<body>

    <section class="top">
        <h1>上</h1>
        margin-bottom:30px;
    </section>
    <section class="bottom">
        <h1>下</h1>
        margin-top:50px;
    </section>

</body>
</html> 
复制代码

用bfc可以解决垂直margin重叠的问题

<section class="top">
        <h1>上</h1>
        margin-bottom:30px;
</section>

<!-- 给下面这个块添加一个父元素，在父元素上创建bfc -->
<div style="overflow:hidden">
    <section class="bottom">
        <h1>下</h1>
            margin-top:50px;
    </section>
</div>
复制代码