标准盒模型和IE盒模型

盒模型的组成，由里向外分别是content，padding，border，margin

盒子模型在页面中占的实际宽度是：（margin+padding+border）*2 + width，高度同理。

盒模型有标准盒模型和ie盒模型，二者的区别是

标准盒模型的内容大小就是content的大小，而ie盒模型的大小则是content+padding+border总的大小。

通过设置 box-sizing:content-box(W3C)/border-box(IE)就可以达到自由切换的效果。

js如何获取和设置box的宽高呢？

法一：dom.style.width 可以获取到行内设置的样式值，返回的是字符串，带单位

法二：在IE下可以使用obj.currentStyle[name]获取，Chrome，火狐下可以使用getComputedStyle(obj)[name]来获取，获取的宽高是计算后的样式，只包含content的宽高，返回的是带单位的

如果想要兼容浏览器，可以封装一个函数：

function getCss(obj,name) {    //用此方法获得样式包含px，获得的是一个字符串if (obj.currentStyle) {return obj.currentStyle[name];}else{return getComputedStyle(obj)[name];}}

以上两种方法只能获取元素的css 大小，无法获取元素本身实际大小，比如内边距、滚动条、边框之类。返回的是带单位的字符串

法三：obj.offsetWidth 可以获取元素的实际大小，包括content，padding，border，返回的是不带单位的值。

法四：obj.clientWidth 可以获取元素的可视区的大小，包括content，padding，返回的是不带单位的值。

offsetLeft可以获得元素距离body的左边距，如果设置了父级position为相对定位，obj为绝对定位，那得到的就是相对于父级的左边距。

margin的小性子：

一、第一个子级设置margin-top会在特定情况下穿透父级

解决方案：1、给父级加边框

2、给父级加overflow：hidden

3、不使用子级的margin-top，而用父级的padding-top代替

二、同一个BFC下外边距会发生折叠

<head>
div{width: 100px;height: 100px;background: lightblue;margin: 100px;
}
</head>
<body><div></div><div></div>
</body>

此时，因为两个div元素在同一个BFC容器下，所以第一个div的下边距和第二个div的上边距发生了重叠，所以两个盒子之间的距离只有100px，而不是200px。如果想要避免外边距的重叠，可以将其放在不同的BFC容器中

<div class="container"><p></p>
</div>
<div class="container"><p></p>
</div>

.container {overflow: hidden;
}
p {width: 100px;height: 100px;background: lightblue;margin: 100px;
}

这时候，两个盒子的距离就是200px了

常见定位方案

1、普通流

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

2、浮动

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

3、绝对定位

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

什么是BFC？

BFC：Block Fromtting Context，块级格式化上下文，是一个独立的布局环境，其中的元素布局是不受外界影响。

具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。

如何触发BFC？

浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll）

虽然添加上述的任意一条都能创建BFC，但会有一些副作用：

1、display: table 可能引发响应性问题
2、overflow: scroll 可能产生多余的滚动条
3、float: left 将把元素移至左侧，并被其他元素环绕
4、overflow: hidden 将裁切溢出元素

因而无论什么时候需要创建BFC，都要基于自身的需要来考虑。

BFC特性及应用

1、同一个BFC下外边距会发生重叠

2、BFC可以包含浮动元素（清除浮动）

3、BFC可以阻止元素被浮动元素覆盖

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动,
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>

这时候其实第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性，在第二个元素中加入 overflow: hidden，就会变成：

标准盒模型和IE盒模型相关推荐

标准盒模型和 IE 盒模型
对于标准盒模型和 IE 盒模型你了解多少? 盒模型讲解我们今天只会提到标准盒模型,和 IE 盒模型,两种盒模型模式讲解.首先来看标准盒模型. 只要是盒模型都会有这四个属性 margin, bord ...
标准事件模型和IE事件模型
前言:在上一篇博客中总结了0级DOM事件模型和2级DOM事件模型,打铁趁热就在谈谈标准事件模型和IE事件模型的区别吧. 一. 标准事件模型在JavaScript中把标准事件模型的执行分为三个阶段,即 ...
Css盒模型有哪几部分，标准盒模型和IE盒模型有哪些区别
首先介绍Css的盒模型也就是标准盒模型(BOX Model) 包含了内容(content) 内边距(padding) 边框(border) 外边框(margin) 这是大家经常用到的,也是现在的标准 ...
前端面试题 | 标准盒模型和IE盒模型的区别？
两者的区别在于content的不同,IE盒模型的content包含border,padding W3C盒子模型(又称之为标准盒模型)的范围包括margin.border.padding.content ...
详解OSI七层模型和TCP/IP模型
详解OSI七层模型 1. 详解OSI七层模型 1.1 详解每层结构 1.2 交换机和路由器的区别 1.3 集线器与路由器在功能上有什么不同 2. 详解TCP/IP模型 2.1 详解每层结构 2.2 O ...
OSI 七层模型和TCP/IP模型及对应协议
OSI 七层模型和TCP/IP模型及对应协议图: 完成中继功能的节点通常称为中继系统.在OSI七层模型中,处于不同层的中继系统具有不同的名称. 一个设备工作在哪一层,关键看它工作时利用哪一层的数据头部 ...
李奎元：说说那些征信模型（Z计分模型、巴萨利模型和A值模型）
李奎元称:根据企业信用管理理论,5C原则是指考察客户信用价值的5个因素,即品行(character).能力(capacity).资本(capital).担保品(collateral)和环境状况(con ...
OSI 七层模型和TCP/IP模型及对应协议（详解）
OSI 七层模型和TCP/IP模型及对应协议(详解) 查看全文 http://www.taodudu.cc/news/show-6185847.html 相关文章: OSI7层网络模型协议精析 OSI ...
OSI模型和TCP/IP模型
OSI模型开放式系统互联通信参考模型(英语:Open System Interconnection Reference Model,缩写为 OSI),简称为OSI模型(OSI model),一种概念 ...
基于JVM原理、JMM模型和CPU缓存模型深入理解Java并发编程
许多以Java多线程开发为主题的技术书籍,都会把对Java虚拟机和Java内存模型的讲解,作为讲授Java并发编程开发的主要内容,有的还深入到计算机系统的内存.CPU.缓存等予以说明.实际上,在实际的 ...

标准盒模型和IE盒模型

标准盒模型和IE盒模型相关推荐

最新文章

热门文章