CSS盒模型
谈谈你对CSS盒模型的认识
每个元素，都会形成一个矩形块，主要包括四部分：margin(外边距)+border(边框)+padding(内边距)+content(内容)
基本概念：标准模型+IE模型
标准盒模型的width只包含内容的宽度：width=content；
IE盒子模型的width包含内容的宽度和border以及padding：width=border+padding+content;
两者的主要区别就是width和height的计算方式的区别。
CSS如何设置这两种模型
CSS3中新增了用户界面属性：box-sizing；用于改变盒模型组成方式。
box-sizing:content-box;/*标准盒模型*/
box-sizing:border-box; /*IE盒模型*/box-sizing:content-box | border-box;
其中content-box是标准盒模型（默认设置），border-box是IE盒模型。
JS中如何设置获取盒模型对应的宽和高
（1）、dom.style.width/height
这种方法只能获取内联（行内）样式的宽和高，获取不到嵌入和外联样式的宽和高；
（2）、dom.currentStyle.width/height
这种方法只能获取IE浏览器中当前元素的计算后的样式的宽和高，这个属性无法获取复合型属性，类似border；
（3）、dom.getComputedStyle.width/height
这种方法IE不支持，其他浏览器支持；
（4）、dom.getBoundingClientRect().width/height IE9以上才支持
兼容版的
rectWidth = dom.getBoundingClientRect().right - dom.getBoundingClientRect().left;
rectHeight = dom.getBoundingClientRect().bottom -dom.getBoundingClientRect().top;
这种方式是根据元素在视窗中的绝对位置来获取宽高的
（5）、dom.offsetWidth/offsetHeight
获取元素的实际大小，包括border、padding和滚动条。
其中（2）（3）是计算后的样式，一般表示默认样式和设置后的样式，也可以获取行内、内嵌和外联样式；因为不管在哪里设置样式最终都会驻留在浏览器的计算样式里。
重点：所有计算样式都是只读的，不能修改计算后样式对象的CSS属性。
关于边距重叠
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。一般是margin的最大值。
两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。
解决边距重叠的方法有BFC（Block Formatting Context）译为“块级格式化上下文”
关于BFC，之前有总结过 https://blog.csdn.net/betty13006159467/article/details/82014461
再简单说一下
BFC原理（渲染规则）
1、在BFC下，内部的box会在垂直方向，一个接一个的放置；
2、box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠；
3、BFC的区域不会与float box重叠； （清除浮动常用）
4、BFC在页面上是一个独立的容器，内外互不影响；
5、计算BFC的高度时，浮动元素也参与计算。
如何创建BFC
1、float值不为none；
2、position值不为static或relative；
3、display为inline-box/table-cell/table-caption;
4、overflow不为visible
BFC使用场景
1、清除浮动；
2、两栏自适应布局；
3、解决边界重叠问题。
示例可以参考我的另一篇博文 https://blog.csdn.net/betty13006159467/article/details/82014461
目前总结就那么多，后续再来添加。
智能推荐
CSS盒模型
盒模型拓展到了一些概念，该篇不只是单纯的对怎样产生一个盒模型来介绍的。 首先CSS中元素分为块级元素和行内元素从语义上理解块级元素在网页中霸占一行不与其他元素并列。 这是CSS中块级元素与行内元素的分类，那么盒子在CSS中用处很多，我们在未转换的情况下只能对块级元素添加盒子， 盒子属性：width（宽）、height（高）、padding（填充）、border（边框）、margin（盒子间距） 那...
CSS 盒模型
盒模型的定义： 盒模型是页面设计和布局时用到一种思维模型。 盒模型由，Margin (外边距), Border (边框) ，Padding(内边距／填充) 和Content（内容）组成。其中外边距margin是透明的，不会遮挡周边的其他元素。 标准盒模型里，用CSS对元素设置width 和 height 属性时， 设置的其实是content 部分的宽和高，元素实际占位空间，还需要加上Pa...
理解CSS盒模型
CSS盒模型是网页布局中一个很重要的概念，在前端面试题中也会经常出现。本文将从以下几个方面讲解CSS盒模型： CSS盒模型的概念 标准盒模型和IE盒模型 元素的实际宽高计算 更改盒模型模式 一、CSS盒模型的概念 在网页中，所有的HTML元素都可以看做一个盒子。那么CSS盒模型其本质上就是一个盒子，它封装HTML元素，包括：外边距（margin），边框（border），内边距（padding），和...
CSS盒模型
1.元素的分类：HTML的标签元素大体被分为三种不同的类型：块状元素、内联元素（行内元素）和内联块状元素。 常用的块状元素有：<div>、<p>、<h1>……<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote&...
猜你喜欢
CSS盒模型
三种盒模型，即box-sizing三个取值 box-sizing:border-box; 宽度计算=content+padding+border box-sizing:padding-box; 宽度计算=content+padding box-sizing:content-box; 宽度计算=content 边框 可拆分 可单独设置 border-top、border-right 等...
CSS盒模型
盒模型 盒模型是css中一个重要的概念，也是css布局的基石，它规定了网页元素如何显示以及元素间相互关系，css定义所有的元素都可以拥有像盒子一样的外形和平面空间。 什么是盒模型 顾名思义，css盒模型本质上是一个盒子，封装周围的HTML元素，它包括content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）四个属性。它们的关系是margin包着border...
CSS盒模型简述
CSS 盒模型规定了元素框处理元素内容、内填充、边框 和 外边距 的方式。 元素框的最内部为内容（content），包围内容的是内填（padding）。内填充呈现了元素的填充区域。内填充的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。 内填充、边框和外边距都是可选的，默认值是零，但是，许多元素都默认自带了内填充和外边距我们可以通过将元素的 margin 和 padd...
css盒模型
什么是盒模型： CSS 盒模型 也叫框模型 (Box Model) ，包含了元素内容（content）、内边距（padding，也叫填充）、边框（border）、外边距（margin），网页是由大小不同的盒子组成的，所有页面中的元素都可以看成一个盒子，并且占据着一定的页面空间。 如上图所示： 一：内容区content 内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图...
css盒模型
css盒模型 一：什么是盒模型 所有的HTML元素都可以看做是一个个的盒子，这个盒子由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。 举个简单的例子，从网上买了一箱口罩，整个箱子就可以看做是网页的body内容区，打开箱子，里边有一个一个的独立包装盒，这些独立包装盒之间的区域就是margin（外填充）区域，而独立包装盒就相当于border（边框）...
