1 CSS盒模型的基本概念
CSS盒模型包括内容(content)、内边距(padding)、边框(border)、外边距(margin)属性的一个盒子模型。
2 盒模型如何分类、有什么区别、如何设置
①
盒子模型分为2种标准:标准模型、IE模型。
②
标准模型的宽高指content的宽高;
IE模型的宽高指content+padding+border的长度。
③
标准模型 “box-sizing: content-box;”(浏览器默认为标准模型)
IE模型 “box-sizing: border-box;”
3 JS 如何设置获取盒模型的宽高
方法 | 区别 |
---|---|
dom.style.width/height | 只能取内联样式 |
dom.currentStyle.width/height | 取渲染后的样式,但只支持 IE 浏览器 |
window.getComputedStyle().width/height | 可知更多浏览器(Firefox、Chrome等),兼容性好 |
dom.getBoundingClientRect().width/height | ①获取元素相对于视窗的位置的集合 ②返回值有 top、left、width、height ③兼容性更好,可以兼容IE5、firefox2以上的浏览器 |
4 BFC
4.1 BFC 基本概念
(block format context)块级格式化上下文。
它是一个独立的渲染区,只有block-level box参与,它规定了内部的block-level box布局,并且与这个区域外部毫不相干。
4.2 BFC 布局规则(渲染规则)
①内部的box会在垂直方向,一个接一个的放置;
②box垂直方向的距离由margin决定,属于同一个BFC的两个相连box的margin会重叠;
③BFC是一个隔离的独立容器,容器内的子元素不会影响容器外面的元素;反之亦然;
④计算BFC高度时,浮动元素也会参与计算;
⑤BFC的区域不会与float box重叠;
4.3 BFC 如何创建
①float 不为 none(可为left、right…);
②overflow 不为 visible (可为hidden、auto…);
③positon 为 absolute、fixed;
④display 为 inline-block、flex、table、table-cell…;
4.4 BFC 的使用场景
①避免margin重叠;
②避免塌陷(清除浮动);
③自适应两栏布局;