内容简介:以下整理给金三银四求职的小伙伴,同时也是为了巩固笔者所学的知识,希望对大家有所帮助,后面将会陆续整理出其他篇章 js 系列 、http 、react、vue、算法等...本文主题:什么是 CSS 盒模型?相信大部分人都能答出这个问题来,那就是 标准模型 + IE 模型
以下整理给金三银四求职的小伙伴,同时也是为了巩固笔者所学的知识,希望对大家有所帮助,后面将会陆续整理出其他篇章 js 系列 、http 、react、vue、算法等...
本文主题:
- 基本概念: 标准模型 + IE 模型
- 基本模型和 IE 模型的区别:计算宽度和高度的不同
- CSS 如何设置这两种模型(由理论转为运用)
- JS 如何设置、获取盒模型对应的宽和高
- 实例题(根据盒模型解释边距重叠问题) 拔高性的延伸
- BFC (边距重叠解决方案) 面试常考,也容易混淆的题目
盒模型
基本概念
什么是 CSS 盒模型?相信大部分人都能答出这个问题来,那就是 标准模型 + IE 模型
标准模型:
IE 模型
很明显
- 在 标准盒子模型中,
width
和height
指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。 - IE 盒子模型中,
width
和height
指的是content
+border
+padding
CSS 如何设置这两种模型
box-sizeing: content-box; box-sizeing: border-box;
JS 如何设置盒模型对应的宽和高
-
dom.style.width/height
: 只能取出内联样式的宽和高 eg:<div id="aa" style="width: 200px"></div>
-
dom.currentStyle.width/height
获取即时计算的样式,但是只有 IE 支持,要想支持其他浏览器,可以通过下面的方式 -
window.getComputedStyle(dom).width
: 兼容性更好 -
dom.getBoundingClientRect().width/height
: 这个较少用,主要是要来计算在页面中的绝对位置
边距重叠
什么是边距重叠呢?
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
父子元素的边界重叠
<style> .parent { background: #e7a1c5; } .parent .child { background: #c8cdf5; height: 100px; margin-top: 10px; } </style> <section class="parent"> <article class="child"></article> </section> 复制代码
以为期待的效果:
而实际上效果如下:
在这里父元素的高度不是 110px,而是 100px,在这里发生了高度坍塌。
原因是如果块元素的 margin-top
与它的第一个子元素的 margin-top
之间没有 border
、 padding
、 inline
content
、 clearance
来分隔,或者块元素的 margin-bottom 与它的最后一个子元素的 margin-bottom 之间没有 border
、 padding
、 inline
content
、 height
、 min-height
、 max-height
分隔,那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。
兄弟元素的边界重叠
<style> #margin { background: #e7a1c5; overflow: hidden; width: 300px; } #margin > p { background: #c8cdf5; margin: 20px auto 30px; } </style> <section id="margin"> <p>1</p> <p>2</p> <p>3</p> </section> 复制代码
可以看到 1 和 2,2 和 3 之间的间距不是 50px,发生了边距重叠是取了它们之间的最大值 30px。
空元素的边界重叠
假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:
BFC
解决上述问题的其中一个办法就是创建 BFC。BFC 的全称为 Block Formatting Context
,即块级格式化上下文。
- 处于同一个 BFC 中的元素相互影响,可能会发生 margin collapse;
- BFC 在页面上是一个独立的容器,容器里面的子元素不会影响到外面的元素,反之亦然;
- 计算 BFC 的高度时,考虑 BFC 所包含的所有元素,包括浮动元素也参与计算;
- 浮动盒的区域不会叠加到 BFC 上;
防止垂直 margin 重叠
父子元素的边界重叠得解决方案: 在父元素上加上 overflow:hidden;使其成为 BFC。
.parent { background: #e7a1c5; overflow: hidden; } 复制代码
兄弟元素的边界重叠,在第二个子元素创建一个 BFC 上下文:
<section id="margin"> <p>1</p> <div style="overflow:hidden;"> <p>2</p> </div> <p>3</p> </section> 复制代码
清除内部浮动
<style> #float { background: #fec68b; } #float .float { float: left; } </style> <section id="float"> <div class="float">我是浮动元素</div> </section> 复制代码
父元素 #float
的高度为 0,解决方案为为父元素 #float
创建 BFC,这样浮动子元素的高度也会参与到父元素的高度计算:
#float { background: #fec68b; overflow: hidden; /*这里也可以用float:left*/ } 复制代码
自适应两栏布局
<section id="layout"> <style> #layout { background: red; } #layout .left { float: left; width: 100px; height: 100px; background: pink; } #layout .right { height: 110px; background: #ccc; } </style> <!--左边宽度固定,右边自适应--> <div class="left">左</div> <div class="right">右</div> </section> 复制代码
在这里设置右边的高度高于左边,可以看到左边超出的部分跑到右边去了,这是由于由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样导致的。
解决方案为给右侧元素创建一个 BFC,原理是 BFC 不会与 float 元素发生重叠。
#layout .right { height: 110px; background: #ccc; overflow: auto; } 复制代码
参考边距重叠与 BFC
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Margin会重叠,你造吗
- DJI开发之航线重叠率的计算
- PPT 转换为 PDF 时不重叠元素(动画分页)
- Python面试经验总结,面试一时爽,一直面试一直爽!
- 算法面试:数组编码面试问题
- 【面试虐菜】—— JAVA面试题(1)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Cyberwar
Kathleen Hall Jamieson / Oxford University Press / 2018-10-3 / USD 16.96
The question of how Donald Trump won the 2016 election looms over his presidency. In particular, were the 78,000 voters who gave him an Electoral College victory affected by the Russian trolls and hac......一起来看看 《Cyberwar》 这本书的介绍吧!