CSS盒模型

最新推荐文章于 2022-08-28 15:25:52 发布

不安分的魔菇

最新推荐文章于 2022-08-28 15:25:52 发布

阅读量60

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/sinat_31680159/article/details/88953754

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

CSS盒模型

1. 标准盒模型与IE盒模型

css盒模型分为标准模型 和IE模型两类，两者的区别就是宽高包含范围的区别：
标准模型 盒子的宽 = width；IE模型盒子的宽 = border+padding+width。
浏览器默认为标准盒模型box-sizing:content-box。要想设置为IE盒模型，设置box-sizing:border-box就可以实现。

2.JS如何设置盒模型对应的宽和高

dom.style.width/height

可读可写；缺点：只能取出内联样式里设置的宽高。

dom.currentStyle.width/height

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

window.getComputedStyle(dom).width/height

获取的值和dom.currentStyle.width/height基本一致，只读。IE9及以上还有其他浏览器基本都支持。

dom.getBoundingClientRect().width/height

根据元素在视窗中的绝对位置来获取宽高

dom.offsetWidth/offsetHeight

获取除margin外的宽和高。比较常用。

拓展各种获得宽高的方式：

获取屏幕的高度和宽度（屏幕分辨率）：window.screen.height/width
获取屏幕工作区域的高度和宽度（去掉状态栏）：window.screen.availHeight/availWidth
网页全文的高度和宽度：document.body.scrollHeight/Width
滚动条卷上去的高度和向右卷的宽度：document.body.scrollTop/scrollLeft
网页可见区域的高度和宽度（不加边线）：document.body.clientHeight/clientWidth
网页可见区域的高度和宽度（加边线）：document.body.offsetHeight/offsetWidth

3.BFC

边距重叠

垂直方向上的两个块状元素放在一起，且每个元素都设置了上下margin值，元素相贴的那一边的margin取margin-top和margin-bottom中最大的那个。

下面的代码，当父元素设置overflow:hidden的时候，就会创建一个BFC，父元素高度会由100px变成110px。

<style type="text/css">
    *{
        margin: 0;
        padding:0;
    }
    #wrap{
        background-color: #fae56e;
        /*overflow: hidden;*/
    }
    #child{
        width: 100%;
        height: 100px;
        margin-top: 10px;
        background-color: lightblue;
    }
</style>
</head>
<body>
<section id="wrap">
    <article id="child">
    </article>
</section>
</body>

BFC 块级格式化上下文

BFC特点

在一个BFC中，盒子从顶端开始垂直一个接着一个地排列，两个相邻盒子之间的垂直间距由margin属性决定。在同一个BFC中，两个相邻块盒子之间垂直方向上的外边距会叠加。
在一个BFC中，每一个盒子的左外边界（margin-left）会紧贴着容器的左边（border-left）(对于从右到左的格式化，则相反)，即使存在浮动元素也是如此。
BFC在页面上是一个容器，容器内外的元素不会相互之间影响。
计算BFC高度时，浮动元素也会参与计算。

BFC渲染规则

在一个BFC内部，盒子会在垂直方向上一个接着一个排列。
在一个BFC内部，相邻的margin-top和margin-bottom会叠加。
在一个BFC内部，每一个元素的左边界会紧贴着包含盒子的左边，即使存在浮动元素也是如此。
在一个BFC内部，如果存在内部元素是一个新的BFC，并且存在内部元素是浮动元素。则该BFC的区域不会与float元素的区域重叠。
BFC就是页面上的一个隔离的盒子，该盒子内部的子元素不会影响到外面的元素。
计算一个BFC的高度时，其内部浮动元素的高度也会参与计算。

怎样创建BFC

float值不为none
position不为static或relative
display为table-caption或table-cell或table
overflow不为visible

BFC使用场景

解决边距重叠问题：给元素添加一个父元素，创建父级元素为BFC。
BFC在布局上的应用：BFC元素不会与浮动元素重叠。
清除浮动原理：设置父元素为BFC，子元素即使是float也会参与到BFC高度计算。

不安分的魔菇

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS盒模型

CSS盒模型1. 标准盒模型与IE盒模型css盒模型分为标准模型和IE模型两类，两者的区别就是宽高包含范围的区别：标准模型盒子的宽 = width；IE模型盒子的宽 = border+padding+width。浏览器默认为标准盒模型box-sizing:content-box。要想设置为IE盒模型，设置box-sizing:border-box就可以实现。2.JS如何设置盒模型对应...
复制链接

扫一扫