普通盒模型和怪异盒模型

一、什么是盒模型？

1.根据盒子模型的概念，每个在页面上的元素都是一个拥有宽，高，内边距，边框和外边距的长方形盒子。
2.盒模型分为两种:分别是W3C标准盒模型（普通盒模型）和IE盒模型（怪异盒模型）

二、普通盒模型和怪异盒模型的区别:

1、盒子模型包括margin、padding、content、border，而W3C标准盒子模型的元素宽度width=content的宽度
标准盒模型（W3C盒子模型），设置的width或height是对实际内容（content）的width或height进行设置，内容周围的border和padding另外设置，即盒子模型的width（height）=设置的content的宽高+padding+border+margin
注：除内容content外，其他为上下左右
2、IE怪异盒子模型的元素宽度width=content+padding+border
怪异盒模型（IE盒子模型），设置的width或height是对实际内容（content）+内边距（padding）+边框（border）之和的width和height进行设置的，其盒模型的width（height）=设置的width（height）+外边距margin

三、解决两者的兼容问题

可尝试对父元素使用内边距，对子元素使用外边距

四、box-sizing的应用

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。（个人认为可以理解为指定盒模型的类型，即上述两种类型）
box-sizing值为content-box时：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。（即
标准盒模型）
box-sizing值为border-box时：为元素设定的宽度和高度决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。（即
怪异盒模型） box-sizing值为inherit时：规定应从父元素继承 box-sizing 属性的值。

五、JS如何设置、获取盒模型对应的宽和高：

方式一：通过DOM节点的 style 样式获取

         element.style.width/height;

缺点：通过这种方式，只能获取行内样式，不能获取内嵌的样式和外链的样式

方式二：（IE独有的）

         element.currentStyle.width/height;

获取到的即时运行完之后的宽高（三种css样式都可以获取）。但这种方式只有IE独有。

方式三（通用型）

         window.getComputedStyle(element).width/height;

方式三和方式二一样。只不过，方式三能兼容 Chrome、火狐。是通用型方式

BFC

BFC的基本概念:

BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。

BFC原理：

1、BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
2、BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
3、BFC的区域不会与float box重叠。
4、计算BFC的高度时，浮动元素也被计算在内。
七、BFC如何产生:
在box属性值为这些的情况下，都会让所属的box产生BFC。**

overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

八、BFC的使用场景

可以用来自适应布局

<!-- BFC不与float重叠 --><section id="layout"><style media="screen">#layout{background: red;}#layout .left{float: left;width: 100px;height: 100px;background: #664664;}#layout .right{height: 110px;background: #ccc;overflow: auto;}</style><div class="left"></div><div class="right"></div><!-- 利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。 --></section>

可以清除浮动：

<!-- BFC子元素即使是float也会参与计算 --><section id="float"><style media="screen">#float{background: #434343;overflow: auto;}#float .float{float: left;font-size: 30px;}</style><div class="float">我是浮动元素</div></section>

解决垂直边距重叠：

<section id="margin"><style>#margin{background: pink;overflow: hidden;}#margin>p{margin: 5px auto 25px;background: red;}#margin>div>p {margin: 5px auto 20px;background: red;}</style><p>1</p><div style="overflow:hidden"><p>2</p></div><p>3</p><!-- 这样就会出现第一个p标签的margin-bottom不会和第二个p标签的margin-top重叠，这也是BFC元素的另一个原则，不会影响到外边的box，是一个独立的区域。 -->
</section>

普通盒模型和怪异盒模型相关推荐

盒子模型（标准盒模型、怪异盒模型）
一.盒子模型的组成部分: 内容区域: content 边框 : border 内边距: padding 外边距 margin ✳ 图中的蓝色部分即为content区域二.盒模型的分类: 1.W3C盒 ...
盒子模型--标准盒模型和怪异盒模型
盒子模型由content(内容).margin(外边距).padding(内边距).border(边框)组成 <div style=" ...
CSS标准盒模型和怪异盒模型区别
盒模型都是由四个部分组成的,分别是margin.border.padding 和 content.即外边距,边框,内边距,内容. 一:标准盒模型 1. box-sizing: content-box ...
css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
前端学习-盒模型和怪异盒模型
盒模型图片出自网上侵权删. 从里到外:content(宽高) +padding (内填充) +border(边框)+margin(外边距) padding <style>p{//单方向p ...
【CSS】标准盒模型和怪异盒模型
盒模型的组成: content(内容) padding(内边距) border(边框) margin(外边距) 那常见的盒子模型有哪些呢? 主要是两种:标准盒模型和怪异盒模型. 它俩有什么区别呢?区别 ...
标准盒模型和怪异盒模型的区别？
什么是怪异盒模型?今天我帮大家整理一篇详细的有关于标准盒模型和怪异盒模型的区别在哪里. 首先要知道,什么是盒模型? 盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系.css定义所有 ...
05-标准盒模型与怪异盒模型
标准盒模型与怪异盒模型 1.盒子模型(box model) 在HTML中,可以把元素看做盒子,盒子包括:实际内容(content).内边距(padding). 边框(border).外边距(margi ...
【什么是盒模型】标准盒子模型、怪异盒子模型
一.上图标准盒子模型和IE盒子模型什么是盒子模型 CSS盒子模型(Box model)就是在网页设计中经常用到的CSS技术所使用的一种思维模型.网页中所有元素都具备以下四个属性: 内容(cont ...

普通盒模型和怪异盒模型

BFC

普通盒模型和怪异盒模型相关推荐

最新文章

热门文章