标准盒模型和IE盒模型

最新推荐文章于 2024-07-20 22:27:34 发布

myboke1

最新推荐文章于 2024-07-20 22:27:34 发布

阅读量9.2k

点赞数 3

分类专栏：前端网页文章标签：盒模型 BFC

本文链接：https://blog.csdn.net/myboke1/article/details/85008830

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

网页

6 篇文章 0 订阅

订阅专栏

盒模型的组成，由里向外分别是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，就会变成：

myboke1

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
标准盒模型和IE盒模型

盒模型的组成，由里向外分别是content，padding，border，margin盒子模型在页面中占的实际宽度是：（margin+padding+border）*2 + width，高度同理。盒模型有标准盒模型和ie盒模型，二者的区别是标准盒模型的内容大小就是content的大小，而ie盒模型的大小则是content+padding+border总的大小。通过设置 box-si...
复制链接

扫一扫

专栏目录