css盒模型
来源于慕课网课程《前端跳槽面试必备技巧》的笔记总结,若有错误,欢迎指正。
基本概念:标准模型 + IE模型
- 标准模型:width / height 指的是content的宽 / 高,不包括padding和border
- IE模型:width / height 指的是 padding + content + border
css如何设置这两种模型
可以通过css3的box-sizing属性来设置盒子的类型,如果不设置浏览器默认为标准模型
- box-sizing:content-box(标准模型)
- box-sizing:border-box(IE模型)
js如何获取两种模型对应的宽和高
js是获取不到style标签里面以及外联样式里面的属性的,只能获取嵌入在标签中样式属性,可通过
dom.style.width / height 获取,如果想获取页面渲染后的样式属性可以通过一下几种方式获取
-
window.getComputedStyle(dom).width / height (getComputedStyle获取的是一个对象,也可以通过window.getComputedStyle(dom)[“width” / “height”])获取,下面的是一样的
-
dom.currentStyle.width / height(IE支持)
-
dom.getBoundingClientRect().width / height(这个方法不能获取其他属性,只能获取跟距离有关的属性如:width / height / top / bottom / left / right / x / y
拓展:如果不只是获取宽和高,获取渲染后页面任意属性呢?这里我封装一个getAnyStyle函数来解决兼容问题
function getAnyStyle(dom, attr) {
return window.getComputedStyle ? window.getComputedStyle(dom, null)[attr] : dom.currentStyle[attr] || 0;
}
实例题(根据盒模型解释边距重叠)
一个父级元素嵌套一个子级元素,子级元素的高为100px,上边距为10px,请问父级元素的高度是多少
html * {
margin: 0;
padding: 0;
}
#parent {
background-color: springgreen;
}
article {
height: 100px;
background-color: yellow;
margin-top: 10px;
}
<section id="parent">
<article></article>
</section>
打开浏览器审查元素:发现父元素的高度为100px
之后给父级元素添加一个overflow属性:overflow:hidden,高度变为了110px,而且出现了背景颜色,这是为什么呢?
首先对于没有加overflow之前,子元素设置了margin-top,如果父级元素没有边框,那么子元素就会“踹”父级元素,实际上是给父级元素设置了margin-top,所以就会出现子元素和父元素重叠的现象,加了overflow之后,相当于给父级元素创建了一个BFC,这样问题就解决了,那么再搞懂BFC之前,再拓展一个案例:
如果两个块级元素相邻呢?我给上边的元素设置margin-bottom:10px,给下面元素设置margin-top:20px,那么这两个元素外边距是多少?
答案是会根据外边大的那一方来决定。原因是小的那一方被大的一方覆盖了,或者是说重叠了。那么如何解决呢,接下来介绍一下BFC
BFC(边距重叠解决方案)
这段笔记摘抄自黑马程序员CSS笔记
什么是BFC
BFC(Block formatting context) 直译为"块级格式化上下文"。
什么元素具有创建BFC的条件
有宽度和高度 , 有 外边距margin 有内边距padding 有边框 border的元素,比如display:block和display:table的元素
什么情况下可以让元素产生BFC
-
float属性不为none
-
position为absolute或fixed
-
display为inline-block, table-cell, table-caption, flex, inline-flex
-
overflow不为visible。
BFC元素所具有的特性
BFC布局规则特性:
1.在BFC中,盒子从顶端开始垂直地一个接一个地排列.
2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
3.在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。
- BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘。
- 计算BFC的高度时,自然也会检测浮动或者定位的盒子高度。
它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
白话文: 孩子在家里愿意怎么折腾都行,但是出了家门口,你就的乖乖的,不能影响外面的任何人。
BFC的主要用途
BFC能用来做什么?
(1) 清除元素内部浮动
只要把父元素设为BFC就可以清理子元素的浮动了,最常见的用法就是在父元素上设置overflow: hidden样式,对于IE6加上zoom:1就可以了。
主要用到
计算BFC的高度时,自然也会检测浮动或者定位的盒子高度。
(2) 解决外边距合并问题
外边距合并的问题。
主要用到
盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
属于同一个BFC的两个相邻盒子的margin会发生重叠,那么我们创建不属于同一个BFC,就不会发生margin重叠了。
(3) 制作右侧自适应的盒子问题
主要用到
普通流体元素BFC后,为了和浮动元素不产生任何交集,顺着浮动边缘形成自己的封闭上下文
BFC 总结
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动,和外边距合并等等,因此,有了这个特性,我们布局的时候就不会出现意外情况了。